Tutoriel SVG

Élément SVG

Filtre <filter> SVG Manuel de référence SVG

Chemise <clippath> SVG

Le chemin de coupe SVG (également appelé SVG de coupe) est utilisé pour couper les formes SVG selon un chemin spécifique. Les parties internes des formes sont visibles, tandis que les parties externes ne le sont pas.

Exemple de chemin de coupe

Voici un exemple simple de chemin de coupe :

Exemple

<svg　width="200"　height="100"　style="border:　1px　solide　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath">
　　　　　　　　　　　　<rect x="15" y="15" width="40" height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle cx="25"　cy="25"　r="20"　style="fill:　#0000ff;　clip-path:　url(#clipPath);　"></circle>
</svg>
<svg　width="200"　height="100"　style="border:　1px　solide　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath2">
　　　　　　　　　　　　<rect x="15" y="15" width="40" height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle cx="25"　cy="25"　r="20"　style="fill:　#0000ff;　clip-path: url(#clipPath2);　"></circle>
　　　　<rect x="15" y="15" width="40" height="40"　style="stroke:　#000000;　fill:none;"></rect>
</svg>

Testez pour voir‹/›

Dans cet exemple, un chemin de coupe similaire à un rectangle (la forme dans l'élément <clipPath>) est défini. Le cercle défini à la fin de l'exemple est dessiné via l'attribut CSS clip-path fait référence à l'attribut id du <clipPath>.

En bas à gauche, voici l'image générée. À droite, c'est la même image, mais avec le chemin de coupe dessiné également.

Veuillez noter que seule la partie circulaire est visible à l'intérieur du chemin de coupe. Le reste sera coupé.

Chemins de coupe avancés

Vous pouvez utiliser d'autres formes que le rectangle en tant que chemin de coupe. Vous pouvez utiliser un cercle, une ellipse, un polygone ou un chemin personnalisé. Toute forme SVG peut être utilisée comme chemin de coupe.

Voici un exemple où l'élément <path> est utilisé comme chemin de coupe. Ce sont les types de chemins de coupe les plus avancés que vous pouvez utiliser. Le chemin de coupe sera appliqué à l'élément <rect>.

Exemple

<svg　width="200"　height="100"　style="border:　1px　solide　#cccccc;">
　　　　<rect x="5" y="5" width="190" height="90"　style="stroke:　none;　fill:#00ff00;　"></rect>
</svg>
<svg　width="200"　height="100"　style="border:　1px　solide　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath3">
　　　　　　　　　　　　<path　d="M10,10　q60,60　100,0　q50,50　50,50　l40,0　l-40,40　l-100,-20"></path>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<rect x="5" y="5" width="190" height="90"　style="stroke:　none;　fill:#00ff00;　clip-path: url(#clipPath3);"></rect>
</svg>

Testez pour voir‹/›

Voici l'image générée-à droite. À gauche, l'image sans chemin de coupe est affichée.

Chemin de coupe sur le groupe

Vous pouvez utiliser un chemin de coupe sur un ensemble de formes SVG, plutôt que de l'utiliser sur chaque forme séparément. Il suffit de placer les formes à l'intérieur de l'élément <g>, puis de définir les attributs CSS clip sur l'élément <g>.-path即可。 Voici un exemple :

Exemple

<svg　width="200"　height="100"　style="border:　1px　solide　#cccccc;">
　　　　<rect x="5" y="5" width="190" height="90"　style="stroke:　none;　fill:#00ff00;　"></rect>
　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
</svg>
<svg　width="200"　height="100"　style="border:　1px　solide　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath4">
　　　　　　　　　　　　<rect x="10" y="20"　width="100" height="20"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g style="clip-path: url(#clipPath4);">
　　　　　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"></rect>
　　　　　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
　　　　</g>
</svg>

Testez pour voir‹/›

Voici une image sans chemin de coupe, puis une image avec chemin de coupe appliqué :

Texte en tant que chemin de coupe

Vous pouvez également utiliser le texte comme chemin de coupe. Voici un exemple :

Exemple

<svg　width="200"　height="100"　style="border:　1px　solide　#cccccc;">
　　　　<rect x="5" y="5" width="190" height="90"　style="stroke:　none;　fill:#00ff00;　"></rect>
　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
</svg>
<svg　width="200"　height="100"　style="border:　1px　solide　#cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath5">
　　　　　　　　　　　　<text　x="10" y="20"　style="font-taille:　20px;　">
　　　　　　　　　　　　　　　　Ceci est un texte
　　　　　　　　　　　　</text>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g style="clip-path: url(#clipPath5);">
　　　　　　　　<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"></rect>
　　　　　　　　<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
　　　　</g>
</svg>

Testez pour voir‹/›

Voici le résultat avec et sans chemin de coupe :

Comme vous le voyez, seules une partie de la forme interne du texte est affichée maintenant.

Filtre <filter> SVG Manuel de référence SVG