Nëse doni të prisni një imazh duke përdorur një SVG, rekomandohet të përdorni vetinë CSS `clip-path` . Skripti i mëposhtëm heq disa pengesa: SVG-të mund të ruhen duke përdorur Illustrator, mund të specifikoni URL-në (relative ose absolute) të një SVG-je (Chrome aktualisht mbështet vetëm SVG-të e integruara në linjë) dhe prerja është gjithashtu plotësisht e përshtatshme.
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-së dhe të imazhit duhet të jenë të njëjta. Së fundmi, SVG-ja e jashtme referohet në imazh, për shembull, në atributin `data-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.