حدود SVG عند التكبير: حافظ على سمك الخط باستخدام vector-effect

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

افصل الشكل عن حدوده

تضاعف scale(2) الأبعاد؛ تثبيت الحد لا يلغي التحويل. [2] [3]

نبدأ بمستطيل عرضه 60 وارتفاعه 50. التحويل في المثال يجعل أبعاده الهندسية المعروضة 120×100؛ ينطبق الحساب على المستطيلين لأن العامل نفسه مستخدم فيهما. هذه الأبعاد تصف هندسة المستطيل، لا كامل مساحة الطلاء حول حافته. [2]

تقبل scale عاملين إذا أردت تحجيمًا مختلفًا أفقيًا وعموديًا؛ وعند كتابة عامل واحد يستخدم للاتجاهين. نلتزم هنا بتحجيم متساوٍ كي تكون المقارنة سهلة القراءة. [2]

أضف التأثير إلى المستطيل الثاني

ضع vector-effect="non-scaling-stroke" على الشكل ذي الحد الذي تريد تثبيت سمكه. [1]

انسخ SVG التالي إلى صفحة HTML محلية مستقلة. المستطيل الأيسر هو الضابط العادي، والأيمن يحمل التأثير. نحافظ على اللون وسمك الحد المعلن، ونغيّر موضع المستطيل حتى لا يتراكبا. [1] [2]

القيمة الافتراضية للتأثير هي none. أما non-scaling-stroke فتغير طريقة رسم الحد، وليست طلبًا لتثبيت حجم الشكل نفسه. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

<svg width="420" height="180" viewBox="0 0 420 180"
     xmlns="http://www.w3.org/2000/svg">
  <rect id="normal" x="20" y="20" width="60" height="50"
        fill="none" stroke="black" stroke-width="4"
        transform="scale(2)" />
  <rect id="fixed" x="120" y="20" width="60" height="50"
        fill="none" stroke="black" stroke-width="4"
        transform="scale(2)"
        vector-effect="non-scaling-stroke" />
</svg>

اقرأ الفرق في الطلاء

تساوى الشكلان؛ بلغ الحد العادي 8px والثابت 4px في تجربتنا. [3]

قسنا الحد العلوي بعيدًا عن الزوايا في Edge؛ النافذة 600×300 وكثافة بكسل الجهاز 1، وأبعاد SVG ثابتة. [3]

تحسب المواصفة الحد في إحداثيات منفذ SVG المضيف بعد تحويل المسار، ثم تعيده؛ يبقى الشكل محوّلًا. [3]

غيّر متغيرًا واحدًا عند الفحص

قارن التحويل نفسه مع التأثير وبدونه، وافحص أي قيمة CSS قد تتقدم على السمة. [1]

احذف سمة vector-effect من المستطيل الثاني، ثم أعدها. في الاختبار عاد حده إلى السمك العادي عند الحذف. إذا لم يظهر الفرق في صفحتك، افحص الخاصية المحسوبة؛ قيمة vector-effect في CSS تتقدم على سمة العرض عند تحديدهما معًا. [1]

الأرقام لتحويل العنصر بإعداد ثابت؛ لم نختبر تكبير المتصفح أو النظام، ولا نضمنها لهما. [3]