English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'elemento <clipPath> di SVG viene utilizzato per tagliare le forme SVG secondo un percorso specifico. Anche chiamato taglio SVG. La parte della forma all'interno del percorso è visibile, mentre la parte esterna non lo è.
Esempio di utilizzo di clipPath per disegnare un segmento di cerchio blu.
<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>Prova a vedere‹/›
L'effetto di esecuzione è il seguente:
Ora, puoi vedere che la parte restante del cerchio all'interno del percorso di taglio è visibile.
L'attributo id dell'elemento <clipPath> definisce il nome unico del percorso di taglio.
Esempio di utilizzo di clipPath per disegnare una forma a cuore:
<style>
svg{width:40%;height:30%}
@keyframes openYourHeart {from {r: 0} to {r: 60px}}
#myClip circle {
animation: openYourHeart 15s infinite;
}
</style>
<svg viewBox="0 0 100 100">
<clipPath id="myClip">
/*
Tutto ciò che si trova al di fuori del cerchio verrà tagliato e quindi non sarà visibile.
-->
<circle cx="40" cy="35" r="35"></circle>
</clipPath>
/* Come elemento di riferimento (testo originale: for reference) il cuore nero */
<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>
/*
Solo la parte rossa del cerchio che si trova all'interno del cuore nero è visibile;
Con l'aumentare del raggio del cerchio, diventerà gradualmente un cuore rosso.
-->
<use clip-path="url(#myClip)" xlink:href="#heart" fill="red"></use>
</svg>Prova a vedere ‹/›Ecco l'effetto dopo l'esecuzione: