Tutoriales de SVG

Elemento SVG

Elemento <mask> de SVG Elemento <pattern> de SVG

Elemento <clipPath> de SVG

El elemento <clipPath> de SVG se utiliza para recortar formas SVG según una ruta específica. También se conoce como recorte de SVG. La parte de la forma dentro de la ruta es visible, mientras que la parte externa no es visible.

Ejemplos en línea

El siguiente ejemplo utiliza clipPath para dibujar un sector azul.

Ejemplo

<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>

Prueba a ver‹/›

El efecto de ejecución es el siguiente:

Explicación de uso

Ahora, puedes ver que la parte circular dentro de la ruta de recorte es visible, y el resto de la parte ha sido recortada.
El atributo id del elemento <clipPath> define el nombre único de la ruta de recorte.

Más ejemplos en línea

El siguiente ejemplo utiliza clipPath para dibujar una forma de corazón:

Ejemplo

<style>
svg{width:40%;height:30%}
@keyframes abrirTuCorazón {from {r: 0} to {r:　60px}}
#myClip círculo {
　　animation: abrirTuCorazón;　15s infinita;
}
</style>
<svg viewBox="0 0　100　100">
　　<clipPath id="myClip">
　　　　<!--
　　　　　　Todo lo que esté fuera del círculo será recortado, por lo tanto, no es visible.
　　　　-->
　　　　<circle　cx="40"　cy="35"　r="35></circle>
　　</clipPath>
　
　　<!--　Como elemento de referencia (en inglés: for reference) el corazón negro　-->
　　<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>
　
　　<!--
　　　　Sólo la parte roja del círculo que está dentro del corazón negro es visible;
　　　　A medida que la circunferencia del círculo aumenta, se convertirá gradualmente en un corazón rojo.
　　-->
　　<use　clip-path="url(#myClip)"　xlink:href="#heart"　fill="red"></use>
</svg>

Prueba aquí ‹/›

El efecto después de ejecutar se muestra a continuación:

Elemento <mask> de SVG Elemento <pattern> de SVG