لقد قدمت الكثير من العناصر الرسومية من قبل. إذا كانت العديد من العناصر الرسومية متشابهة ، فهل أحتاج إلى تحديد العناصر الجديدة في كل مرة؟ هل يمكننا مشاركة بعض الرسومات؟ هذا هو محور هذا القسم - إعادة استخدام عناصر SVG.
تركيبة -عناصرالعنصر G عبارة عن حاوية تجمع بين مجموعة من العناصر الرسومية ذات الصلة إلى كلي ؛ بهذه الطريقة ، يمكننا العمل على هذا الكل. يمكن عادةً استخدام هذا العنصر بالاقتران مع عناصر DESC وعناصر العنوان لتوفير معلومات بنية المستند. عادة ما تكون المستندات المنظمة جيدًا قابلة للقراءة جيدًا وتقديمها. انظر مثال صغير:
<svgxmlns = "http://www.w3.org/2000/svg"
الإصدار = "1.1" width = "5cm" height = "5cm">
<SESC> TWOGROUPS ، LOVEOFTWORCERCELLES </SESC>
<gid = "group1" fill = "red">
<rectx = "1cm" y = "1cm" width = "1cm" height = "1cm"/>
<rectx = "3cm" y = "1cm" width = "1cm" height = "1cm"/>
</g>
<gid = "group2" fill = "Blue">
<rectx = "1cm" y = "3cm" width = "1cm" height = "1cm"/>
<rectx = "3cm" y = "3cm" width = "1cm" height = "1cm"/>
</g>
<!-showoutline من canvasing'rect'element->
<rectx = ". 01cm" y = ". 01cm" width = "4.98cm" height = "4.98cm"
fill = "none" Stroke = "Blue" السكتة الدماغية width = ". 02 سم"/>
</svg>
بضع نقاط يجب ملاحظة :1.xmlns = http: //www.w3.org/2000/svg يشير إلى أن مساحة الاسم الافتراضية لعنصر SVG بأكمله هو SVG. يمكن حذف هذا عندما لا يكون هناك غموض. نظرًا لأن مستند SVG عبارة عن مستند XML ، فإن القواعد ذات الصلة لمساحة اسم XML قابلة للتطبيق هنا. على سبيل المثال ، يمكنك إعطاء مساحة الاسم المحددة المعروضة في SVG ، وتوفير الاسم المستعار إلى مساحة الاسم ، إلخ.
2.G يمكن أن تكون العناصر المتداخلة.
3. العناصر الرسومية المدمجة هي نفس العناصر الفردية ، ويمكن إعطاء قيمة المعرف. وبهذه الطريقة ، عند الحاجة (مثل الرسوم المتحركة وإعادة استخدام مجموعة من العناصر) ، يمكنك فقط الرجوع إلى قيمة الهوية هذه.
4. يمكن للدمج بين مجموعة من العناصر الرسومية تعيين السمات ذات الصلة لهذه المجموعة من العناصر (ملء ، السكتة الدماغية ، التحويل ، إلخ) ، وهو أيضًا سيناريو حيث يتم استخدام المجموعات.
قالب - عنصر الرمزيتم استخدام عنصر الرمز لتحديد قالب الرسوم (يمكن أن يحتوي القالب على العديد من الرسومات) ، والتي يمكن إنشاء مثيل لها بواسطة عنصر الاستخدام. تشبه وظائف القالب العنصر G ، وكلاهما يوفر مجموعة من الكائنات الرسومية ، ولكن هناك بعض الاختلافات. الفرق من العنصر G هو:
1. لن يتم تقديم عنصر الرمز نفسه ، سيتم تقديم مثيلات من قالب الرمز فقط.
2. يمكن أن يكون لعنصر الرمز سمات ViewBox و ResterveaseptRatio ، والتي تسمح للرمز بتوسيع نطاق العناصر الرسومية.
من وجهة نظر تقديم ، فإن عناصر مماثلة لعناصر الرموز هي علامة (تحديد الأسهم والعلامات) وعناصر النمط (تحديد اللون) ؛ لن يتم تقديم هذه العناصر مباشرة ؛ يتم إنشاء استخدامهم بشكل أساسي من خلال عنصر الاستخدام. إنه بالضبط لهذا السبب أن سمة "العرض" لا معنى لها للرمز.
يوضح الرمز المعدل التالي كيفية استخدام الرمز:
<svgxmlns = "http://www.w3.org/2000/svg"
xmlns: xlink = "http://www.w3.org/1999/xlink"
الإصدار = "1.1" width = "5cm" height = "5cm">
<SESC> TWOGROUPS ، LOVEOFTWORCERCELLES </SESC>
<symborid = "group1" fill = "red">
<rectx = "1cm" y = "1cm" width = "1cm" height = "1cm"/>
<rectx = "3cm" y = "1cm" width = "1cm" height = "1cm"/>
</symbar>
<gid = "group2" fill = "Blue">
<rectx = "1cm" y = "3cm" width = "1cm" height = "1cm"/>
<rectx = "3cm" y = "3cm" width = "1cm" height = "1cm"/>
</g>
<usexLink: href = "#group1" target = "_ blank" rel = "nofollow">
<!-showoutline من canvasing'rect'element->
<rectx = ". 02 سم" y = ". 02 سم" width = "4.96 سم" height = "4.96 سم"
fill = "none" Stroke = "Blue" السكتة الدماغية width = ". 02 سم"/>
</svg>
تحديد العنصر -defsيتيح لك SVG تحديد مجموعة من الكائنات ثم إعادة استخدامها (لاحظ أنه ليس مجرد كائن رسومي). المثال الأكثر شيوعًا هو تحديد لون التدرج ثم تعيين سمات التعبئة إلى كائنات رسومية أخرى. لن يتم تقديم تعريف لون التدرج ، لذلك يمكن وضع كائنات من هذا النوع في أي مكان. غالبًا ما يتم العثور على إعادة الاستخدام في الكائنات الرسومية ، ولا نريد تقديمه مباشرة عند تحديد ، ولكن بدلاً من ذلك نريد تقديمه في المراجع. يمكن تنفيذ ذلك باستخدام عنصر DEFS.
بشكل عام ، فإن النهج الموصى به هو وضع الكائن المشار إليه في عنصر DEFS كلما كان ذلك ممكنًا. هذه الكائنات عادة ما تكون: altglyphdef ، clippath ، المؤشر ، مرشح ، علامة ، قناع ، نمط ، خطية ، radialgradient ، الرمز والكائنات الرسومية. من السهل فهم تحديد هذه الكائنات في عنصر DEFS ، لذلك يحسن إمكانية الوصول.
في الواقع ، توفر عناصر G وعناصر الرموز وعناصر DEFS ككائنات حاويات جميعها إعادة استخدام بدرجات متفاوتة ، لكن خصائص كل عنصر قد تكون مختلفة قليلاً: على سبيل المثال ، يتم تقديم عناصر G مباشرة ، ولن يتم تقديم الرمز DEFS مباشرة ، ويحتوي الرمز على سمة صندوق العرض ، والتي ستنشئ نافذة جديدة.
عادة ، يتم تعيين العناصر المحددة في DEFS سمة معرف واستخدامها مباشرة أينما تم استخدامها. اعتمادًا على العناصر ، يمكن استخدام هذه التعريفات في أماكن مختلفة ، مثل الألوان التقدمية التالية كسمات:
<svgwidth = "8cm" height = "3cm"
xmlns = "http://www.w3.org/2000/svg" الإصدار = "1.1">
<sces> localureferences withinancestor's'defs '. </desc>
<defs>
<LineArgradientId = "Gradient01">
<STOVOFFSET = "20 ٪" STOP-COLOR = "#39F"/>
<STOVOFFSET = "90 ٪" stop-color = "#f3f"/>
</lineargradient>
</defs>
<rectx = "1cm" y = "1cm" width = "6cm" height = "1cm"
fill = "url (#gradient01)"/>
</svg>
يمكن ربط تعريف العناصر ذات الصلة بالرسومات إلى المستند باستخدام عنصر الاستخدام. على سبيل المثال:
<svgwidth = "10cm" height = "3cm" viewbox = "0010030" version = "1.1"
xmlns = "http://www.w3
<SESC> exampleuse01-simplecaseof'use'ona'rect '</sicc>
<defs>
<rectid = "myrect" width = "60" height = "10"/>
</defs>
<rectx = ". 1" y = ". 1" width = "99.8" height = "29.8"
fill = "none" stroke = "Blue" السكتة الدماغية = ". 2"/>
<Usex = "20" y = "10" xLink: href = "#myRect"/>
</svg>
يرجى ملاحظة استخدام مساحة الاسم Xlink هنا. على الرغم من أن معظم المشاهدين سيعرضون هذا العنصر بشكل صحيح بدونه ، من أجل الاتساق ، يجب تحديد مساحة اسم XLink على عنصر <SVG> </SVG>.
QUOTE use elementيمكن الرجوع بشكل أساسي إلى أي SVG ، رمز ، G ، عنصر رسومي واحد وعنصر الاستخدام (على سبيل المثال تهيئة) ككائنات قالب بواسطة عنصر الاستخدام. سيتم تقديم محتوى الرسومات المشار إليه بواسطة الاستخدام في الموقع المحدد. على عكس عنصر الصورة ، لا يمكن لعنصر الاستخدام الرجوع إلى المستند بأكمله.
يحتوي عنصر الاستخدام أيضًا على سمات X و Y و Width and Right. يمكن حذف هذه السمات. إذا لم يتم حذفها ، فسيتم تعيين إحداثيات محتوى الرسومات المشار إليها أو الطول إلى مساحة تنسيق المستخدم الحالية.
تعادل عملية الإجراء لعنصر الاستخدام نسخ الكائن المشار إليه بعمق إلى شجرة دوم غير العامة المستقلة ؛ العقدة الأصل لهذه الشجرة هي عنصر الاستخدام. على الرغم من أنها عقدة DOM غير العامة ، إلا أنها عقدة DOM بشكل أساسي. لذلك ، سيتم نسخ جميع قيم السمات والرسوم المتحركة والأحداث والإعدادات المتعلقة بـ CSS للكائن المشار إليها وستظل تعمل. علاوة على ذلك ، سترث هذه العقد أيضًا السمات ذات الصلة لعنصر الاستخدام والأسلاف الاستخدام (لاحظ أن العناصر المرجعية هي نسخ عميقة ، وأن هذه العناصر النسخ لا علاقة لها بالعنصر الأصلي ، لذلك لن تكون سمات عقدة سلف العنصر المشار إليها موجودة هنا). إذا كانت هذه العقد نفسها لها سمات ذات صلة (CSS) ، فسيقومون أيضًا بالكتابة على السمات الموروثة ، والتي تتوافق مع عقد DOM العادية ، لذا كن حذرًا عند استخدام الرؤية: مخفية لعناصر الاستخدام ، ولن تعمل بالضرورة. ومع ذلك ، نظرًا لأن هذه العقد غير عامة ، في عمليات DOM ، يمكنك رؤية عنصر الاستخدام فقط ، بحيث يمكنك فقط تشغيل عنصر الاستخدام.
من منظور المؤثرات البصرية ، يكون عنصر الاستخدام أشبه بالسلطة النائبة ، والتأثير البصري بعد التقديم هو نفسه تقديم مباشرة مع الكائن المشار إليه:
1. عنصر الاستخدام يشير إلى عنصر رمزفي هذه الحالة ، يكون التأثير البصري يعادل:
(1) تغيير عنصر الاستخدام إلى عنصر G ؛
(2) نقل جميع خصائص الاستخدام باستثناء x ، y ، العرض ، الارتفاع ، xlink: href إلى عنصر g ؛
(3) حوّل سمات الاستخدام x و y إلى ترجمة (x ، y) ، وإلحاق سمة التحويل الأخيرة لعنصر g ؛
(4) استبدل عنصر الرمز المرجع بعنصر SVG. سيستخدم عنصر SVG هذا بشكل صريح سمات العرض والارتفاع لعنصر الاستخدام (عنصر الاستخدام لا يحتوي على هذه السمات ، وهي 100 ٪) ؛
(5) نسخ محتوى الرسوم الرسم بعمق لعنصر الرمز المرجع في SVG استبدال.
2. يشير عنصر الاستخدام إلى عنصر SVGفي هذه الحالة ، يكون التأثير البصري يعادل:
(1) تغيير عنصر الاستخدام إلى عنصر G ؛
(2) نقل جميع خصائص الاستخدام باستثناء x ، y ، العرض ، الارتفاع ، xlink: href إلى عنصر g ؛
(3) حوّل سمات الاستخدام x و y إلى ترجمة (x ، y) ، وإلحاق سمة التحويل الأخيرة لعنصر g ؛
(4) انسخ عنصر SVG المشار إليه بما في ذلك المحتوى. سيستخدم عنصر SVG هذا بشكل صريح سمات العرض والارتفاع لعنصر الاستخدام (لا يحتوي عنصر الاستخدام على هذه السمات ويستخدم القيمة الأصلية) ؛
3. مواقف أخرىالتأثير البصري في هذه الحالات يعادل:
(1) تغيير عنصر الاستخدام إلى عنصر G ؛
(2) نقل جميع خصائص الاستخدام باستثناء x ، y ، العرض ، الارتفاع ، xlink: href إلى عنصر g ؛
(3) حوّل سمات الاستخدام x و y إلى ترجمة (x ، y) ، وإلحاق سمة التحويل الأخيرة لعنصر g ؛
(4) نسخ العناصر المرجعية ؛
انظر المؤثرات المرئية للمثال التالي :<svgwidth = "10cm" height = "3cm" viewbox = "0010030" version = "1.1"
xmlns = "http://www.w3
<SESC> exampleuse03- use'witha'transform'attribute </sicc>
<defs>
<rectid = "myrect" x = "0" y = "0" width = "60" height = "10"/>
</defs>
<rectx = ". 1" y = ". 1" width = "99.8" height = "29.8"
fill = "none" stroke = "Blue" السكتة الدماغية = ". 2"/>
<usexlink: href = "#myrect"
تحويل = "ترجمة (20،2.5) تدوير (10)"/>
</svg>
الشكل التالي يبدو مثل الشكل أعلاه :<svgwidth = "10cm" height = "3cm" viewbox = "0010030"
xmlns = "http://www.w3.org/2000/svg" الإصدار = "1.1">
<SESC> exampleuse03- use'witha'transform'attribute </sicc>
<rectx = ". 1" y = ". 1" width = "99.8" height = "29.8"
fill = "none" stroke = "Blue" السكتة الدماغية = ". 2"/>
<gtransform = "ترجمة (20،2.5) تدوير (10)">
<rectx = "0" y = "0" width = "60" height = "10"/>
</g>
</svg>
المرجع العملي: فهرس البرنامج النصي: 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/