Viewport و ViewBox لـ SVG

يمكن تعيين حجم الجزء المرئي من صورة SVG من خلال视بورت (Viewport) و ViewBox.

الفرق بين viewport و viewbox

1- viewport منطقة الرؤية، مثل شاشة الشاشة.

2- viewbox منطقة الرؤية، مثل قطعة صغيرة من الشاشة على الشاشة، يتم تضخيمها إلى كامل الشاشة، مما ينتج تأثير التكبير.

3-تحديد preserveAspectRatio طريقة الترابط والتمدد بين viewbox و viewport.

منظور视بورت (Viewport)

منظور视بورت (Viewport) هو منطقة الرؤية للصورة SVG. من الناحية المنطقية، يمكن أن تكون صورة SVG بعرض وارتفاع كما تريد، ولكن يمكنك رؤية جزء معين من الصورة في كل مرة. منطقة الرؤية تسمى视بورت (Viewport).

يمكنك استخدام خصائص width وheight للعنصر لتحديد حجم نافذة الرؤية (Viewport) لـ <svg>. إليك مثالًا:

<svg　width="500"　height="300"></svg>

تعريف نافذة الرؤية (Viewport) في هذا المثال هو 500 وحدة عرض و300 وحدة طول.

وحدات نظام الإحداثيات

إذا لم تكن قد قمت بتحديد أي وحدة في خصائص width وheight، فإن الوحدة افتراضية ستكون بكسل. أي أن width500 تعني 500 بكسل.

إذا كنت ترغب في استخدام وحدات مختلفة عن البكسل، يمكنك القيام بذلك. إليك قائمة بالوحدات التي يمكنك استخدامها مع عنصر <svg>:

الوحدات التي تقوم بتعيينها على علامة <svg> تؤثر فقط على حجم علامة <svg> (نافذة الرؤية Viewport). حجم الأشكال التي تظهر في صورة SVG يتم تحديده بواسطة الوحدات التي تقوم بتعيينها على كل شكل. إذا لم يتم تحديد وحدة، فإن الوحدة ستكون بكسل بشكل افتراضي.

هذا مثال يظهر عنصر <svg> يحتوي على مجموعة وحدات، ويشمل أشكالًا لها مجموعات وحدات خاصة بها:

<svg　width="10cm"　height="10cm">
　　　　<rect　x="50"　y="100"　width="50"　height="50"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"/>
　　　　<rect　x="100"　y="100"　width="50mm"　height="50mm"
　　　　　　　　　　style="stroke:　#000000;　fill:　none;"　/>
</svg>

صورة <svg> لديها إعداد وحداتها الخاص. هذان العنصران <rect> لديهما مجموعات وحدات خاصة بهما. واحد هو بكسل (لا يوجد إعداد وحدات واضح) والآخر هو mm للعرض والارتفاع.

هذه هي الصورة المولدة. لاحظ أن الصندوق على اليمين (المقياس: width وheight بالوحدات mm) أكبر من الصندوق على اليسار.

نافذة الرؤية (ViewBox)

يمكنك تعريف معنى الأنماط الموجودة داخل علامة <svg> بدون وحدات. يمكنك استخدام خاصية viewBox للقيام بذلك. إليك مثالًا:

<svg　width="500"　height="200"　viewBox="0　0　50　20"　>
　　　　<rect　x="20"　y="10"　width="10"　height="5"
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

يُنشئ هذا المثال عنصرًا <svg> ذو عرض 500 بكسل وارتفاع 200 بكسل. يحتوي خاصية viewBox للـ <svg> على أربعة إحداثيات. تعرف هذه الإحداثيات النافذة المرئية (ViewBox) للعنصر <svg>. الإحداثيات هي x y عرض عرض النافذة المرئية (ViewBox).

في هذه الحالة، تبدأ النافذة المرئية (ViewBox) من 0,0 وعرض 50 وارتفاع 20. أي أن العنصر <svg> ذو عرض 500 بكسل وارتفاع 200 بكسل يستخدم نظام الإحداثيات من 0,0 إلى 50,20. بمعنى آخر، كل وحدة من الإحداثيات للشكل الداخلي في <svg> تُساوي 10 بكسل في العرض (500/50 = 10 بكسل)، والارتفاع (200/20 = 10 بكسل). هذا هو السبب في أن المربع الذي يكون موقع x له 20، وموقع y له 10 يقع فعليًا في 200,100، وأن عرضه (10) وارتفاعه (5) يتوافقان مع 100 بكسل و50 بكسل على التوالي.

يمكن أيضًا تفسير ذلك بأن الإحداثيات الأولى في خاصية viewBox للـ <svg> تعرف الإحداثيات العليا اليسرى للإحداثيات المستخدمة، والإحداثيات الثانية تعرف الإحداثيات السفلية اليمنى. المساحة داخل <svg> تُفسّر من الإحداثيات العليا اليسرى للنافذة المرئية (ViewBox) إلى الإحداثيات السفلية اليمنى.

