تقدم هذه المقالة بشكل أساسي استخدام سمات ViewBox عند استخدام صور SVG في HTML5 ، بما في ذلك بعض المحتوى المتعلق بالتصميم. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها لفهم معلمات ViewBox بسرعة
يتم استخدام سمة ViewBox لتحديد أصل وحجم نظام الإحداثيات لصورة المستخدم SVG. تتم جميع المحتوى المرسوم في SVG بالنسبة لنظام الإحداثيات هذا. نظرًا لأن قماش SVG تم تمديده بلا حدود في جميع الاتجاهات ، يمكنك حتى رسم الرسومات خارج حدود نظام الإحداثيات هذا ؛ ولكن يمكن أيضًا التحكم في هذه الرسومات التي يتم وضعها نسبة إلى نافذة SVG بواسطة موضع نظام إحداثيات المستخدم.
تستخدم خاصية ViewBox أربع معلمات لتحديد موقع أصل نظام الإحداثيات وحجمه: ارتفاع عرض XY. في الحالة الأولية ، يكون نظام الإحداثيات هذا مكافئًا لنظام إحداثيات النافذة المهيئة (يحدده عرض وارتفاع صورة SVG) ، وأصله في (0 ، 0) - أي الزاوية اليسرى العليا من SVG.
عن طريق تغيير قيم المعلمتين x و y ، يمكن ضبط موضع الأصل. تغيير قيم العرض والارتفاع لتغيير حجم نظام الإحداثيات. ما عليك سوى استخدام سمة ViewBox لمساعدتك في توسيع أو قص قماش SVG. اقرأ مع المثال.
هام: في هذه المقالة ، لن أقوم بتغيير السلوك الافتراضي (المقياس وموقف) مربع العرض داخل نافذة SVG. لأنه ، وفقًا للسلوك الافتراضي للسمة ، سيتم تضمين محتوى مربع العرض بالكامل في النافذة قدر الإمكان ثم وضعه في المركز. ومع ذلك ، يتيح لك استخدام خاصية ProserveaserRatio تغيير حجم وموضع Viewbox بحرية ، ولكن في هذه المقالة ، هذه ليست تقنية ضرورية ، لذلك لن نشرح ذلك بتعمق هنا أيضًا.
استخدم ViewBox لمحصول SVG ، أي استخدام سمة ViewBox لإنشاء SVG من الاتجاه الفني
منذ فترة ، طلب أحد موكلي تعيين Avatar SVG لموقعه على أحجام مختلفة وفقًا لأحجام الشاشة المختلفة ، بحيث يكون جزءًا صغيرًا منه مرئيًا على شاشة صغيرة ، ويمكن رؤية جزء أكبر على حجم شاشة متوسط ، ثم يمكن رؤية المحتوى الكامل على شاشة كبيرة. كانت الفكرة الأولى التي تتبادر إلى ذهني في ذلك الوقت هي أن متطلباته هي استخدام سمة مربع العرض لاقتصاص صورة SVG ، ثم عرض جزء معين من الصورة التي أراد رؤيتها بناءً على أحجام شاشة مختلفة.
من خلال تغيير حجم وأصل نظام إحداثيات SVG ، يمكننا قصف SVG وعرض جزء من المحتوى الذي نريد عرضه في النافذة.
دعونا نرى كيفية تنفيذها.
لنفترض أن لدينا صورة SVG الكاملة هذه على النحو التالي ، ثم نريد أن ننص على حجم شاشة صغيرة. هذه الصورة عبارة عن متجه منزلي مجاني للاستخدام صممه Freepik ، وهو مرخص له بموجب اتفاقية Creative Commons Attribution 3.0. من أجل البساطة ، دعنا نفترض أولاً أن الصورة تدور حول ما يجب اقتصاصه لعرضه على الشاشات الصغيرة والمتوسطة ، والمحتوى الكامل المعروض على الشاشة الكبيرة ، كما هو موضح أدناه.
الصورة الموجودة على اليسار هي الصورة الكاملة التي سنقوم بها باستخدام خاصية ViewBox ، والصورة الموجودة على اليمين هي المنطقة التي نريد عرضها على الشاشة الصغيرة.
الآن ، قم بتقديم SVG عن طريق تغيير قيمة خاصية ViewBox. هناك بعض الأشياء التي يجب مراعاتها ، سنتحدث عنها لاحقًا. لكن أولاً ، نحتاج إلى تغيير نظام الإحداثيات لمطابقة محتوى منطقة مستطيل الصندوق الظاهري في الصورة أعلاه. ، عن طريق ضبط أصل النظام وقيم العرض والارتفاع ، يمكننا تغيير قيمة المعلمة الأولية 0 0 800 800.
ولكن كيف نعرف الإحداثيات الجديدة والأبعاد الجديدة؟ النقطة هي عدم المرور من خلال الكثير من التجارب والأخطاء المتكررة.
هناك عدة طرق. نظرًا لأننا موجودون بالفعل في محرر الرسومات (المثال الخاص بي يستخدم الذكاء الاصطناعي) ، يمكننا استخدام لوحة المحرر للحصول على الموضع وأبعاد العناصر.
أرسم هذا المربع المستطيل المنقط ، بالإضافة إلى تمثيل ما أريد عرضه على الشاشة الصغيرة ، وهو سبب آخر هو أنه يمكننا الحصول على الموضع وأبعاد المستطيل واستخدامها كقيمة في صندوق العرض. باستخدام لوحة تحويل الذكاء الاصطناعى (في الصورة أدناه) ، حصلنا على القيم التي نحتاجها. من خلال تحديد المستطيل والنقر فوق رابط التحويل في الزاوية اليمنى العليا ، نحصل على اللوحة الموضحة في الشكل أدناه ، بما في ذلك قيم X و Y و Width و Right التي نحتاجها.
يمكن استخدام لوحة التحويل في هذا AI للحصول على موضع وحجم المستطيل المحدد.
ربما لاحظت أن القيمة أعلاه ليست عددًا صحيحًا ، لذلك نحتاج إلى تعديلها يدويًا. استنادًا إلى المعلومات أعلاه ، نقوم بتغيير قيمة ViewBox إلى 0 200 512 512.
نظرًا لأن نسبة العرض إلى الارتفاع في مربع العرض الجديد هي نفس نسبة نافذة SVG (كلاهما مربع) ، سيتم توسيع المحتوى في صندوق العرض ، وسيتم عرض المنطقة المحددة فقط في النافذة. بعد تغيير قيمة مربع العرض ، تكون النتيجة كما هو موضح في الشكل:
اقتصاص حديث SVG. فقط الموقع الذي نحدد فيه خاصية ViewBox مرئية في النافذة. تشير الحدود الزرقاء إلى نافذة SVG.
في هذه المرحلة ، هناك مشكلة يجب حلها:
ماذا لو كانت نسبة العرض إلى الارتفاع في المنطقة المزروعة (أي مربع العرض) هي نسبة العرض إلى الارتفاع في نافذة SVG؟
في هذه الحالة ، سيكون هناك تدفق كبير. الفائض الواضح ، لا أعني امتدادًا خارج حدود نافذة SVG ، ولكن في تدفق فائض بالنسبة لنظام إحداثيات المستخدم الجديد المحدد بواسطة ViewBox. يوفر الشكل التالي تفسيرات مماثلة.
إذا كانت نسبة العرض إلى الارتفاع في مربع العرض تختلف عن نسبة العرض إلى الارتفاع في مربع العرض ، فسيقوم المحتوى في SVG بتغلب نظام إحداثيات المستخدم ، وقد تكون النتيجة هكذا.
تمثل الحدود السوداء نظام إحداثيات المستخدم الجديد ، والحدود الزرقاء هي نافذة SVG.
الحدود السوداء في الصورة اليمنى أعلاه هي المنطقة المحددة بواسطة مربع العرض. وفقًا للسلوك الافتراضي لـ ViewBox في النافذة ، سيتم توسيعه وتوسيعه قدر الإمكان لضمان تضمين محتوىه في النافذة (الحدود الزرقاء).
نظرًا لأن SVG Canvas تمتد بشكل غير محدود في جميع الاتجاهات ، يمكنك رسم الرسومات خارج حدود نظام إحداثيات المستخدم ، وسيقوم المحتوى بالتدفق والتحرك بشكل مباشر ، كما هو موضح في الشكل أعلاه.
إذا قمت بتغيير نسبة العرض إلى الارتفاع في نافذة SVG (عرض وارتفاع SVG) لجعلها تتكيف مع نسبة العرض إلى الارتفاع في صندوق العرض ، فلن ترى فيضًا فائلاً لأن تكبير صندوق العرض يتم تكييفه مع النافذة ، كما في المثال السابق.
ومع ذلك ، في بعض الحالات ، قد لا ترغب أو لا ترغب في تغيير نسبة العرض إلى الارتفاع في SVG على الإطلاق. على سبيل المثال ، إذا كنت تستخدم SVG Sprite كمجموعة من الصور لعرض الصور على الصفحة. في معظم الحالات ، تحتوي الصورة على نسبة عرضية ثابتة - ولا تريد تغيير حجم الصورة ، فقط للتكيف مع محتوى صورة صغيرة بداخلها. أو ربما قمت بتضمين نظام أيقونة وتريد أن تظل جميع الرموز بنفس الحجم في نفس الوقت.
لقطع الزائد (على سبيل المثال ، يتم عرض بعض الرموز الأخرى الموجودة على العفريت في النافذة) ، يمكنك استخدام <Blippath> لخفض الفائض. يمكن أن يكون مسار القطع عنصرًا <rect> الذي يغطي منطقة صندوق العرض بأكمله ثم تطبيق هذا العنصر على الجذر SVG.
ومع ذلك ، هناك شيء آخر يجب تذكره: تأكد من أن خصائص x و y لـ <rect> تتسق مع مربع العرض ، ما لم يتم وضع Rect نسبيًا في أصل النظام الأصلي/التهيئة ، فإن محتوى SVG الذي يتم اقتصاصه غير مؤكد أيضًا.
CSS رمز نسخ المحتوى إلى الحافظة