لقد قدمت العديد من العناصر الأساسية ، بما في ذلك المجموعات المتعلقة بالهيكل وعناصر إعادة استخدامها. هنا سألخص بإيجاز العناصر ذات الصلة المتبقية في بنية مستندات SVG ، ثم أواصل تقدير الميزات الأخرى لـ SVG.
يمكن تقسيم عناصر وثائق SVG بشكل أساسي إلى الفئات التالية:
• عناصر الرسوم المتحركة: ANIMATION ، AnimateColor ، AnimateMotion ، AnimateTransform ، set ؛
• عناصر التفسير: DESC ، بيانات التعريف ، العنوان ؛
• العناصر الرسومية: الدائرة ، القطع الناقص ، الخط ، المسار ، المضلع ، polyline ، rect ؛
• العناصر الهيكلية: DEFS ، G ، SVG ، الرمز ، الاستخدام ؛
• عناصر التدرج: LineArgradient ، RadialGradient ؛
• عناصر أخرى: A ، altglyphdef ، clippath ، ملونة ، المؤشر ، المرشح ، الخط ، الوجه الخطي ، الأجنبي ، الصورة ، علامة ، قناع ، نمط ، نص ، نمط ، مفتاح ، نص ، عرض ، إلخ.
من بينها ، تم تقديم عناصر رسومية وعناصر التدرج والنص وعناصر الصور والمجموعات. فيما يلي العديد من العناصر الأخرى المتعلقة بالهيكل.
عنصر نافذة SVGيمكن وضع أي عناصر أخرى بأي ترتيب في عنصر SVG ، بما في ذلك عناصر SVG المتداخلة.
يتم استخدام الخصائص التي يدعمها عنصر SVG بشكل شائع ، وهي المعرف ، والفئة ، و X ، و Y ، والطول ، ومربع العرض ، والسمات المحفوظة للسمات ، والملء والسكتة الدماغية.
يتم أيضًا استخدام الأحداث التي تدعمها عنصر SVG بشكل شائع ، OnMouseover ، OnMousemove ، Onmousedown ، OnMouseup ، Onclick ، Onfocusin ، onfocusout ، onresize ، onscroll ، onunload ، إلخ. لن أتحدث عن عنصر SVG. للحصول على السمات الكاملة وقائمة الأحداث ، يرجى الرجوع إلى الوثائق الرسمية أدناه.
العناصر التوضيحية - عناصر desc وعناصر العنوانكل عنصر حاوية (يمكن أن يحتوي على عناصر حاوية أخرى أو عناصر من العناصر الرسومية ، مثل: A ، Defs ، Glyph ، G ، Marker ، القناع ، يمكن أن تحتوي على النمط ، SVG ، التبديل والرمز) وعناصر الرسوم البيانية عناصر DESC وعناصر العنوان. هذان العنصرين عناصر مساعدة ويستخدمان لشرح الموقف ذي الصلة ؛ محتوىها هو نص. عند تقديم مستند SVG ، لن يتم تقديم هذين العنصرين في الرسومات. الفرق بين العنصرين ليس كبيرًا جدًا. يظهر العنوان كرسالة سريعة في بعض التطبيقات ، لذلك يتم وضع العنوان عادة في الموضع الأول للعنصر الأصل.
الاستخدامات النموذجية هي كما يلي:
<svgxmlns = "http://www.w3
<g>
<title> CompanysalesByRegion </itlem>
<sces>
Thisabarchart الذي يظهر
الشركة الصاحقة.
</desc>
<!-BarchartDefinedAsvectordata->
</g>
</svg>
بشكل عام ، يجب أن يكون عنصر SVG الخارجي مصحوبًا بوصف العنوان ، بحيث يكون البرنامج قابلاً للقراءة بشكل أفضل.
عنصر علامةتحدد العلامات العناصر الرسومية (الأسهم وعلامات النقطة المتعددة) المرتبطة برعم واحد أو أكثر (Verticles of Path أو Line أو Polyline أو Polygon). يمكن إرفاق الأسهم بنقطة البداية أو نقطة نهاية المسار أو الخط أو السطر البولي. يمكن لعلامات النقاط المتعددة إلحاق علامة على جميع رؤوس المسار أو الخط أو البولي أو المضلع.
يتم تعريف العلامة بواسطة عنصر العلامة ، ثم ضبط السمات ذات الصلة (العلامة ، العلامة ، و Marker-MID ، و Marker-End) في المسار أو الخط أو المقعدين أو المضلع. انظر مثال:
<svgwidth = "4in" height = "2in"
ViewBox = "0040002000" إصدار = "1.1"
xmlns = "http://www.w3.org/2000/svg">
<defs>
<markerid = "مثلث"
ViewBox = "001010" refx = "0" refy = "5"
MarkerUnits = "strokewidth"
markerWidth = "4" markerheight = "3"
Orient = "Auto">
<pathd = "M00L105L010Z"/>
</marker>
</defs>
<SESC> placinganarrowheadattheendofapath.
</desc>
<pathd = "M1000750L2000750L25001250"
fill = "none" stroke = "Black" Width = "100"
marker-end = "url (#triangle)"/>
</svg>
دعونا نلقي نظرة على المعرفة ذات الصلة بالعلامة بالتفصيل :1. العلامة هي عنصر حاوية ، والذي يمكنه تخزين عناصر الرسوم ، وعناصر الحاويات ، والرسوم المتحركة ، وعناصر التدرج ، وما إلى ذلك بأي ترتيب.
2. يمكن لعنصر العلامة إنشاء نافذة جديدة: اضبط قيمة مربع العرض.
3. أكثر سمات مهمة للعلامة:
MarkerUnits = strokewidth | userpaceonuse
تحدد هذه الخاصية نظام الإحداثيات المستخدمة من قبل محتويات خصائص MarkerWidth و Markerheight و Marker. تحتوي هذه الخاصية على قيمتان للاختيار من بينها. القيمة الأولى لسكتة دماغية هي القيمة الافتراضية. إن نظام الإحداثيات المستخدمة من قبل محتويات علامة السمات ، و Markerheight و Marker يساويان القيمة التي تحددها عرض السكتة الدماغية لعنصر الرسم للعلامة.
على سبيل المثال ، في المثال أعلاه ، يكون عرض عنصر العلامة هو 400 والارتفاع 300. ومع ذلك ، لا تخلط بينه. الإحداثيات المستخدمة من قبل المسار في عنصر MARM هي نظام إحداثيات المستخدم الجديد الذي تم تعيينه بواسطة ViewBox.
هناك قيمة أخرى لهذه السمة وهي UsperSpaceonuse ، والتي تمثل محتويات سمات العلامات ، و Markerheight و Marker باستخدام نظام الإحداثيات الذي يشير إلى العناصر الرسومية للعلامة.
Refx ، Revy: يحدد إحداثيات الموضع للنقطة المشار إليها محاذاة مع العلامة. على سبيل المثال ، في المثال أعلاه ، تكون النقطة المرجعية هي نقطة النهاية ، ويجب أن تتوافق مع الموضع (0،5) للعلامة. لاحظ أن REFX و Revy يستخدمون نظام إحداثيات المستخدم النهائي الذي تم تحويله بواسطة ViewBox.
MarkerWidth ، Markerheight: عرض وارتفاع نافذة العلامة ، هذا سهل الفهم.
موجه: يحدد زاوية دوران العلامة. يمكنك تحديد زاوية أو تعيين تلقائي مباشرة.
يمثل Auto الاتجاه الإيجابي للمحور X ويدور وفقًا للقواعد التالية :أ. إذا كانت النقطة التي يوجد بها العلامة تنتمي إلى مسار واحد فقط ، فإن الاتجاه الأمامي لمحور X الخاص بالعلامة هو نفس المسار. انظر المثال أعلاه.
ب. إذا كانت النقطة التي يوجد بها العلامة تنتمي إلى مسارين مختلفين ، فإن الاتجاه الأمامي لمحور العلامة X يتوافق مع خط معادلة الزاوية للزاوية بين المسارين.
4. سمات العلامة للعناصر الرسومية
للرجوع إلى علامة ، يجب استخدام السمات ذات الصلة ، خاصةً هذه الثلاثة: علامة العلامة (وضع العلامة المرجعية إلى نقطة البداية) ، و MARKER-MID (ضع العلامة المرجعية إلى جميع النقاط باستثناء نقطة البداية ونقطة النهاية) ، نهاية العلامة (ضع علامة المرجع إلى نقطة النهاية). قد لا تكون قيم هذه السمات الثلاث (تمثل أن العلامة غير مقتبسة) ، مرجع العلامة (يشير إلى علامة معينة) ، وراثة (لا داعي للقول).
يمكنك أيضًا رؤية استخدام علامة من المثال أعلاه.
البرنامج النصي والنمط - عنصر البرنامج النصي وعنصر النمطفي الواقع ، يمكن ربط جميع السمات (لجميع العناصر ، وليس فقط النص) بعنصر يحتوي على CSS ، وتتوفر جميع سمات CSS في صورة SVG. يمكنك استخدام سمات النمط مباشرة لتصميم نمط عنصر ما ، أو الرجوع إلى نمط عنصر تصميم ورقة الأنماط. لا ينبغي تحليل أوراق الأنماط لملفات XML (لأنها تحتوي أحيانًا على أحرف تسبب مشاكل) ، لذلك يجب وضعها في قسم XMLCDATA. وينطبق الشيء نفسه على البرامج النصية ، ويجب وضعها في قسم XMLCDATA. انظر مثال CSS التالي:
<svgwidth = "400" height = "200" xmlns = "http://www.w3.org/2000/svg">
<SESC> النص </desc> <defs>
<StyleType = "Text/CSS">
<! [CDATA [
.abbreviation {text-decoration: thundline ؛}
]]>
</style>
</defs>
<g>
<evidex = "20" y = "50" font-size = "30"> colorscanbespeStive </text>
<textx = "20" y = "100" font-size = "30"> bytheir
<tspanfill = "RGB (255،0،0)" class = "Abbreviation"> r </tspan>
<tspanfill = "rgb (0،255،0)" class = "abbreviation"> g </tspan>
<tspanfill = "rgb (0،0،255)" class = "Abbreviation"> b </tspan> قيم </text>
<evidex = "20" y = "150" font-size = "30"> OrbyKeywordsSuchas </extry>
<textx = "20" y = "200">
<tspanstyle = "fill: lightsteelblue ؛ حجم الخط: 30"> lightsteelblue </tspan> ،
</text>
</g>
</svg>
دعونا نلقي نظرة على مثال البرنامج النصي:
<svgwidth = "500" height = "300" xmlns = "http://www.w3.org/2000/svg">
<sics> scriptingtheonclickeven </sicc>
<defs>
<scriptType = "text/ecmascript">
<! [CDATA [
وظيفة hidereveal (evt) {
variobletarget = evt.target ؛
varTheFill = ImageTarget.getAttribute ("fill") ؛
إذا (thefill == 'أبيض')
ImageTarget.setAttribute ("fill" ، "url (#Notes)") ؛
آخر
ImageTarget.setAttribute ("fill" ، "White") ؛
}
]]>
</script>
<patternid = "notes" x = "0" y = "0" width = "50" height = "75"
PatternTransform = "Rotate (15)"
PatternUnits = "userspaceonuse">
<Lelipsecx = "10" cy = "30" rx = "10" ry = "5"/>
<linex1 = "20" y1 = "30" x2 = "20" y2 = "0"
السكتة الدماغية = "3" stroke = "Black"/>
<linex1 = "20" y1 = "0" x2 = "30" y2 = "5"
السكتة الدماغية = "3" stroke = "Black"/>
</pattern>
</defs>
<LelipseonClick = "HidereVeal (Evt)" Cx = "175" cy = "100" rx = "125" ry = "60"
fill = "url (#notes)" Stroke = "Black" Width = "5"/>
</svg>
المعالجة الشرطية - عنصر التبديلسمات المعالجة الشرطية هي سمات يمكن أن تتحكم في ما إذا كان العنصر قد تم تقديمه أم لا. في الأساس ، يمكن لمعظم العناصر (وخاصة العناصر الرسومية) تحديد خصائص المعالجة الشرطية. هناك 3 خصائص معالجة مشروطة: مطلوبة ، مطلوبة ، مطلوبة والغنية. هذه الخصائص هي مجموعة من الاختبارات ، والتي تسمح لك بتحديد قائمة بالقيم (يتم فصل الخصائص الأولين عن طريق المسافات ، ويتم فصل خصائص اللغة بفواصل) ، والقيم الافتراضية صحيحة.
يوفر عنصر تبديل SVG القدرة على تقديم وفقًا للشروط المحددة. عنصر التبديل هو عنصر حاوية يمكن أن يحتوي على عناصر رسومية ، وعناصر توضيحية ، وعناصر الرسوم المتحركة ، و A ، و Goinbject ، و G ، و Image ، و SVG ، و Switch ، والنص ، والاستخدام والعناصر الأخرى. سيتحقق عنصر التبديل من سمات المعالجة الشرطية للعناصر المباشرة للطفل بالترتيب ، ثم تقديم أول عنصر الطفل الذي يلبي ظروفه الخاصة. سيتم تجاهل عناصر الطفل الأخرى. ستؤثر هذه الخصائص ، مثل خصائص العرض ، فقط على تقديم العناصر التي تستخدم هذه الخصائص مباشرة ، ولن تؤثر على العناصر المرجعية (مثل العناصر المشار إليها بواسطة الاستخدام). ببساطة ، ستؤثر هذه السمات الثلاث على عناصر مثل A ، altglyph ، foreignobject ، textpath ، tref ، tspan ، animate ، animatecolor ، animatemotion ، animatetransform ، set ، ولن تؤثر على عناصر أخرى مثل defs ، cursor ، القناع ، clippath ، النمط (هذه العناصر لا يمكن أن تشير إلى العناصر الأخرى).
ملاحظة : لا تؤثر قيم سمة العرض والرؤية لعنصر الطفل على نتيجة حكم حالة عنصر التبديل.للحصول على قائمة بقيم سمات المعالجة الشرطية ، يرجى الرجوع إلى المستند الرسمي. هنا مثال صغير:
<novel>
<rectrequiredfeatures = "http://www.w3.org/tr/svg11/feature#filter"
x = "10" y = "10" width = "322" height = "502" opatity = "0.6"
Fill = "Black" Stroke = "None" filter = "url (#gblshadow)"/>
<rectx = "10" y = "10" width = "322" height = "502" opatity = "0.6"
Fill = "Black" Stroke = "None"/>
</swhet>
معنى هذا المثال هو ببساطة: يدعم المستعرض المستخدم ميزة المرشح ، ثم ارسم المستطيل أعلاه (مع سمة المرشح). إذا كانت ميزة المرشح غير مدعومة ، ارسم المستطيل أدناه.
في الواقع ، في كثير من الأحيان ، فإن السمة الأكثر شيوعًا هي لغة SystemLanguage ، وهي قدرة المعالجة متعددة اللغات للنص. على سبيل المثال:
<svgxmlns = "http://www.w3
<novel>
<evidex = '10'y =' 20'SystemLanguage = "de"> de-haha </extry>
<evidex = '10'y =' 20'SystemLanguage = "en"> en-haha </extry>
</swhet>
</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/