Tutoriales de SVG

Elementos SVG

Filtro <filter> de SVG Manual de referencia de SVG

Ruta de recorte <clippath> de SVG

El camino de recorte de SVG (también conocido como recorte de SVG) se utiliza para cortar formas SVG según una ruta específica. La parte de la forma dentro de la ruta es visible, mientras que la parte externa no lo es.

Ejemplo de ruta de recorte

Este es un ejemplo simple de ruta de recorte:

Ejemplo

<svg　ancho="200"　altura="100"　estilo="borde:　1px sólido #cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath">
　　　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle　cx="25"　cy="25"　radio="20"　estilo="relleno:　#0000ff;　ruta-path:　url(#clipPath);　"></circle>
</svg>
<svg　ancho="200"　altura="100"　estilo="borde:　1px sólido #cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath2">
　　　　　　　　　　　　<rect　x="15"　y="15"　width="40"　height="40"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<circle　cx="25"　cy="25"　radio="20"　estilo="relleno:　#0000ff;　ruta-ruta:　url(#clipPath2);　"></circle>
　　　　<rect　x="15"　y="15"　width="40"　height="40"　estilo="trazo:　#000000;　relleno:none;"></rect>
</svg>

Prueba para ver‹/›

Este ejemplo define una ruta de recorte que tiene una forma similar a un rectángulo (la forma dentro del elemento <clipPath>). El círculo definido al final del ejemplo se dibuja a través del atributo CSS clip-path se refiere al atributo id del <clipPath>.

En la esquina inferior izquierda se muestra la imagen generada. A la derecha es la misma imagen, pero también se ha dibujado la ruta de recorte.

Note que solo la parte circular está visible dentro de la ruta de recorte. El resto se recortará.

Rutas de recorte avanzadas

Se puede usar formas以外的其他形状 como rutas de recorte. Se pueden usar círculos, elípticos, polígonos o rutas personalizadas. Cualquier forma SVG se puede usar como una ruta de recorte.

Este es un ejemplo de usar el elemento <path> como una ruta de recorte, ya que estos son los tipos de rutas de recorte más avanzados que se pueden usar. La ruta de recorte se aplicará al elemento <rect>.

Ejemplo

<svg　ancho="200"　altura="100"　estilo="borde:　1px sólido #cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　estilo="trazo:　ninguno;　relleno:#00ff00;　"></rect>
</svg>
<svg　ancho="200"　altura="100"　estilo="borde:　1px sólido #cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath3">
　　　　　　　　　　　　<path　d="M10,10　q60,60　100,0　q50,50　50,50,0　l40,0　l-40,40,0　l-100,-20"></path>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<rect　x="5"　y="5"　width="190"　height="90"　estilo="trazo:　ninguno;　relleno:#00ff00;　ruta-ruta:　url(#clipPath3);"></rect>
</svg>

Prueba para ver‹/›

Esta es la imagen generada-a la derecha. A la izquierda se muestra la imagen sin ruta de recorte.

Recortar en el grupo

Se puede usar una ruta de recorte en un grupo de formas SVG en lugar de en cada forma por separado. Simplemente coloque las formas dentro del elemento <g>, y luego establezca las propiedades CSS clip en el elemento <g>.-path. Esto es un ejemplo:

Ejemplo

<svg　ancho="200"　altura="100"　estilo="borde:　1px sólido #cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　estilo="trazo:　ninguno;　relleno:#00ff00;　"></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg　ancho="200"　altura="100"　estilo="borde:　1px sólido #cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath4">
　　　　　　　　　　　　<rect　x="10"　y="20"　ancho="100"　height="20"></rect>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g　style="clip-ruta:　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>

Prueba para ver‹/›

A continuación, se muestra la imagen sin ruta de recorte, luego la imagen con la ruta de recorte aplicada:

Texto como ruta de recorte

También se puede usar el texto como una ruta de recorte. Aquí hay un ejemplo:

Ejemplo

<svg　ancho="200"　altura="100"　estilo="borde:　1px sólido #cccccc;">
　　　　<rect　x="5"　y="5"　width="190"　height="90"　estilo="trazo:　ninguno;　relleno:#00ff00;　"></rect>
　　　　<circle　cx="20"　cy="20"　r="20"　style="stroke:　none;　fill:　#ff0000;"></circle>
</svg>
<svg　ancho="200"　altura="100"　estilo="borde:　1px sólido #cccccc;">
　　　　<defs>
　　　　　　　　<clippath　id="clipPath5">
　　　　　　　　　　　　<text　x="10"　y="20"　estilo="fuente-tamaño:　20px;　">
　　　　　　　　　　　　　　　　Esto es un texto
　　　　　　　　　　　　</text>
　　　　　　　　</clippath>
　　　　</defs>
　　　　<g　style="clip-ruta:　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>

Prueba para ver‹/›

Aquí hay resultados de imágenes con y sin rutas de recorte:

Como puede ver, ahora solo se muestra una parte de la forma interna del texto.

Filtro <filter> de SVG Manual de referencia de SVG