تأثير الصورة بعد التنفيذ:

لاحظ كيف يتم تفسير جميع الإحداثيات داخل عناصر <rect> كوحدة واحدة من عشرة بكسلات.

الحفاظ على نسبة العرض إلى الارتفاع

إذا كانت نسبة العرض إلى الارتفاع (القيمة القصوى إلى القيمة الدنيا) لمساحة العرض (Viewport) و النافذة المرئية (ViewBox) مختلفة، فإنه يجب تحديد كيفية عرض الصورة SVG (مثل المتصفح) للصورة SVG. يمكنك استخدام خاصية preserveAspectRatio للقيام بذلك <svg<.

يستخدم خاصية preserveAspectRatio بيانين منفصلين بفواصل فرقعة. يخبر البيان الأول كيف يتم تزامن النافذة المرئية (ViewBox) داخل مساحة العرض (Viewport). يتم إنشاء هذا البيان نفسه من جزأين. يحدد البيان الثاني كيف يتم الحفاظ على نسبة العرض إلى الارتفاع (إذا كانت موجودة).

القيمة الأولى التي يتم تحديد طريقة التزامن بها تتكون من جزأين. الجزء الأول يحدد طريقة التزامن لأكسيس، والجزء الثاني يحدد طريقة التزامن لأي.

من خلال إضافة جزء y بعد جزء x، يمكن دمج جزء x وجزء y في قيمة واحدة. إليك مثالين:

xMaxYMax
xMidYMid

هذه الأمثلة تجعل نطاق العرض (ViewBox) يتطابق مع نطاق العرض (Viewport) بطريقة مختلفة. في المثال الأول، يتم ضبط حافة اليمين للنطاق (ViewBox) مع حافة اليمين لنطاق العرض (Viewport). في المثال الثاني، يتم ضبط منتصف النطاق (ViewBox) مع منتصف نطاق العرض (Viewport).

جزء الثاني من قيمة preserveAspectRatio يمكن أن يكون من ثلاثة أقسام مختلفة:

جزء الثاني من قيمة preserveAspectRatio يتم إضافته إلى الجزء الأول، وتم فصلها بفاصلة. إليك مثالين:

preserveAspectRatio="xMidYMid　meet"
preserveAspectRatio="xMinYMin　slice"

لم أتحدث بعد عن تأثيرات إعدادات preserveAspectRatio المختلفة، لذا دعونا نلقي نظرة.

كل الأمثلة التالية تقوم بتعيين width إلى 500، وتعيين height إلى 75، وتعيين خاصية viewBox إلى 0 0 250 75. هذا يعني أن كل وحدة إحداثيات على طول المحور x ستتطابق مع 2 بكسل، ولكن على طول المحور y، ستتطابق كل وحدة إحداثيات مع بكسل واحد فقط. كما ترون، نسبة العرض إلى الارتفاع على طول المحور x هي 500/250 = 2، ونسبة العرض إلى الارتفاع على طول المحور y هي 75/75 = 1. هذا قد يؤدي إلى تشوه الصورة، ولكن سنرى في الأمثلة التالية كيفية التعامل مع هذه الإعدادات المختلفة من preserveAspectRatio.

هذا مثال أولي لـ preserveAspectRatio مع xMinYMin meet. هذا يمكن أن يضمن الحفاظ على نسبة العرض إلى الارتفاع، وتعديل حجم نطاق العرض (ViewBox) لتناسب نطاق العرض (Viewport). أي، يتم تقليل حجم نطاق العرض (ViewBox) بناءً على الأقل من نسبتي العرض إلى الارتفاع (نسبة y هي 1). بسبب جزء xMinYMin، سيكون نطاق العرض (ViewBox) في الزاوية العلوية اليسرى من نطاق العرض (Viewport). هذا هو الكود والصورة المولدة:

<svg　width="500"　height="75"　viewBox="0　0　250　75"　preserveAspectRatio="xMinYMin　meet"
　　　　　style="border:　1px　solid　#cccccc;">
　　　　<rect　x="1"　y="1"　width="50"　height="50"
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

في المثال الثاني، تم تعيين preserveAspectRatio إلى xMinYMin slice. هذا يمكن أن يحافظ على نسبة الأبعاد، ولكن سيقوم بتكبير نطاق العرض (ViewBox) بناءً على النسبة الأكبر (نسبة المحور x 2)، مما يؤدي إلى كبر الصورة حتى لا يمكن وضعها في نطاق العرض (Viewport). تُسمى هذه الصورة "قطعة".

