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