يتم تحديد موضع نافذة SVG عمومًا بواسطة CSS ، ويتم تعيين الحجم من خلال عرض السمة وارتفاع عنصر SVG. ومع ذلك ، إذا تم تخزين SVG في كائن مضمن (مثل عنصر كائن ، أو عنصر SVG آخر) ، يتم تنسيق المستند الذي يحتوي على SVG مع CSS أو XSL ، ويمكن استخدام CSS أو قيم الحجم المحددة الأخرى لهذه الكائنات المحيطية بالفعل.
نحتاج هنا إلى التمييز بين مفاهيم Windows وأنظمة إحداثيات النوافذ وأنظمة إحداثيات المستخدم:
النافذة : تشير إلى المنطقة المستطيلة المرئية على صفحة الويب ، مع طول وعرض محدودين ، وترتبط هذه المنطقة عمومًا بحجم الكائن المحيطي. نظام إحداثيات النوافذ : نظام إحداثيات مع الأصل ، المحور السيني والمحور ص ؛ ويمتد بلا حدود في كلا الاتجاهين. بشكل افتراضي ، يكون الأصل في الركن الأيسر العلوي من النافذة ، يكون المحور السيني أفقياً إلى اليمين ، ويكون المحور ص رأسيًا إلى أسفل. يمكن تحويل النقاط في نظام الإحداثيات هذا. نظام إحداثيات المستخدم : في الأساس نظام إحداثي مع الأصل ، المحور السيني والمحور ص ؛ ويمتد بلا حدود في كلا الاتجاهين. بشكل افتراضي ، يكون الأصل في الركن الأيسر العلوي من النافذة ، يكون المحور السيني أفقياً إلى اليمين ، ويكون المحور ص رأسيًا إلى أسفل. يمكن تحويل النقاط في نظام الإحداثيات هذا.بشكل افتراضي ، يتداخل نظام إحداثيات الإحداثيات ونظام إحداثيات المستخدم ، ولكن تجدر الإشارة هنا إلى أن نظام إحداثيات النافذة ينتمي إلى العنصر الذي ينشئ النافذة. بعد تحديد نظام إحداثيات النافذة ، سيتم تحديد نغمة الإحداثيات للنافذة بأكملها. ومع ذلك ، ينتمي نظام إحداثيات المستخدم إلى كل عنصر رسومي. طالما أن الرسم لديه تنسيق التحول ، سيتم إنشاء نظام تنسيق مستخدم جديد. جميع الإحداثيات والأبعاد في هذا العنصر تستخدم نظام إحداثيات المستخدم الجديد هذا.
ببساطة: يصف نظام إحداثيات النافذة ملف تعريف الإحداثيات الأولي لجميع العناصر في النافذة ، ويصف نظام إحداثيات المستخدم ملف تعريف الإحداثيات لكل عنصر. بشكل افتراضي ، تستخدم جميع العناصر نظام إحداثيات المستخدم الافتراضي الذي يتزامن مع نظام إحداثيات النافذة.
تنسيق تحول المساحة دعنا نراجع تحويل إحداثيات مستخدم Canvas ، والتي يتم تنفيذها من خلال وظائف الترجمة والتوسيع والدوران ؛ سيعمل كل تحويل على الأرقام المرسومة لاحقًا ، ما لم يتم إجراء التحول مرة أخرى ، وهو مفهوم نظام إحداثيات المستخدم الحالي. القماش لديه نظام إحداثيات مستخدم واحد فقط.في SVG ، يكون الوضع مختلفًا تمامًا. كعنصر رسم بياني متجه ، يمكن اعتبار SVG نفسها بشكل أساسي أنظمة إحداثيات المستخدم ؛ يمكن تحويل كل من المساحات الإحداثي لـ SVG: تحويل مساحة النافذة وتحويل مساحة المستخدم. يتم التحكم في تحويل مساحة النافذة بواسطة مربع عرض الخاصية للعناصر ذات الصلة (هذه العناصر تنشئ نوافذ جديدة) ؛ يتم التحكم في تحويل مساحة المستخدم بواسطة سمة التحويل لعنصر الرسم البياني. يتم تطبيق تحويل مساحة النافذة على النافذة بأكملها المقابلة ، ويتم تطبيق تحويل مساحة المستخدم على العنصر الحالي وعناصره الفرعية.
تحويل النافذة - خاصية ViewBoxجميع العناصر التي يمكن أن تنشئ نافذة (انظر القسم التالي) ، بالإضافة إلى العلامة والنمط والعرض ، لها سمة ViewBox.
تنسيق قيمة سمة ViewBox هو (x0 ، y0 ، u_width ، u_height) ، ويتم فصل كل قيمة بفاصلة أو مساحة. يحددون بشكل مشترك المساحة المعروضة بواسطة النافذة: يتم ضبط إحداثيات الزاوية اليسرى العلوية من النافذة على (x0 ، y0) ، ويتم ضبط عرض النافذة على U_Width ، والارتفاع u_height ؛ هذا التحول يعمل للنافذة بأكملها.
لا تخلط بين هنا: تم تحديد حجم وموضع النافذة من خلال العنصر الذي ينشئ النافذة والعناصر المحيطية (على سبيل المثال ، يتم تحديد النافذة التي تم إنشاؤها بواسطة عنصر SVG الخارجي بواسطة CSS والعرض والارتفاع). يعد ViewBox هنا في الواقع تعيين هذه المنطقة المحددة لعرض جزء من نظام إحداثيات النافذة. يتضمن إعداد ViewBox بالفعل تحولين: تكبير وترجمة مساحة النافذة.حساب التحول بسيط للغاية أيضًا: خذ نافذة العرض لعنصر SVG الخارجي كمثال ، على افتراض أن عرض وطول SVG يتم تعيينه على العرض والارتفاع ، وإعداد ViewBox هو (x0 ، y0 ، u_width ، u_height). ثم مقاييس العرض وارتفاع الشكل المرسومة هي: العرض/U_WIDTH ، الارتفاع/U_Height على التوالي. يتم تعيين إحداثيات الزاوية اليسرى العلوية من النافذة على (x0 ، y0).
تجربة الاختلافات في النتائج التي رسمتها الرموز التالية:
<svg viewbox = "0 0 200 200">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
في الشكل المرسوم في المثال أعلاه ، يمكنك رؤية المستطيلات الخضراء والأحمر. في هذه الحالة ، لا تزال النقاط في نظام إحداثيات النافذة تتوافق مع النقاط الموجودة في النافذة ، والتي هي أيضًا الافتراضي.
<svg viewbox = "0 0 100 100">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
في الشكل المرسوم في المثال أعلاه ، يمكنك رؤية المستطيل الأخضر فقط ، ويتم عرض المستطيل الأخضر على الشاشة مع 200*200 بكسل. في هذا الوقت ، لم تعد نقاط الإحداثيات واحدة تلو الأخرى ، ويتم توسيع الرقم.
<svg viewbox = "0 0 400 400">
<rect x = "0" y = "0" fill = "red" />
<rect x = "0" y = "0" fill = "green" />
</svg>
في الشكل المرسوم في المثال أعلاه ، يتم تقليل وحدات نظام إحداثيات النافذة ، لذلك يتم تقليل كلا المستطيلتين.
في العمل اليومي ، تتمثل إحدى المهام التي نحتاجها في كثير من الأحيان إلى توسيع نطاق مجموعة من الرسومات لتكييفها مع الحاوية الأم. يمكننا تحقيق ذلك عن طريق تعيين خاصية ViewBox.
العناصر التي يمكن أن تنشئ نوافذ جديدة في أي وقت ، يمكننا أن نعشش Windows. عند إنشاء نافذة جديدة ، سيتم إنشاء نظام تنسيق نافذة جديد ونظام إحداثيات المستخدم ، وبالطبع سيتم إنشاء نظام جديد ، بما في ذلك مسار القطع. فيما يلي قائمة بالعناصر التي يمكن أن تنشئ نافذة جديدة: SVG : SVG يدعم التعشيش. الرمز : قم بإنشاء نافذة جديدة عند إنشاء مثيل لها بواسطة عنصر الاستخدام. الصورة : يتم إنشاء نافذة جديدة عند الرجوع إلى عنصر SVG. OfficeObject : إنشاء نافذة جديدة لتقديم الكائن في الداخل. استمر في بعض الأحيان ، خاصة عند استخدام ViewBox ، نتوقع أن تشغل الرسومات النافذة بأكملها بدلاً من التوسع بنفس النسبة في كلا الاتجاهين. في بعض الأحيان ، نأمل أن يتم تحجيم اتجاهي الشكل على نطاق ثابت. استخدم السمة المحفوظة للسماح لتحقيق الغرض من السيطرة على هذا.هذه الخاصية هي جميع العناصر التي يمكن أن تنشئ نافذة جديدة ، بالإضافة إلى الصورة والعلامة والنمط والعرض. علاوة على ذلك ، ستعمل سمة المحافظة على المحافظة فقط بعد تعيين مربع العرض على العنصر. إذا لم يتم تعيين مربع العرض ، فسيتم تجاهل خاصية ProserveasedRatio.
بناء جملة السمة هو كما يلي: الحفاظ على profectRatio = [refer] <Lign> [<MisterorSlice>]
لاحظ أن المعلمات الثلاثة تحتاج إلى فصلها بواسطة المسافات.
تأجيل : معلمة اختيارية ، صالحة فقط لعناصر الصورة. إذا بدأت قيمة السمة المحافظة على profexpectratio في عنصر الصورة بالتأجيل ، فهذا يعني أن عنصر الصورة يستخدم نسبة التحجيم للصورة المرجعية. إذا كانت الصورة المرجعية لا تحتوي على نسبة تحجيم ، فسيتم تجاهل التأجيل. جميع العناصر الأخرى تتجاهل هذه السلسلة. المحاذاة : تحدد هذه المعلمة محاذاة التحجيم الموحد ، ويمكن أخذ القيم التالية:لا شيء - التحجيم الموحد غير المتفرج ، بحيث يمكن للرسومات ملء منفذ العرض بالكامل.
Xminymin-قوة توسيع موحدة ، ومحاذاة <min-x> و <min-y> في مربع العرض إلى الحد الأدنى لقيم x و y من منفذ العرض.
Xmidymin - قوة توحيد موحدة ، ومواءمة نقطة الوسط في اتجاه X في Vivewbox إلى نقطة منتصف اتجاه X من منفذ العرض. باختصار ، يتم محاذاة نقطة الوسط في اتجاه x ، واتجاه y هو نفسه كما هو مذكور أعلاه.
Xmaxymin - قوة توحيد موحدة ، وتوافق على <Min -X> + <didth> تعيين في مربع العرض إلى أقصى قيمة X لعملية العرض.
هناك أنواع أخرى من القيم مماثلة لـ: Xminymid ، Xmidymid ، XmaxyMid ، XminyMax ، XmidyMax ، XmaxyMax. معنى هذه المجموعات مشابهة للحالات المذكورة أعلاه.
MeetorSlice : معلمة اختيارية ، يمكنك استخدام القيم التالية:Meet - القيمة الافتراضية ، قم بتوسيع نطاق الرسومات بشكل موحد ، بحيث يتم عرض جميع الرسومات في منفذ العرض.
شريحة - التحجيم الموحد للرسومات ، مما يسمح للرسومات بملء منفذ العرض ، ويتم قطع التجاوزات.
يشرح الشكل التالي آثار الحشوات المختلفة:
تحويل نظام تنسيق المستخدم - سمة التحويل يتم تحديد هذا النوع من التحول عن طريق تعيين خاصية تحويل العنصر. تجدر الإشارة هنا إلى أن تحول العنصر الذي تحدده سمة التحويل يؤثر فقط على العنصر وعناصره الفرعية ، ولا علاقة له بالعناصر الأخرى ، ولا يؤثر على العناصر الأخرى. ترجمة - ترجمة يترجم تحويل الترجمة قيم الإحداثيات ذات الصلة إلى الموضع المحدد ، ويجب تمرير التحول إلى المبلغ المترجم على كلا المحورين. انظر مثال:<rect x = "0" y = "0" transform = "Translate (30،40)" />
يرسم هذا المثال مستطيلًا ويترجم نقطة البداية (0،0) إلى (30،40). على الرغم من أنه يمكن ضبط قيمة الإحداثيات لـ (x ، y) مباشرة ، إلا أنها مريحة للغاية لتنفيذها باستخدام تحويل الترجمة. يمكن حذف المعلمة الثانية لهذا التحول ، ويتم معالجة الافتراضي عند معالجة 0.
تدوير - تدوير يعد تدوير عنصر أيضًا مهمة شائعة جدًا. يمكننا استخدام التحول الدوراني لتنفيذه ، الأمر الذي يتطلب تمرير معلمة زاوية الدوران. انظر مثال:<rect x = "20" y = "20" transform = "rotate (45)" />
يوضح هذا المثال مستطيل دوران 45 درجة. بعض الملاحظات:
1. التحول هنا يأخذ قيمة الزاوية مثل المعلمة.
2. يشير الدوران إلى الدوران بالنسبة إلى المحور السيني.
3. يتم توسيع الدوران حول الأصل (0،0) لنظام إحداثيات المستخدم.
يميل - انحراف يدعم التحويل أيضًا تحويل الميل ، والذي يمكن أن يميل على طول المحور السيني (الزوايا اليسرى واليسرى واليسرى يميل إلى اليمين ، والذي يميل فعليًا إلى المحور ص) ، أو على طول المحور ص (لأعلى ولأسفل ، والذي يميل إلى الزاوية الهابطة ، والتي تميل فعليًا إلى المحور X). يتطلب هذا التحول تمرير معلمة زاوية ، والتي ستحدد زاوية الميل. انظر المثال التالي:<svg>
<rect x = "0" y = "0" fill = "green" />
<circle cx = "15" cy = "15" r = "15" fill = "red" />
<circle cx = "15" cy = "15" r = "15" fill = "yellow" transform = "skewx (45)" />
<rect x = "30" y = "30" />
<rect x = "30" y = "30" transform = "skewx (45)" />
<rect x = "30" y = "30" transform = "skewy (45)" />
</svg>
من النتيجة ، يمكنك رؤية موضع وشكل المستطيل من نفس الحجم بعد تحويلات ميل مختلفة. لاحظ هنا أن موضع البداية للمستطيل قد تغير ، لأنه في نظام الإحداثيات الجديد (30،30) موجود بالفعل في مواقع مختلفة.
مقياس النطاق يتم الانتهاء من كائن التحجيم عن طريق تحويل التحجيم ، الذي يقبل معلمتين ، يحدد نسب التحجيم على الأفقي والرأسي على التوالي. إذا تم حذف المعلمة الثانية ، يتم أخذ نفس قيمة المعلمة الأولى. انظر المثال التالي:<svg>
<text x = "20" y = "20" font-size = "20"> abc (scale) </text>
<text x = "50" y = "50" font-size = "20" transform = "scale (1.5)"> abc (scale) </text>
</svg>
مصفوفة تحويل - مصفوفة يعرف أي شخص درس الرسومات أن جميع التحولات ممثلة فعليًا بالمصفوفات ، وبالتالي يمكن تمثيل التحولات المذكورة أعلاه بالفعل بمصفوفة 3*3:بارِع
BDF
0 0 1
نظرًا لاستخدام 6 قيم فقط ، يتم اختصارها أيضًا على أنها [ABCDEF]. تعيين المصفوفة (A ، B ، C ، D ، E ، F) لتحويل لتنفيذ التحول المقابل. سيقوم التحول بتحويل كل من الإحداثيات والأطوال إلى أبعاد جديدة. المصفوفات المقابلة للتحولات أعلاه هي كما يلي:
تحول الترجمة [1 0 1 0 TX TY]:
1 0 TX
0 1 تاي
0 0 1
التحجيم التحويلي [SX 0 0 SY 0 0]:
SX 0 0
0 SY 0
0 0 1
التحول الدوراني [cos (a) sin (a) -sin (a) cos (a) 0 0]:
cos (a) -sin (a) 0
الخطيئة (أ) كوس (أ) 0
00 1
الميل على طول المحور السيني [1 0 تان (أ) 1 0 0]:
1 تان (أ) 0
0 1 0
0 0 1
الميل على طول المحور y [1 تان (أ) 0 1 0]:
11 0
تان (أ) 1 0
00 1
تغيير الجوهر عندما قمنا بتلخيص القماش من قبل ، عرفنا أن جميع أنواع التحولات يتم تطبيقها على نظام إحداثيات المستخدم. في SVG ، جميع التحولات هي أيضًا لنظامين إحداثيين (أنظمة إحداثيات المستخدم بشكل أساسي). بعد تحديد سمة التحويل إلى كائن الحاوية أو كائن الرسم البياني ، أو تحديد سمة مربعات العرض إلى SVG ، الرمز ، العلامة ، النمط ، العرض ، سوف يتحول SVG وفقًا لنظام إحداثيات المستخدم الحالي لإنشاء نظام إحداثيات مستخدم جديد ، والعمل على الكائن الحالي وبينها الفرعي. لم تعد وحدات الإحداثيات والطول المحدد في هذا الكائن 1: 1 المقابلة لنظام الإحداثيات المحيطية ، ولكن يتم تحويلها إلى نظام إحداثيات المستخدم الجديد أثناء تشوهه ؛ يعمل نظام تنسيق المستخدم الجديد هذا فقط على العنصر الحالي وعناصره الفرعية. سلسلة التحول تدعم خاصية التحويل تحديد تحولات متعددة. يتم فصل هذه التحولات للتو بواسطة مسافات في الوسط ووضعها معًا في العقار. تأثير التنفيذ هو نفسه إجراء هذه التحولات بشكل مستقل بالترتيب.<g transform = "ترجمة (-10 ، -20) مقياس (2) تدوير (45) ترجمة (5،10)">
<!-عناصر الرسومات تذهب هنا->
</g>
التأثير أعلاه هو نفسه ما يلي:
<g transform = "Translate (-10 ، -20)">
<g transform = "Scale (2)">
<g transform = "rotate (45)">
<g transform = "Translate (5،10)">
<!-عناصر الرسومات تذهب هنا->
</g>
</g>
</g>
</g>
وحدة أخيرًا ، دعنا نتحدث عن الوحدات. يمكن تجهيز أي إحداثيات وأطوال بوحدات وبدون. بدون وحدةتعتبر القيمة بدون وحدات تحتوي على وحدات مستخدم ، وهي قيمة الوحدة لنظام إحداثيات المستخدم الحالي.
وضع إحضار الوحداتالوحدات ذات الصلة في SVG هي نفسها كما في CSS: EM و EX و PX و PT و PC و CM و MM و IN. ٪ أيضًا للطول.
الوحدات النسبية من القياس: EM و EX تشبه أيضًا CSS ، نسبة إلى حجم الخط ووزارة X للخط الحالي.
الوحدة المطلقة للقياس: PX واحد يساوي وحدة المستخدم ، أي 5 بكسل هو نفس 5. ومع ذلك ، ما إذا كان PX يتوافق مع بكسل يعتمد على ما إذا كانت هناك بعض التحولات.
الوحدات الأخرى هي في الأساس مضاعفات px: 1pt = 1.25px ، 1pc = 15px ، 1mm = 3.543307px ، 1cm = 35.43307px ، 1in = 90px.
إذا كان عرض وارتفاع عنصر SVG الخارجي لا يحدد الوحدات (أي وحدات المستخدم) ، فسيتم اعتبار هذه القيم PX.
هذا المقال صعب للغاية الحديث عنه. في الواقع ، فقط تذكر أن إحداثيات وطول عنصر الرسم تشير إلى إحداثيات وطول نظام إحداثيات المستخدم الجديد بعد التحول المزدوج لنظام إحداثيات النافذة وتحويل نظام إحداثيات المستخدم. المرجع العملي: فهرس البرنامج النصي: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspxمركز التطوير: https://developer.mozilla.org/en/svg
المرجع الشعبي: http://www.chinasvg.com/
المستند الرسمي: http://www.w3.org/tr/svg11/