Maison >interface Web >tutoriel CSS >Comment tracer et remplir partiellement une forme d'étoile SVG ?
Problème :
Vous avez une forme d'étoile SVG et souhaitez :
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!