Maison >interface Web >tutoriel CSS >Comment tracer et remplir partiellement une forme d'étoile SVG ?

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

DDD
DDDoriginal
2024-11-07 00:41:02327parcourir

How to Outline and Partially Fill an SVG Star Shape?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn