根据设定的百分比环绕对象

我有这样的任务：一个无边框的圆，我们得到一些百分比（来自用户或只是由我们自己输入 - 不要），之后它的圆的边界应该填充在这个数字上。我正在尝试使用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

来源

2017-10-16 illia_6655321

我没有得到你的问题。你的意思是说，你的圈子将首先在浏览器上呈现无边界。那么你会传递一些值，这将是一个输入到圈子的边界，将动画？这是你想要的吗？\ – Krishna9960

@ Krishna9960是的，例如，如果我们输入50，我们会看到一半的圆圈，100 - 完整的圆圈。 –

一个观察：的stroke-dasharray价值，如果你希望它是全应该是以像素为单位的圆的周长。所以2*Pi*r。

冲程dashoffset是从笔划偏移的像素的数量，因此，例如：

115px半径的圆将具有2*Pi*115=722.56 723px的圆周上。如果我们想要填充75％，我们必须用723*(1-0.75)=180.75 181px来抵消中风。下面

例子：

<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>

来源

2017-10-16 14:59:38 Drewman

根据设定的百分比环绕对象

回答

相关问题