HTML-如何在此SVG上输入“是”和“否”及其各自的百分比？-堆栈溢出

顺晟科技

2022-10-18 12:12:37

146

在

这个项目中，我希望有一个像问题一样的投票，投票者可以选择是或否，SVG将在其中显示结果，但也会为“是”和“否”分配一种颜色（见下面我的进度）以及它们各自的百分比，就像Instagram的“是或否”投票一样。最终结果应如下所示：

这是我到目前为止

取得的进展。

<代码><；身体>；<；SVG width=“ 400 ” height=“ 400 ”>；<；定义>；<；LinearGradient ID=“ Progress ” x1=“ 0 ” Y1=“ 0 ” x2=“ 1 ” Y2=“ 1 ”>；<；stop ID=“ stop1 ” offset=“ 0 ” stop-color=“ green ”/>；<；stop ID=“ stop2 ” offset=“ 0 ” stop-color=“ blue ”/>；<；/LinearGradient>；<；/defs>；<；rect ID=“ my-shape ” width=“ 300 ” height=“ 100 ” fill=“ URL（#progress）”/>；<；/SVG>；<；/正文>；<；脚本>；函数SetProgress（AMT）{金额=（金额<；0) ?0：（金额>；1) ?1：金额；document.getElementById（“ stop1 ”）.setAttribute（“ offset ”，AMT）；document.getElementById（“ stop2 ”）.setAttribute（“ offset ”，AMT）；}设置进度（0.20）；函数SetProgress（AMTS）{AMTS=（AMTS<；0) ?0：（AMTS>；1) ?1：AMTS；document.getElementById（“ stop2 ”）.setAttribute（“ offset ”，amts）；document.getElementById（“ stop1 ”）.setAttribute（“ offset ”，amts）；}设置进度（.90）；<；/脚本>；<；/HTML>；

顺晟科技：

有两种方法可以做到这一点：

<body>
    <svg width="400" height="400">
        
        <defs>
          <linearGradient id="progress" x1="0" y1="0" x2="1" y2="0">
            <stop id="stop1" offset="0" stop-color="green"/>
            <stop id="stop2" offset="0" stop-color="blue"/>
          </linearGradient>
        </defs>
      
        <rect id="my-shape" width="300" height="100" fill="url(#progress)" />
      </svg>
    
</body>
<script>
    function setProgress(amt)
{
  amt = (amt < 0) ? 0 : (amt > 1) ? 1 : amt;
  document.getElementById("stop1").setAttribute("offset", amt);
  document.getElementById("stop2").setAttribute("offset", amt);
}


setProgress(0.20);

function setProgress(amts)
{
  amts = (amts < 0) ? 0 : (amts > 1) ? 1 : amts;
  document.getElementById("stop2").setAttribute("offset", amts);
  document.getElementById("stop1").setAttribute("offset", amts);
}


setProgress(.90);
</script>
</html>

HTML

<代码><；DIV类="；容器"；>；<；SVG宽度="；400"；高度="；400"；>；<；定义>；<；linearGradient ID="；进度"；X1=0Y1="；0"；X2=1Y2="；0"；>；<；停止ID="；停止1"；偏移量=0停止颜色="；绿色"；/>；<；停止ID="；停止2"；偏移量=0停止颜色="；蓝色"；/>；<；/LinearGradient>；<；/defs>；<；rect ID="；my-shape"；宽度="；300"；高度=100填充="；URL（#progress）"；/>；<；/SVG>；<；p类="；轮询__是"；>；是<；br/>；<；span>；80%<；/SPAN>；<；/P>；<；p类="；轮询__否"；>；否<；br/>；<；span>；20%<；/SPAN>；<；/P>；<；/DIV>；

CSS

<代码>.CONTAINER{显示：Flex；flex-direction：行；}.poll__是{位置：绝对；左：5em；文本对齐：居中；字体大小：1.5em；}.poll__否{位置：绝对；右：19.7em；文本对齐：居中；字体大小：1.5em；颜色：白色}

JavaScript

<p>

我对你的代码做了一些调整，让你开始并更进一步。

您还可以使用<div class="container"> <svg width="400" height="400"> <defs> <linearGradient id="progress" x1="0" y1="0" x2="1" y2="0"> <stop id="stop1" offset="0" stop-color="green"/> <stop id="stop2" offset="0" stop-color="blue"/> </linearGradient> </defs> <rect id="my-shape" width="300" height="100" fill="url(#progress)" /> </svg> <p class="poll__yes">Yes <br /> <span>80%</span></p> <p class="poll__no">No <br /> <span>20%</span></p> </div>通过JS

引用

希望这些能让你开始去你想去的地方，位置需要根据你的进展来控制。祝你好运

产量：

上一篇：HTML-如何使用CSS向GIF添加下一篇：HTML-如何在IE中使用JavaS

网站建设

Html

HTML-如何在此SVG上输入“是”和“否”及其各自的百分比？-堆栈溢出