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