Pritini SVG-të nga imazhet me shteg clip

Nëse dëshironi të shkurtoni një imazh me ndihmën e një SVG, rekomandohet përdorimi i rrugës së klipit të pronësisë CSS. Skenari i mëposhtëm shkakton barriera me gunga: SVG mund të ruhet me ndihmën e Illustrator, mund të specifikoni URL -në (relative ose absolute) të një SVG (Chrome mbështet deri më tani vetëm SVG inline) dhe dekolteja është gjithashtu plotësisht e përgjegjshme.


Së pari ju krijoni një maskë prerëse në Adobe Illustrator dhe eksportoni SVG me cilësimet e mëposhtme:

Raportet e aspektit të SVG dhe imazhit duhet të jenë të njëjta. Së fundi, SVG e jashtme i referohet imazhit, për shembull në atributin e të dhënave-clip:

1e4823ee95525ce0e04bb693c48e0e35

Tani ju integroni skenarin e mëposhtëm:

1e4823ee95525ce0e04bb693c48e0e35

Rezultati është ai:

See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.

Mbrapa