Si desea recortar una imagen con la ayuda de un SVG, se recomienda el uso de la ruta del clip de la propiedad CSS. El siguiente script activa barreras llenas de baches: el SVG se puede guardar con la ayuda de Illustrator, puede especificar la URL (relativa o absoluta) de un SVG (Chrome admite hasta ahora de forma nativa solo SVG en línea) y el escote también responde completamente.
Primero crea una máscara de recorte en Adobe Illustrator y exporta el SVG con la siguiente configuración:
Las relaciones de aspecto del SVG y la imagen deben ser las mismas. Finalmente, se hace referencia al SVG externo en la imagen, por ejemplo, en el atributo de clip de datos:
1e4823ee95525ce0e04bb693c48e0e35
Ahora integra el siguiente script:
1e4823ee95525ce0e04bb693c48e0e35
El resultado es que:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.