Eltranĉu SVG-ojn el bildoj per klipa vojo

Se vi volas eltranĉi bildon kun la helpo de SVG, la uzo de la CSS-propraĵa klipa vojo estas rekomendinda. La sekva skripto ekigas malglatajn barojn: La SVG povas esti konservita helpe de Illustrator, vi povas specifi la (relativan aŭ absolutan) URL de SVG (Chrome subtenas ĝis nun denaske nur enlinian SVG) kaj la dekoltaĵo ankaŭ tute respondas.


Unue vi kreas tondan maskon en Adobe Illustrator kaj eksportas la SVG kun la jenaj agordoj:

La bildformoj de la SVG kaj la bildo devas esti 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.

Reen