إذا كنت ترغب في قص صورة باستخدام SVG، يُنصح باستخدام خاصية CSS `clip-path` . يزيل البرنامج النصي التالي العديد من العقبات: يمكن حفظ ملفات SVG باستخدام Illustrator، ويمكنك تحديد عنوان URL (نسبي أو مطلق) لملف SVG ( يدعم Chrome حاليًا ملفات SVG المضمنة فقط بشكل أصلي)، كما أن القص متجاوب تمامًا.
أولاً ، تقوم بإنشاء قناع قص في Adobe Illustrator وتصدير SVG بالإعدادات التالية:
يجب أن تكون نسب أبعاد ملف SVG والصورة متطابقة. وأخيرًا، تتم الإشارة إلى ملف SVG الخارجي في الصورة، على سبيل المثال، في الخاصية `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
الآن تقوم بدمج النص التالي:
1e4823ee95525ce0e04bb693c48e0e35
والنتيجة هي أن:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.