Recortar formas con clipPath y mask en SVG
Dos tecnicas, usos distintos
SVG ofrece dos formas de "recortar": clipPath (corte duro segun una forma) y mask (recorte por niveles de gris/transparencia). Sirven para encajar imagenes o crear efectos.
clipPath: corte segun una forma
<defs> <clipPath id="circulo"><circle cx="50" cy="50" r="50"/></clipPath> </defs> <image href="foto.jpg" width="100" height="100" clip-path="url(#circulo)"/>
Solo se ve lo que cae dentro del circulo. Bordes nitidos (todo o nada).
mask: recorte por luminosidad
<defs> <mask id="m"> <rect width="100" height="100" fill="white"/> <circle cx="50" cy="50" r="30" fill="black"/> </mask> </defs> <rect width="100" height="100" fill="#6c8cff" mask="url(#m)"/>
En una mask, blanco = visible, negro = oculto, grises = semitransparente. Permite degradados de transparencia.
¿Cual usar?
- clipPath: recortes con borde definido (encajar foto en una forma).
- mask: desvanecidos, transparencias suaves, efectos.
Consejo
Para encajar una foto en un circulo o forma, clipPath es lo mas simple. Para que algo se desvanezca, usa mask con un degradado.
Disena la forma de recorte
Crea la figura del recorte en svgdesk, copia su codigo y usala dentro de <clipPath> o <mask>.