Question

我有这样的任务：一个没有边框的圆圈，我们得到一些百分比（来自用户或只是自己输入 - 不会），之后应该根据这个数字填充圆的边界。我正在尝试使用SVG。但这对我来说并不清楚。它不适用于persentages，我不知道如何获得所有长度的正确数字

<svg width="270" height="270">
  
    <circle 
            r="115" cx="135" cy="135"
            fill="none";
            stroke="blue"
            stroke-width="15"            
            stroke-dasharray="1000"
            stroke-dashoffset="0%">
    <animate 
            attributeName="stroke-dashoffset" 
            attributeType="CSS"
            from="1000" to="00"
            begin="0s" dur="2s"/>

</svg>

Image to see how it shoul be

Answer 1

一个观察：stroke-dasharray的值如果你想要它是满的应该是圆的圆周（以像素为单位）。所以2*Pi*r。

stroke-dashoffset是从笔画偏移的像素数量，例如：

半径为115像素的圆将具有2*Pi*115=722.56 723像素的周长。如果我们想以75％填充它，我们必须将笔画偏移723*(1-0.75)=180.75 181px。

以下示例：

＆＃13;

<svg id="svg" width="270" height="270">
    <circle id="circle"
            r="115" cx="135" cy="135"
            fill="none";
            stroke="blue"
            stroke-dasharray="723"
            stroke-dashoffset="361"
            stroke-width="15">
        <animate id="animation" 
        attributeName="stroke-dashoffset"  
        attributeType="CSS" 
        begin="0s" 
        to="361"
        from="723"
        dur="2s"/>
  </circle>
            
            <text x="50%" y="50%" text-anchor="middle" stroke="#000" stroke-width="2px" dy=".3em">50%</text>
</svg>

<svg id="svg" width="270" height="270">
    <circle id="circle"
            r="115" cx="135" cy="135"
            fill="none";
            stroke="blue"
            stroke-dasharray="723"
            stroke-dashoffset="181"
            stroke-width="15">
        <animate id="animation" 
        attributeName="stroke-dashoffset"  
        attributeType="CSS" 
        begin="0s" 
        to="181"
        from="723"
        dur="2s"/>
  </circle>
            
            <text x="50%" y="50%" text-anchor="middle" stroke="#000" stroke-width="2px" dy=".3em">75%</text>
</svg>

＆＃13;

根据设定的百分比

1 个答案: