Եթե ցանկանում եք պատկեր կտրել 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.