は、私は、このようなタスクを持っているセットの割合

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。

ストローク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>