clip-path في CSS

بدل رسم الشكل، استخدمه لاقتطاع شيء آخر. عنصر `clipPath` في المستند مع خاصية CSS واحدة يحوّل صورة أو مقطع فيديو أو div ملوّنًا إلى ذلك الشكل — وهكذا تصير الكتلة قناع صورة شخصية بدل أن تكون خلفية.

<svg width="0" height="0" style="position:absolute">
  <defs>
    <clipPath id="shape-clip" clipPathUnits="userSpaceOnUse">
      <path d="M100 38L153.69 69L153.69 131L100 162L46.31 131L46.31 69Z"/>
    </clipPath>
  </defs>
</svg>

/* The element must be 200×200 for the clip to line up. */
.clipped {
  width: 200px;
  height: 200px;
  clip-path: url(#shape-clip);
}

ما يجدر معرفته

• يحتفظ العنصر بمحتواه: هذا يقصّ صورة لا يجلس خلفها.
• يحتاج كتلة `<svg>` المضمَّنة وقاعدة CSS معًا — فالخاصية تشير إلى clipPath عبر المعرّف.
• على العنصر أن يطابق فضاء إحداثيات الاقتطاع، ولهذا يذكر الناتج المقاس.
• غيّر المعرّف إن استخدمت أكثر من اقتطاع في الصفحة نفسها.

دعم المتصفحات

مدعوم في كل متصفح حالي. و`clip-path: url(#id)` المشير إلى clipPath مضمَّن هو أوسع الصيغ — أوسع من صيغتَي الدالة `path()` و`shape()`، وهما أحدث ولا تستحقان المخاطرة ما دام هذا لا يكلّف شيئًا إضافيًا.

الحجم عبر الإعدادات المسبقة

كل إعداد مسبق تستطيع هذه الصيغة التعبير عنه، مقيسًا كما يخرجه المولّد. أصغرها سداسي عند 369 بايت؛ وأكبرها رشّة عند 859 بايت. وعدد النقاط هو ما يصنع الفارق — فكل نقطة إضافية تضيف مقطعًا تكعيبيًا كاملًا من الإحداثيات.

بمزيد من التفصيل

يستخدم الناتج `clipPathUnits="userSpaceOnUse"` ويخبرك بالمقاس الذي ينبغي أن يكون عليه العنصر، بدل صيغة `objectBoundingBox` التي كانت ستتكيّف مع أي عنصر تلقائيًا. ويبدو ذلك الخيار الأسوأ حتى تجرّبه: فـ `objectBoundingBox` تشترط التعبير عن كل إحداثي بين 0 و1، ما يعني إعادة إخراج المسار بمقياس آخر وفقدان معظم دقته في التقريب. والتصريح بالمقاس يبقي المنحنى كما رُسم تمامًا.

أسئلة

كل رقم وكل شكل في هذه الصفحة أُنتج بتشغيل المولّد وقت البناء، فهو يصف الأداة التي أنت على وشك استخدامها لا نسخة كانت موجودة يومًا.