यदि आप SVG का उपयोग करके किसी छवि को काटना चाहते हैं, तो CSS प्रॉपर्टी `clip-path` का उपयोग करने की सलाह दी जाती है। निम्नलिखित स्क्रिप्ट कई बाधाओं को दूर करती है: SVG को इलस्ट्रेटर का उपयोग करके सहेजा जा सकता है, आप SVG का (सापेक्ष या निरपेक्ष) URL निर्दिष्ट कर सकते हैं (क्रोम वर्तमान में केवल इनलाइन SVG का समर्थन करता है ), और कटआउट पूरी तरह से रिस्पॉन्सिव भी है।
सबसे पहले आप Adobe Illustrator में एक क्लिपिंग मास्क बनाएं और SVG को निम्न सेटिंग्स के साथ निर्यात करें:
SVG और इमेज का आस्पेक्ट रेशियो समान होना चाहिए। अंत में, इमेज में बाहरी SVG का संदर्भ दिया जाता है, उदाहरण के लिए, `data-clip` एट्रिब्यूट में।:
1e4823ee95525ce0e04bb693c48e0e35
अब आप निम्न स्क्रिप्ट को एकीकृत करें:
1e4823ee95525ce0e04bb693c48e0e35
नतीजा यह है कि:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.