قص مقاطع دائرية من صورة باستخدام SVG

محاولتك الحالية لاستخدام مسار مقطع لقص مقطع دائري من الصورة لا تتم محاذاتها بشكل صحيح. لمعالجة هذه المشكلة، سنستكشف طريقة أخرى باستخدام الأقنعة في SVG.

يُنشئ هذا الرمز ملف SVG بخلفية مضبوطة على اللون الوردي. داخل عنصر defs، نحدد قناعًا يسمى "hole". يتكون هذا القناع من دائرتين: دائرة بيضاء كبيرة تمثل المنطقة الدائرية التي تريد الاحتفاظ بها من الصورة ودائرة سوداء أصغر تحدد المقطع.

العنصر التالي هو نمط يسمى "img". يحدد هذا النمط الصورة التي تريد استخدامها كتعبئة للشكل. قمنا بتعيين أبعاد النمط لتتناسب مع حجم SVG واستخدم صورة من عنوان URL.

أخيرًا، قمنا بإنشاء مستطيل يملأ مساحة SVG بالكامل. تم تعيين تعبئة المستطيل للإشارة إلى نمط "img"، ونطبق قناع "الثقب" لقطع القسم الدائري.