Tutoriel SVG

Élément SVG

Élément <mask> SVG Élément <pattern> SVG

Élément <clipPath> SVG

L'élément <clipPath> SVG est utilisé pour couper les formes SVG selon un chemin spécifique. Il est également appelé coupe SVG. La partie de la forme à l'intérieur du chemin est visible, tandis que la partie extérieure est invisible.

Exemples en ligne

Les exemples suivants utilisent clipPath pour dessiner un secteur bleu.

Exemple

<svg height="450" width="450">
　　<defs>
　　　　　　<clipPath id="clip">
　　　　　　　　　　<rect x="15" y="15" width="40" height="40"　/>
　　　　　　</clipPath>
　　</defs>
　　<circle　cx="25" cy="25"　r="30"
　　　　　　　　　　style="fill: #0000ff; clip-path: url(#clip); "　/>
</svg>

Voyons de quoi il s'agit‹/›

Le résultat de l'exécution est le suivant:

Explication de l'utilisation

Maintenant, vous pouvez voir que la partie circulaire visible à l'intérieur de la voie de coupe a été découpée.
L'attribut id de l'élément <clipPath> définit le nom unique de la voie de coupe.

Plus d'exemples en ligne

Les exemples suivants utilisent clipPath pour dessiner une forme en cœur:

Exemple

<style>
svg{width:40%;height:30%}
@keyframes ouvrir ton cœur {from {r: 0} to {r:　60px}}
#myClip circle {
　　animation: ouvrir ton cœur;　15s infini;
}
</style>
<svg viewBox="0 0　100　100">
　　<clipPath id="myClip">
　　　　<!--
　　　　　　Tout ce qui se trouve en dehors du cercle sera découpé, donc invisible.
　　　　-->
　　　　<circle　cx="40"　cy="35"　r="35></circle>
　　</clipPath>
　
　　<!--　Le cœur noir en tant qu'élément de référence (texte original en anglais : for reference)　-->
　　<path　id="heart"　d="M10,30　A20,20,0,0,1,50,30　A20,20,0,0,1,90,30　Q90,60,50,90　Q10,60,10,30　Z"></path>
　
　　<!--
　　　　Ce qui est visible est seulement une partie de la boule rouge située à l'intérieur du cœur noir ;
　　　　Avec l'augmentation du cercle, il deviendra progressivement un cœur rouge.
　　-->
　　<use　clip-path="url(#myClip)"　xlink:href="#heart"　fill="red"></use>
</svg>

Essayons un test ‹/›

Voici l'effet après l'exécution :

Élément <mask> SVG Élément <pattern> SVG