تقنية

meet وslice في SVG: لماذا يظهر فراغ أو يمتد الرسم خارج الإطار؟

meet يترك فراغًا رأسيًا؛ slice يغطي الإطار وتظهر فيه أجزاء من الأشرطة.
الأعداد أبعاد الرسم، لا الإطار.

حفظ النسبة لا يحدد طريقة الملء.

الخلاصة السريعة

meet يختار العامل الأصغر للاحتواء، وslice الأكبر للتغطية، عندما نفرض التحجيم الموحد.

  • meet يحتوي viewBox مع حفظ النسبة.
  • slice يغطي الإطار مع حفظ النسبة.
  • المحاذاة هنا xMidYMid.
  • القص محدد صراحة في مثالنا.

مثال حسابي

اخترنا viewBox="0 0 120 60" وإطارًا 240×240، مع محاذاة xMidYMid في preserveAspectRatio. النسبتان 2 و4: ينتج meet رسمًا 240×120 وإزاحة رأسية 60؛ وينتج slice رسمًا 480×240 وإزاحة أفقية −120.

المحتوى خارج الإطار

ضبطنا overflow:hidden في التجربة، فاقتصر العرض على الإطار. اختلاف طريقة الملء ليس تشويهًا للنسبة. راجع المحاذاة وسياسة القص؛ لا تعمم نتيجة الإعداد المختار على كل SVG.

المصادر ومتابعة القراءة

  1. W3C SVG — التحويل والمحاذاة (يفتح في نافذة جديدة)w3.org

أُعدّ هذا المقال بصياغة عربية أصلية بالاستناد إلى المصادر أعلاه، وهو مدخل تمهيدي إلى الموضوع. اقرأ منهجية المحتوى وحدوده.