Եթե ցանկանում եք կտրել պատկերը SVG- ի օգնությամբ, խորհուրդ է տրվում օգտագործել CSS հատկությունների clip-path- ը : Հետևյալ սցենարը առաջացնում է խորդուբորդ խոչընդոտներ. SVG- ն կարող է պահպանվել Illustrator- ի օգնությամբ, կարող եք նշել SVG- ի (հարաբերական կամ բացարձակ) URL- ը (Chrome- ը մինչև այժմ ապահովում է միայն ներկառուցված SVG- ն), իսկ պարանոցը նույնպես լիովին արձագանքում է:
Նախ Adobe Illustrator- ում ստեղծում եք կտրող դիմակ և SVG- ն արտահանում եք հետևյալ պարամետրերով:
SVG- ի և պատկերի հարաբերակցության հարաբերությունները պետք է լինեն նույնը: Վերջապես, արտաքին SVG- ն հղում է կատարում պատկերին, օրինակ ՝ data-clip հատկանիշին:
1e4823ee95525ce0e04bb693c48e0e35
Այժմ դուք ինտեգրում եք հետևյալ սցենարը:
1e4823ee95525ce0e04bb693c48e0e35
Արդյունքն այն է, որ:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.