Si desea recortar una imagen mediante un archivo SVG, se recomienda utilizar la propiedad CSS `clip-path` . El siguiente script elimina varios obstáculos: los archivos SVG se pueden guardar con Illustrator, se puede especificar la URL (relativa o absoluta) de un archivo SVG (actualmente, Chrome solo admite SVG en línea de forma nativa) y el recorte es totalmente adaptable.
Primero crea una máscara de recorte en Adobe Illustrator y exporta el SVG con la siguiente configuración:
Las proporciones del SVG y de la imagen deben ser las mismas. Finalmente, el SVG externo se referencia en la imagen, por ejemplo, en el atributo `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Ahora integra el siguiente script:
1e4823ee95525ce0e04bb693c48e0e35
El resultado es que:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.