<svg　width="500"　height="75"　viewBox="0　0　250　75"　preserveAspectRatio="xMinYMin　slice"
　　　　　style="border:　1px　solid　#cccccc;">
　　　　<rect　x="1"　y="1"　width="50"　height="50"
　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

إعداد preserveAspectRatio في المثال الثالث هو none. هذا يعني أن نطاق العرض (ViewBox) سيملأ نطاق العرض (Viewport) بالكامل، مما يؤدي إلى تشوه الصورة لأن نسبة الأبعاد العريضة والطولية غير متساوية في المحاور x وy.

<svg　width="500"　height="75"　viewBox="0　0　250　75"　preserveAspectRatio="none"
　　　　　　style="border:　1px　solid　#cccccc;">
　　　　　<rect　x="1"　y="1"　width="50"　height="50"
　　　　　　　　　　　style="stroke:　#000000;　fill:none;"/>
</svg>

توجيه نطاق العرض (ViewBox)

حتى الآن جميع الأمثلة التي تم عرضها قد استخدمت إعداد xMinYMin هذا. يمكنك استخدام إعدادات أخرى بناءً على كيفية رغبتك في توجيه العرض في نطاق العرض (Viewport). سأقوم بالتعرف بشكل أعمق على كيفية عمل هذه الإعدادات، لكن دعونا أولاً نرى مثالاً:

<svg　width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMinYMin　meet"　　　　
style="border:　1px　solid　#cccccc;">　　　　
<circle　cx="25"　cy="25"　r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>　　　　
<svg　width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMidYMin　meet"　　　　
style="border:　1px　solid　#cccccc;">　　　　
<circle　cx="25"　cy="25"　r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>　　　　
<svg　width="500"　height="100"　viewBox="0　0　50　50"　　　　
preserveAspectRatio="xMaxYMin　meet"　　　　
style="border:　1px　solid　#cccccc;">　　　　
<circle　cx="25"　cy="25"　r="25"　　　　
style="stroke:　#000000;　fill:none;"/>　　　　
</svg>

في هذا المثال، يتم عرض <svg> مع عناصر width500 وheight100. يتم تعيين viewBox إلى 0 0 50 50. هذا سيتسبب في نسبة الطول إلى العرض على المحور x 500/50 = 10، ونسبة الطول إلى العرض على المحور y 100/50 = 2. يتم تعيين قطر الدائرة في الصورة إلى 25، مما يجعله واسع 50 درجة، ويبلغ الطول 50 وحدة. لذا، سيملأ كامل العرض (ViewBox) (بدلاً من عرض (Viewport)).

عند استخدام رمز meet، سيتم تقييد العرض (ViewBox) بناءً على المحور y لأن نسبة الطول إلى العرض أقل. هذا يعني أن العرض (ViewBox) سيملأ على طول المحور y (عموديًا) الطول الكامل للعرض (Viewport)، ولكن فقط على طول المحور x (أفقياً) 2 * 50 بكسل = 100 بكسل (نسبة الطول إلى العرض * حجم العرض (ViewBox) X). لأن عرض (Viewport) واسع 500 بكسل، يجب تحديد كيفية التثبيت الأفقي للعرض (ViewBox) داخل عرض (Viewport). يتم القيام بذلك باستخدام xMin، xMid وxMax في جزء first من خاصية preserveAspectRatio.

هناك ثلاثة صور تمثل استخدام xMinYMin meet، xMidYmin meet وxMaxYmin meet في خاصية preserveAspectRatio. انظر كيف يرتبها العرض (Viewport) مع اليسار، الوسط واليمين ( اعتمادًا على الإعداد).

بالمثل، إذا كان نسبة الطول إلى العرض للصورة على طول المحور x أقل من المحور y، فيجب تحديد التثبيت على المحور y.

هذا هو المثال السابق، ولكن الآن مع width100 وheight200:

حجم العرض (ViewBox) متساوي، لذا فإن نسبة الطول إلى العرض على طول المحور y (200/50 = 4) أكبر من نسبة الطول إلى العرض على طول المحور x (100/50 = 2). لذا، سيملأ العرض (ViewBox) على طول المحور x بدلاً من المحور y. هذا يتطلب تحديد التثبيت على المحور y للعرض (ViewBox).

<svg width="100" height="200" viewBox="0 0 50 50" preserveAspectRatio="xMinYMin meet" style="border: 1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewBox="0 0 50 50" preserveAspectRatio="xMinYMid meet" style="border: 1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>
<svg width="100" height="200" viewbox="0 0 50 50" preserveaspectratio="xMinYMax meet" style="border: 1px solid #cccccc;">
　　　　<circle cx="25" cy="25" r="25" style="stroke: #000000; fill:none;"></circle>
</svg>

هذه ثلاثة صور، كل صورة تظهر إمكانية يمنية واحدة لقيمة الفرعية باستخدام YMin، YMid و YMax: