الإحداثيات السلبية في SVGs

إذا كنت تقوم بإنشاء صورة SVG ، فقد تتساءل عما إذا كان يمكنك استخدام الإحداثيات السلبية. الإجابة المختصرة هي نعم ، يمكنك وضع إحداثيات سالبة في ملف SVG . ومع ذلك ، هناك بعض الأشياء التي يجب وضعها في الاعتبار عند استخدام الإحداثيات السالبة. أولاً ، يمكن أن تسبب الإحداثيات السلبية مشاكل عند عرض الصورة في بعض المتصفحات. بالإضافة إلى ذلك ، لا يمكن عرض بعض عناصر SVG ، مثل العنصر ، بشكل صحيح إذا كانت لها إحداثيات سالبة. على الرغم من هذه المشكلات المحتملة ، يمكن أن يكون استخدام الإحداثيات السلبية مفيدًا في مواقف معينة. على سبيل المثال ، إذا كنت تقوم بإنشاء صورة سيتم استخدامها كخلفية ، فقد ترغب في استخدام الإحداثيات السلبية لوضع الصورة بشكل صحيح. عند استخدام الإحداثيات السلبية ، من المهم اختبار الصورة في متصفحات مختلفة للتأكد من عرضها بشكل صحيح. بقليل من العناية ، يمكنك إنشاء صور SVG تستخدم الإحداثيات السلبية دون أي مشاكل.

كيف تعمل إحداثيات Svg؟

يتم تمثيل جميع العناصر في SVG بنفس نظام الإحداثيات أو الشبكة مثل تلك الموجودة في قماش الرسم (والعديد من إجراءات رسم الكمبيوتر الأخرى). تعتبر الزاوية العلوية اليسرى من المستند النقطة (0،0) ، مما يعني أنها بداية شيء ما.

(الجزء 1) - مقدمة لأنظمة إحداثيات SVG والتحول. تعد Views و viewBox و saveAspectRatio مجرد عدد قليل من الخصائص. هذا هو الجزء الأول من سلسلة من ثلاثة أجزاء حول أنظمة الإحداثيات والتحولات في SVG. من أجل تصور المفاهيم والتفسيرات في المقالة ، قمت بعمل عرض توضيحي تفاعلي. يتم تعيين حجم منفذ العرض باستخدام سمات العرض والارتفاع على الغلاف الخارجي للعنصر. في sva ، يمكن تعيين القيمة باستخدام إما معرّف الوحدة أو معرّف القيمة نفسها. يمكن استخدام القيمة لمقارنة وحدة تم تحديدها في وحدات المستخدم بنفس عدد الوحدات التي تم تحديدها فيها.

يتم استخدام نظام إحداثيات ViewBox لرسم الرسومات على اللوحة القماشية. قد يكون نظام الإحداثيات هذا أصغر أو أكبر من منفذ العرض. يمكن استخدام سمة العرض لتحديد نظام إحداثيات المستخدم الخاص بك. يمكن أيضًا إنشاء مساحة مستخدم جديدة باستخدام تحويلات (على سبيل المثال ، نظام إحداثيات حالي). عند النقر فوق Viewbox = "0 0400300 ، يتم إنشاء لوحة قماشية بحجم أصغر. أفضل طريقة لمعرفة مربع العرض هو تصورها بنفس الطريقة التي تعمل بها خرائط Google. في هذه الحالة ، يتم تعيين 200 وحدة مستخدم إلى 800 وحدة منفذ عرض ، بينما يتم تعيين نظام إحداثيات المستخدم إلى نظام إحداثيات منفذ العرض.

نتيجة لذلك ، يتم إنشاء تأثير تكبير مشابه للتأثير الموضح في الصورة أعلاه. عند استخدام viewBox = "100100200150 ، يتم استخدامه أيضًا كمحصول. يتم اقتصاص الرسم وتحجيمه لملء منطقة منفذ العرض بأكملها بالألوان. ستعمل السمة viewBox على تعيين مستطيل في مساحة المستخدم إلى حدود منطقة معينة (يشار إليها غالبًا باسم منفذ العرض) في مساحة المستخدم تلقائيًا. الجانب الذي تم اقتصاصه من الرسم هو ببساطة عدد الإطارات التي تم قياسها لتناسب إطار العرض. توفر المواصفات تحويلًا للترجمة ، والذي يحول الصورة إلى رسم مكون من 100 وحدة ، بالإضافة إلى تحويلات المحاصيل والقياس. تتضمن هذه الفئة مربع عرض بعرض وارتفاع أكبر من عرض منفذ العرض وارتفاعه.

سيتم شرح نسبة أبعاد مختلفة في القسم التالي. في نظام إحداثيات المستخدم ، تمثل كل وحدة عرض منفذ العرض وعرض مربع العرض عموديًا. يتم تعيين وحدة y لكل مستخدم على 0.66 في منفذ العرض. ViewBox = نتيجة استخدامه. كما ذكرنا سابقًا ، يشير "0" إلى الصفر في مثالنا. هذا هو السلوك الذي سنستخدمه طوال مدة التطبيق. ما هو التحكم في السلوك؟

نظرًا لخاصية saveAspectRatio ، يمكنك زيادة قياس مربع العرض مع الحفاظ على نسبة العرض إلى الارتفاع للرسم. يمكن استخدامه على أي عنصر (انظر الأجزاء التالية لمزيد من المعلومات حول إطارات العرض). يتم تمثيل أبعاد صندوق الببغاء بالقيمة 0 0200300 في صندوق العرض. سيبدو الأمر كذلك إذا كان المتصفح قادرًا على تمديد الرسم لملء إطار العرض بالكامل. إذا حددت أن مربع العرض بالكامل يجب ألا يكون مرئيًا من منفذ العرض ، فسيتم استخدام طريقة MeetOrSlice. تشبه هذه القيمة قيمة الحجم المضمنة في غلاف الصورة وقيمة الحجم المضمنة في صورة الخلفية. سيتم تقليل نسبة العرض إلى الارتفاع في viewBox إذا لم تتطابق مع نسبة العرض إلى الارتفاع.

يتم استخدام واحدة من تسع قيم ، أو قيمة لا شيء ، لمحاذاة المعلمة. يتم الحفاظ على نسبة العرض إلى الارتفاع للصورة عن طريق تغيير حجمها بشكل موحد مع عدم وجود قيم أخرى غير الصفر. نتيجة لذلك ، في كلتا الحالتين ، يتم تغيير حجم الرسم لمحاذاة المحاور الوسطى لإطار العرض بحيث تتوافق محاوره الوسطى مع المحاور الوسطى لإطار العرض. القيمة الافتراضية للمحاذاة هي xMidYMid ، مما يعني أنه تم تغيير حجم الرسم لمحاذاة محاوره الوسطى. تشير قيم min-x و max-x و mid-y إلى محاذاة المربع المحيط بالعنصر مع منفذ العرض الخاص به. إذا لزم الأمر ، قم بقياس المحتوى الرسومي لعنصر عنصر معين بشكل متناسب (بدون تقليل نسبة العرض إلى الارتفاع). بمعنى آخر ، يتم تمديد viewBox أو تقليصه ليلائم إطار العرض بحيث يتم تجاهل نسبة العرض إلى الارتفاع.

تتيح لك السمة saveRatioAspect تحديد ما إذا كان سيتم قياس مربع العرض بشكل موحد أم لا وكيفية محاذاته داخل إطار العرض. من السهل معرفة سبب وجود قيم محاذاة مختلفة لبعض المحاذاة في viewBox = 0200300 السابقة. نتيجة لذلك ، ستختلف أيضًا قيم مربع العرض 200 × 300 التي نستخدمها هنا اختلافًا كبيرًا. في العرض التوضيحي التفاعلي ، أوضحت كيفية تغيير قيم هذه السمات ورأيت النتائج. الصورة أدناه تصور تأثير viewBox = في مربع العرض. يمكنك تحديد محاور المحاذاة بالإحداثيات 100 0200300.

تحجيم منفذ العرض في Svg

يحتوي منفذ العرض على رقمين: min-x ، مما يدل على الموضع الموجود في أقصى اليسار ؛ و min-y ، مما يدل على أعلى موضع. نظرًا لأن آخر رقمين ، العرض والارتفاع ، يحددان عرض إطار العرض وارتفاعه ، يمكن تحديد مساحة المستخدم.

ما هو Viewbox في Svg؟

يحدد viewBox في SVG نظام الإحداثيات الذي يتم من خلاله رسم عناصر الرسوم. يمكن اعتباره بمثابة نافذة على "قماش" صورة SVG. تعد سمة viewBox مفيدة جدًا إذا كنت تريد الحصول على صورة SVG سريعة الاستجابة.

