கிளிப் பாதை கொண்ட படங்களிலிருந்து SVG களை வெட்டுங்கள்

நீங்கள் ஒரு SVG உதவியுடன் ஒரு படத்தை வெட்ட விரும்பினால், CSS சொத்து கிளிப்-பாதை பயன்படுத்த பரிந்துரைக்கப்படுகிறது. பின்வரும் ஸ்கிரிப்ட் தடையற்ற தடைகளைத் தூண்டுகிறது: இல்லஸ்ட்ரேட்டரின் உதவியுடன் SVG ஐச் சேமிக்க முடியும், நீங்கள் ஒரு SVG இன் (உறவினர் அல்லது முழுமையான) URL ஐக் குறிப்பிடலாம் (Chrome இப்போது சொந்தமாக மட்டுமே இன்லைன் SVG ஐ ஆதரிக்கிறது ) மற்றும் நெக்லைனும் முற்றிலும் பதிலளிக்கக்கூடியது.


முதலில் நீங்கள் அடோப் இல்லஸ்ட்ரேட்டரில் ஒரு கிளிப்பிங் மாஸ்கை உருவாக்கி பின்வரும் அமைப்புகளுடன் SVG ஐ ஏற்றுமதி செய்யுங்கள்:

SVG மற்றும் படத்தின் விகிதங்கள் ஒரே மாதிரியாக இருக்க வேண்டும். இறுதியாக, வெளிப்புற SVG படத்தில் குறிப்பிடப்பட்டுள்ளது, எடுத்துக்காட்டாக தரவு-கிளிப் பண்புகளில்:

1e4823ee95525ce0e04bb693c48e0e35

இப்போது நீங்கள் பின்வரும் ஸ்கிரிப்டை ஒருங்கிணைக்கிறீர்கள்:

1e4823ee95525ce0e04bb693c48e0e35

விளைவு அது:

See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.

மீண்டும்