আপনি যদি একটি SVG ব্যবহার করে কোনো ছবি কেটে নিতে চান, তাহলে `clip-path` CSS প্রপার্টিটি ব্যবহার করার পরামর্শ দেওয়া হয়। নিম্নলিখিত স্ক্রিপ্টটি বেশ কিছু বাধা দূর করে: 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.