يمكن أن تملأ SVGs أي حاوية تريدها ، كما هو موضح أدناه: يمكننا ملء أي حاوية نريد باستخدام SVGs الخاصة بنا باستخدام هذه التقنية. عند العرض بشكل صحيح ، سيتم تغيير حجم مربع العرض في هذه الصورة إلى أبعاد الحاوية. عندما نشاهد صورة في viewBox ، يمكننا أيضًا إخفاء جانب منها مفيد جدًا في الرسوم المتحركة. يتيح لنا viewBox اقتصاص صورنا بطريقة فعالة للغاية. في هذا الفيديو ، سنوضح لك كيفية استخدامه لتحريك سحابة تتحرك عبر السماء. إن أبسط طريقة لتحريك هذا هو تغيير قيمة min-x الخاصة بـ viewBox. تم حذف PreserveRatioAspect من هذه المقالة لأنه قد يكون ساحقًا.

هل يمكنك عش Svgs؟

نعم ، يمكنك تداخل SVGs. هذا يعني أنه يمكنك وضع SVG واحدًا داخل SVG آخر. يمكن أن يكون هذا مفيدًا إذا كنت تريد إعادة استخدام رسم معين أو إذا كنت تريد إنشاء رسم أكثر تعقيدًا.

عنصر Defs في Svg

يعمل عنصر defs> كمخزن مؤقت لأي كائنات رسومية سيتم الرجوع إليها لاحقًا في المستند في SVG. ومع ذلك ، لا يوجد عرض مباشر لهذه الكائنات ، ولكن يجب الرجوع إليها باستخدام عنصر> use.

كيف يمكنك قياس Svgs؟

هناك عدة طرق مختلفة لتوسيع نطاق SVG. إحدى الطرق هي تغيير سمة viewBox. تحدد السمة viewBox نظام الإحداثيات لمحتويات SVG. من خلال تغيير سمة viewBox ، يمكنك تغيير حجم SVG. هناك طريقة أخرى لتوسيع نطاق SVG وهي استخدام سمة التحويل. تسمح لك سمة التحويل بتطبيق تحويل على عنصر. يمكنك استخدام سمة التحويل لقياس SVG.

الخطوة الأولى هي فهم كيفية توسيع نطاق Vector Graphics (SVG). تشارك Amelia Bellamy-Royds نظرة ثاقبة لا تصدق حول توسيع نطاق SVG. هذا ليس بسيطًا مثل تحجيم الرسومات النقطية ، ولكنه يوفر عددًا كبيرًا من الاحتمالات المثيرة للاهتمام. قد يكون من الصعب على مستخدمي SVG الجدد فهم كيف يجب أن يتصرف البرنامج بالطريقة المطلوبة. يتم تعريف نسبة العرض إلى الارتفاع لصورة المنظور على أنها نسبة عرضها إلى ارتفاعها. من الممكن إجبار المتصفح على رسم صورة نقطية بحجم مختلف عن الارتفاع والعرض الجوهريين ، ولكن هذا يؤدي إلى تشويه. يتم رسم SVGs المضمنة وفقًا لحجم الكود ، بغض النظر عن حجم قماش الرسم.

ViewBox هو المكون الأخير الذي سيتم استخدامه لإنشاء Scalable Vector Graphics. ViewBox هي سمة عنصر في العنصر. تتكون القيمة من أربعة أرقام مفصولة بمسافة أو فاصلات: x و y والعرض والارتفاع. يتم تحديد النظام الإحداثي للزاوية اليسرى العلوية من منفذ العرض بواسطة عاملي x و y. لملء الارتفاع المطلوب ، يجب تحجيم عدد من psc والإحداثيات. عندما تقوم بإنشاء صورة كبيرة ، فإن الأبعاد التي لا تتوافق مع نسبة العرض إلى الارتفاع الخاصة بها لن يتم تمديدها أو تشويهها. يمكنك استخدام خاصية CSS الجديدة لتناسب الكائنات لتحريك أنواع الصور الأخرى أيضًا.

بالإضافة إلى السماح للرسومات الخاصة بك بالتحجيم تمامًا كصورة نقطية ، يمكنك الحفاظ على SpectRatio = لا شيء. تحتوي الصور النقطية على مجموعة من المقاييس التي يمكن ضبطها من أجل تحقيق ارتفاع أو عرض معين. ما هي أفضل طريقة لاستخدام sva للقيام بذلك؟ هناك العديد من التحديات. في هذه الحالة ، يعد استخدام التحجيم التلقائي للصورة مع صورة في andlt ؛ img> مكانًا جيدًا للبدء ، ولكن ستحتاج إلى اختراقها قليلاً لجعلها تعمل. لتعيين نسبة العرض إلى الارتفاع لعنصر ما ، استخدم مجموعة متنوعة من خصائص CSS ، بما في ذلك الارتفاع والهامش. سيتم دائمًا تمكين viewBox في المتصفحات الأخرى ؛ ومع ذلك ، لم يتم تحديد هذا السلوك في المواصفات.

إذا كنت تستخدم أحدث متصفح Firefox / Blink ، فستبدو صورتك رائعة داخل viewBox. إذا لم تحدد كلاً من الطول والعرض ، فستعرض هذه المتصفحات أحجامها الافتراضية كالمعتاد. بالنسبة إلى SVG المضمن ، بالإضافة إلى العناصر المستبدلة مثل <object> والعناصر الأخرى ، من الأسهل استخدام عنصر الحاوية. في الرسم المضمن ، سيكون الارتفاع الرسمي صفرًا (على الأقل ، صفر في هذه الحالة). ستؤدي القيمة ConserveRatioAspect إلى تقليل الرسم إلى لا شيء. بمعنى آخر ، تريد أن يمتد الرسم ليغطي العرض الكامل الذي قدمته ، ثم يمتد إلى منطقة الحشو بنسبة العرض إلى الارتفاع المناسبة. تعد سمات ViewBox و saveRatioAspect قابلة للتكيف بشكل كبير. يمكن استخدام العنصر المتداخل ، الذي يمكن أن يكون له سمات القياس الخاصة به ، لتعيين أجزاء مختلفة من مقياس الرسم الخاص بك إلى نفس العنصر. إذا كنت تستخدم هذه الطريقة ، فيمكن تمديد رسم الرأس ليغطي شاشة عريضة دون الشعور بالضيق أو في مكانه.

Svg إلى الإحداثيات

ملف SVG هو ملف رسومات يستخدم تنسيق رسوم متجه ثنائي الأبعاد تم إنشاؤه بواسطة World Wide Web Consortium (W3C). ملفات SVG هي ملفات نصية بها مجموعة من علامات XML التي تصف الصورة. يمكن قراءة علامات XML بواسطة محرري النصوص ومتصفحات الويب. تتمثل ميزة استخدام ملفات SVG في أنه يمكن تغيير حجمها إلى أي حجم دون فقدان الجودة.

يمكنك استخدام SVGs لمجموعة متنوعة من الوظائف حتى يمكنك مزج تفاعلات DOM والمتجه. بنفس الطريقة التي يتم بها تسلسل العناصر الأخرى في DOM ، يمكن معالجة HTML بإدراج SVGs. إذا تم وضع عناصر DOM لأحد العناصر أعلى عنصر ، فقد يكون من الضروري تراكب عناصر DOM. يمكنك تحديد الموقع المطلق للصفحة عن طريق سحب window.scrollX إلى اليسار والنافذة. إلى أعلى الصفحة ، قم بالتمرير Y إلى الأعلى. يوفر كائن معالج الحدث إحداثيات DOM.clientX و. clientY بكسل ، ولكن يجب ترجمتها إلى SVGs. تجدر الإشارة إلى أن الشبكات القائمة على المتجهات توفر آلية تحليل المصفوفة الخاصة بها لترجمة الإحداثيات.

يمكن استخدام طريقة getScreenCTM () لتطبيقها على أي عنصر بالإضافة إلى SVG. تستلزم العملية ترجمة الإحداثيات الناتجة وقياسها وتدويرها و / أو تحريفها. نتيجة لذلك ، تكون إحداثيات الطبقة التالية ربع تلك الخاصة بالطبقة السابقة لأنها أكبر أربع مرات من وحدات SVG القياسية .

كيف يمكنني توسيط مسار في Svg؟

عندما يكون المسار في المنتصف ، يمكن تغيير سمة svg viewBox . في هذه الحالة ، لا تحتاج إلى تحويل أي من مسارات svg إلى خصائصها. إن إزاحة y هي نفسها في إجابة Paul على viewBox = 0 15.674 144144 ، في مثالك.

ما هو Svg Viewport؟

منفذ العرض هو المكان الذي تظهر فيه صورة SVG في العارض. من الممكن نظريًا إنشاء صورة SVG بالعرض أو الارتفاع الذي تريده ، ولكن قد يكون جزء واحد فقط من الصورة مرئيًا في كل مرة. منفذ العرض هو مجال الاهتمام المرئي. يمكن تحديد حجم منفذ العرض باستخدام سمات عرض العنصر وارتفاعه.