Se si desidera ritagliare un'immagine con l'aiuto di un SVG, si consiglia l'uso della proprietà CSS clip-path . Il seguente script attiva barriere irregolari: L'SVG può essere salvato con l'aiuto di Illustrator, puoi specificare l'URL (relativo o assoluto) di un SVG (Chrome supporta fino ad ora solo SVG in linea in modo nativo) e anche la scollatura è completamente reattiva.
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 dovrebbero essere le stesse. Infine, nell'immagine viene fatto riferimento all'SVG esterno, 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.