Se vi volas eltondi bildon uzante SVG-on, estas rekomendinde uzi la CSS-propraĵon `clip-path` . La jena skripto forigas plurajn obstaklojn: SVG-oj povas esti konservitaj per Illustrator, vi povas specifi la (relativan aŭ absolutan) URL-on de SVG (Chrome nuntempe nur native subtenas enliniajn SVG-ojn), kaj la eltondaĵo ankaŭ estas tute respondema.
Unue vi kreas tondan maskon en Adobe Illustrator kaj eksportas la SVG kun la jenaj agordoj:
La bildformatoj de la SVG kaj la bildo estu la samaj. Fine, la ekstera SVG estas referencita en la bildo, ekzemple, en la atributo `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Nun vi integras la sekvan skripton:
1e4823ee95525ce0e04bb693c48e0e35
La rezulto estas tio:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.