Se si desidera ritagliare un'immagine utilizzando un file SVG, si consiglia di utilizzare la proprietà CSS `clip-path` . Lo script seguente elimina diversi ostacoli: i file SVG possono essere salvati utilizzando Illustrator, è possibile specificare l'URL (relativo o assoluto) di un file SVG (Chrome attualmente supporta nativamente solo gli SVG inline) e il ritaglio è completamente responsivo.
Per prima cosa crei una maschera di ritaglio in Adobe Illustrator ed esporti l'SVG con le seguenti impostazioni:
Le proporzioni dell'SVG e dell'immagine devono essere identiche. Infine, l'SVG esterno viene richiamato nell'immagine, ad esempio, nell'attributo `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Ora integri il seguente script:
1e4823ee95525ce0e04bb693c48e0e35
Il risultato è che:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.