根據設定的百分比環繞對象

我有這樣的任務：一個無邊框的圓，我們得到一些百分比（來自用戶或只是由我們自己輸入 - 不要），之後它的圓的邊界應該填充在這個數字上。我正在嘗試使用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

根據設定的百分比環繞對象

回答

相關問題