قطع SVGs من الصور مع مقطع المسار

إذا كنت تريد قص صورة بمساعدة 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.

عودة