ஒரு SVG-ஐப் பயன்படுத்தி ஒரு படத்தை வெட்டி எடுக்க விரும்பினால், `clip-path` என்ற CSS பண்பைப் பயன்படுத்துவது பரிந்துரைக்கப்படுகிறது. பின்வரும் ஸ்கிரிப்ட் பல தடைகளை நீக்குகிறது: SVG-களை Illustrator-ஐப் பயன்படுத்தி சேமிக்கலாம், ஒரு SVG-இன் (சார்பு அல்லது முழுமையான) URL-ஐ நீங்கள் குறிப்பிடலாம் (Chrome தற்போது உள்ளமைந்த SVG-களை மட்டுமே இயல்பாக ஆதரிக்கிறது ), மேலும் வெட்டி எடுக்கப்பட்ட பகுதியும் முழுமையாகப் பதிலளிக்கக்கூடியதாக (responsive) உள்ளது.
முதலில் நீங்கள் அடோப் இல்லஸ்ட்ரேட்டரில் ஒரு கிளிப்பிங் மாஸ்கை உருவாக்கி பின்வரும் அமைப்புகளுடன் SVG ஐ ஏற்றுமதி செய்யுங்கள்:
SVG மற்றும் படத்தின் விகிதங்கள் ஒரே மாதிரியாக இருக்க வேண்டும். இறுதியாக, நீங்கள் படத்தில் வெளிப்புற SVG ஐக் குறிப்பிடுகிறீர்கள், எடுத்துக்காட்டாக தரவு-கிளிப் பண்புக்கூறில்:
1e4823ee95525ce0e04bb693c48e0e35
இப்போது நீங்கள் பின்வரும் ஸ்கிரிப்டை ஒருங்கிணைக்கிறீர்கள்:
1e4823ee95525ce0e04bb693c48e0e35
விளைவு அது:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.