encercler l'objet en fonction des pourcentages fixés

J'ai une telle tâche: un cercle sans frontières et nous obtenons des pourcentages (de l'utilisateur ou simplement entrer par nous-mêmes - ne pas mater), après que la bordure du cercle doit être rempli en fonction sur ce numéro. J'essaie d'utiliser SVG. Mais ce n'est pas clair pour moi. Il ne fonctionne pas avec persentages et je ne sais pas comment obtenir le numéro bon pour toute la longueur encercler l'objet en fonction des pourcentages fixés

<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

Source

2017-10-16 illia_6655321

Je n'ai pas votre question. Vous voulez dire que votre cercle sera d'abord rendu sur le navigateur sans bordure. alors vous passerez une valeur qui sera une entrée à la bordure du cercle qui va animer? Est-ce que vous voulez? \ – Krishna9960

@ Krishna9960 Oui, par exemple, si nous entrons 50, nous verrons la moitié du cercle, 100 - cercle complet. –

Une observation: la valeur de stroke-dasharray si vous voulez qu'il soit plein devrait être la circonférence du cercle en pixels. Donc 2*Pi*r.

La course-dashoffset est le nombre de pixels qui sont décalés dans le temps, de sorte que par exemple:

Un cercle de rayon 115px aura une circonférence de 2*Pi*115=722.56 723px. Si nous voulons le remplir à 75%, nous devons compenser le trait par 723*(1-0.75)=180.75 181px.

exemples ci-dessous:

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

Source

2017-10-16 14:59:38 Drewman

encercler l'objet en fonction des pourcentages fixés

Répondre

Questions connexes