دليل تصميم مواقع الويب باستخدام مربع العرض "SVG" (HTML)
مربع العرض هو سمة شائعة الاستخدام عند إنشاء أشكال SVG . إذا كنت تفكر في المستند على هيئة لوحة رسم ، فإن مربع العرض هو جزء من اللوحة التي تريد أن يشاهدها المشاهد. على الرغم من أن الصفحة قد تغطي شاشة الكمبيوتر بالكامل ، إلا أن الشكل قد يكون موجودًا فقط في ثلث الكل.
يسمح لك Viewbox بإخبار المحلل اللغوي بتكبير هذا الثلث. إنه يزيل المساحة البيضاء الإضافية. فكر في مربع العرض كنهج افتراضي لاقتصاص إحدى الصور.
بدونه ، سيظهر الرسم الخاص بك ثلث حجمه الفعلي.
قيم العرض
لاقتصاص صورة ، يجب إنشاء نقاط على الصورة لإجراء عمليات القطع. وينطبق الشيء نفسه عند استخدام سمة مربع العرض. تتضمن إعدادات القيمة لصندوق العرض ما يلي:
- minx —the start x coordinate
- miny - بداية y التنسيق
- عرض —عرض مربع العرض
- الارتفاع - ارتفاع مربع العرض
قيم بناء الجملة لمربع العرض هي:
viewBox = "0 0 200 150"
لا تخلط بين عرض وارتفاع مربع العرض مع العرض والارتفاع اللذين قمت بتعيينهما لمستند SVG . عندما تقوم بإنشاء ملف SVG ، فإن إحدى القيم الأولى التي تحددها هي عرض المستند وارتفاعه. الوثيقة هي قماش. يمكن لمربع العرض تغطية اللوحة بأكملها أو جزء منها فقط.
يغطي مربع العرض هذا الصفحة بأكملها.
يشمل مربع العرض هذا نصف الصفحة التي تبدأ بالركن العلوي الأيسر.
يحتوي الشكل أيضًا على تعيينات ارتفاع وعرض.
وهو مستند يغطي 800 × 400 بكسل مع مربع عرض يبدأ في الزاوية العلوية اليسرى ويوسع نصف الصفحة. الشكل عبارة عن مستطيل يبدأ بالركن الأيمن العلوي من مربع العرض وينقل 100 بكسل إلى اليسار و 50 بكسل لأسفل.
لماذا يتم تعيين Viewbox؟
يفيد SVG أكثر من مجرد رسم شكل. يمكن إنشاء رقم واحد فوق آخر للتأثير الظل. يمكنه تحويل شكل بحيث يميل في اتجاه واحد. بالنسبة إلى الفلاتر المتقدمة ، ستحتاج إلى فهم سمة مربع العرض واستخدامها.