Comment puis-je créer une forme d'étoile partiellement remplie avec SVG ?

Création et remplissage partiel d'une forme d'étoile avec SVG

Pour créer un trait à l'extérieur de l'étoile, vous devez modifier le trait. propriété linecap. Voici une version mise à jour de votre code :

<br><svg height="210" width="500"><br> <polygon points="100,10 40,198 190 ,78 10,78 160,198" Stroke-linecap="round"></svg><br>

Maintenant, remplissons partiellement la forme de l'étoile. Vous pouvez utiliser des filtres CSS pour obtenir cet effet. Un filtre appelé "fillpartial" peut être défini comme suit :

<br><defs><br> <filter><pre class="brush:php;toolbar:false"><feFlood x="0%" y="0%" width="100%" height="100%" flood-color="red" />
<feOffset dy="0.5">
  <animate attributeName="dy" from="1" to=".5" dur="3s" />
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" /></p>
<p></filter><br> </defs><br>

Ensuite, vous pouvez appliquer ce filtre à votre forme d'étoile comme ceci :

<br><filtre polygone ="url(#fillpartial)" points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,<br> 203.042, 152.639,<br> 176.756, 148.820,<br> 16 5.000, 125.000,<br>153.244, 148.820 ,<br> 126.958, 152.639,<br> 145.979, 171.180,<br> 141.489, 197.361,<br> 165.000, 185.000">

Cela entraînera une forme d'étoile qui est rempli jusqu'à mi-chemin, créant un effet à moitié rempli. Vous pouvez modifier les valeurs de couleur d'arrêt et d'opacité d'arrêt du paramètre élément pour changer la couleur et la transparence de la zone remplie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!