Comment tracer et remplir partiellement une forme d'étoile SVG ?

Décoration et remplissage partiel d'une forme SVG

Problème :

Vous avez une forme d'étoile SVG et souhaitez :

• Appliquer un contour à l'extérieur de l'étoile sans disséquer son intérieur sections.
• Remplissez partiellement la forme de l'étoile pour indiquer le classement par étoiles.

Solution :

Décrire l'étoile :

Pour tracer le contour de l'étoile sans affecter sa forme intérieure, utilisez la propriété trait. Dans votre exemple, la propriété Stroke est actuellement appliquée à chaque ligne de l'étoile, y compris les lignes qui coupent la zone intérieure. Pour éviter cela, modifiez votre code comme suit :

<polygon points="100,10 40,198 190,78 10,78 160,198">

Remplir partiellement l'étoile :

Pour un remplissage partiel, vous pouvez utiliser un effet de filtre. Voici un exemple qui utilise un filtre pour animer le remplissage :

<svg height="210" width="500">
  <defs>
    <filter>

Ce filtre définit un remplissage rouge qui est partiellement rempli par un effet de décalage animé. En ajustant les paramètres du filtre ou en créant des filtres supplémentaires, vous pouvez créer divers effets de remplissage partiel pour vos notes par étoiles.

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!