English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Corso SVG

Elemento SVG

Percorso di taglio <clippath> SVG

Il percorso di tagliatura SVG (noto anche come tagliatura SVG) viene utilizzato per tagliare le forme SVG in base a un percorso specifico. La parte interna della forma è visibile, mentre la parte esterna non lo è.

Esempio di percorso di tagliatura

Questo è un esempio semplice di percorso di tagliatura:

<svg width="200" height="100" style="border: 1px solid #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 solid #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>
Testa a vedere‹/›

Questa istanza definisce un percorso di tagliatura simile a un rettangolo (la forma nel elemento <clipPath>). L'oggetto circolare definito alla fine dell'esempio viene richiamato tramite l'attributo clip-path dell'id <clipPath>.

In basso a sinistra è l'immagine generata. A destra è la stessa immagine, ma anche con il percorso di taglio disegnato.

Nota che solo la parte circolare è visibile all'interno del percorso di taglio. Il resto sarà tagliato.

Percorsi di taglio avanzati

Puoi utilizzare forme diverse dagli rettangoli come percorso di taglio. Puoi utilizzare cerchi, ellissi, poligoni o percorsi personalizzati. Ogni forma SVG può essere utilizzata come percorso di taglio.

Ecco un esempio di utilizzare l'elemento <path> come percorso di taglio, poiché questi sono i tipi di percorso di taglio più avanzati che puoi utilizzare. Il percorso di taglio verrà applicato all'elemento <rect>.

<svg width="200" height="100" style="border: 1px solid #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 solid #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>
Testa a vedere‹/›

Ecco l'immagine generata - sulla destra. A sinistra è l'immagine senza percorso di taglio.

Tagliare il percorso su un gruppo

Puoi utilizzare un percorso di taglio su un gruppo di forme SVG, invece di applicarlo a ciascuna forma separatamente. Basta posizionare le forme all'interno dell'elemento <g>, quindi impostare l'attributo CSS clip-path sull'elemento <g>. Ecco un esempio:

<svg width="200" height="100" style="border: 1px solid #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 solid #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>
Testa a vedere‹/›

Di seguito è l'immagine senza percorso di taglio, seguita dall'immagine con percorso di taglio applicato:

Testo come percorso di taglio

Puoi anche utilizzare il testo come percorso di taglio. Ecco un esempio:

<svg width="200" height="100" style="border: 1px solid #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 solid #cccccc;">
　　　　<defs>
　　　　　　　　<clippath id="clipPath5">
　　　　　　　　　　　　<text x="10" y="20" style="font-size: 20px;">
　　　　　　　　　　　　　　　　Questo è un testo
　　　　　　　　　　　　</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>
Testa a vedere‹/›

Ecco i risultati delle immagini con e senza percorso di taglio:

Questo è un testo

Come vedete, ora viene visualizzato solo una parte della forma interna del testo.

Filtro <filter> SVGManuale di riferimento SVG