يمكن أن يؤدي استخدام البرامج النصية بسهولة إلى إكمال مختلف المهام المعقدة ، كما أنها طريقة سائدة لإكمال الرسوم المتحركة والتفاعل. نظرًا لأن SVG عنصر في HTML ، فإنه يدعم عمليات DOM العادية. نظرًا لأن SVG هو مستند XML بشكل أساسي ، فهناك أيضًا عملية DOM خاصة ، والتي تسمى في الغالب SVG DOM. بالطبع ، نظرًا لأن IE لا يدعم SVG في الوقت الحالي ، فإن تطوير صفحات SVG بناءً على IE يتطلب طرقًا مختلفة. الجميع في الواقع على دراية بهذا الجزء من المعرفة ، لذلك دعونا نلقي نظرة عليه لفترة وجيزة أدناه.
عمليات DOM في صفحات HTMLيجب أن يكون الجميع على دراية بـ DOM. هنا مثال صغير:
<head>
<style>
#SVGContainer {
العرض: 400 بكسل ؛
الارتفاع: 400 بكسل ؛
خلفية اللون: #A0A0A0 ؛
}
</style>
<script>
وظيفة CreateSvg () {
var xmlns = "http://www.w3.org/2000/svg" ؛
var boxwidth = 300 ؛
var boxheight = 300 ؛
var svgelem = document.createelementns (xmlns ، "svg") ؛
svgelem.setAttRibtens (null ، "viewbox" ، "0 0" + boxwidth + "" + boxheight) ؛
svgelem.setattributens (null ، "width" ، boxwidth) ؛
svgelem.setattributens (NULL ، "الارتفاع" ، boxheight) ؛
svgelem.style.display = "block" ؛
var g = document.createelementns (xmlns ، "g") ؛
svgelem.appendchild (g) ؛
G.SetAtTributens (NULL ، "Transform" ، "Matrix (1،0،0 ، -1،0،300) ') ؛
// ارسم التدرج الخطي
var defs = document.createlementns (xmlns ، "defs") ؛
var grad = document.createelementns (xmlns ، "LineArgradient") ؛
Grad.SetAttRibtens (NULL ، "ID" ، "التدرج") ؛
Grad.SetAttRibtens (NULL ، "X1" ، "0 ٪") ؛
Grad.SetAttrightens (NULL ، "x2" ، "0 ٪") ؛
Grad.SetAttRibtens (NULL ، "Y1" ، "100 ٪") ؛
Grad.SetAttRibtens (NULL ، "Y2" ، "0 ٪") ؛
var stoptop = document.createlementns (xmlns ، "stop") ؛
stoptop.setattributens (NULL ، "الإزاحة" ، "0 ٪") ؛
stoptop.setattributens (null ، "stop-color" ، "#ff0000") ؛
grad.appendchild (stoptop) ؛
var stopBottom = document.createElementNs (xmlns ، "stop") ؛
stopbottom.setattributens (NULL ، "الإزاحة" ، "100 ٪") ؛
stopbottom.setattributens (null ، "stop-color" ، "#0000ff") ؛
grad.appendchild (stopBottom) ؛
defs.appendchild (grad) ؛
G.AppendChild (DEFS) ؛
// رسم الحدود
var coordinates = "m 0 ، 0" ؛
الإحداثيات += "L 0 ، 300" ؛
الإحداثيات += "L 300 ، 0" ؛
Coords += "L 0 ، -300" ؛
Coords += "L -300 ، 0" ؛
var path = document.createelementns (xmlns ، "path") ؛
path.setattributens (NULL ، "stroke" ، "#000000") ؛
path.setattributens (NULL ، "السكتة الدماغية" ، 10) ؛
path.setattributens (null ، "stroke-linejoin '،" round ") ؛
path.setattributens (null ، 'd' ، إحداثيات) ؛
path.setattributens (null ، 'fill' ، "url (#rgradient)") ؛
path.setattributens (NULL ، "العتامة" ، 1.0) ؛
G.AppendChild (PATH) ؛
var svgContainer = document.getElementById ("svgContainer") ؛
svgcontainer.appendchild (svgelem) ؛
}
</script>
</head>
<body onload = "createSvg ()">
<div id = "svgContainer"> </viv>
</body>
هل اكتشفت ذلك؟ إنه بالضبط نفس عملية DOM لعناصر HTML العادية:
حدد العنصر: document.getElementById
إنشاء عنصر: document.createElementNs
طريقة أخرى لإنشاء عناصر الطفل: element.createchildns
إضافة العنصر: node.appendchild
قم بتعيين سمة العنصر: element.setattributens/element.setattribute
بالإضافة إلى العمليات المذكورة أعلاه ، تكون العمليات والخصائص التالية شائعة جدًا أيضًا:
احصل على قيمة السمة للعنصر: element.getAttributens/element.getAttribute
تحقق مما إذا كانت السمة موجودة في عنصر: element.hasattributens
قم بإزالة سمة عنصر: element.removeAttributens
عنصر الوالدين ، عنصر الطفل وعقدة الأخوة: element.parentnode/element.firstchild/child.nextsibling
لن يتم تقديم هذه الطرق بالتفصيل هنا ؛ بالإضافة إلى ذلك ، فإن بنية عقدة شجرة DOM وعلاقة الميراث بين الكائنات متشابهة ، لذلك لن أشرح بالتفصيل. سيشير الطلاب الذين يحتاجون إليها إلى الوثائق الخاصة بكائن DOM Core أدناه.
ومع ذلك ، تجدر الإشارة إلى أن SVG هو في الأساس مستند XML ، وبالتالي فإن طريقة DOM تستخدم بشكل أساسي طريقة مع نهاية NS لتوفير مساحات الأسماء ذات الصلة ؛ إذا تم توفير مساحة الاسم بالفعل عند إنشاء عنصر ولا توجد مشكلة في مساحات أسماء متعددة ، فعن عند تعيين السمات ذات الصلة ، يمكنك أيضًا اختيار استخدام إصدار بدون NS ، مثل استخدام element.setAttribute لتعيين قيمة السمة مباشرة. ومع ذلك ، بشكل عام ، لا يزال يوصى بشدة باستخدام إصدار مع نهاية NS ، لأن هذا الإصدار يعمل دائمًا بشكل طبيعي ، حتى في حالة مساحات الأسماء المتعددة.
SVG DOM لم أجد أي معلومات شاملة حول هذا و DOM القياسية. في الوقت الحاضر ، أعرف فقط أن أساليب تعيين السمات مختلفة. إذا كان لديك أي طلاب يفهمون هذا ، فالرجاء إعطائي رسالة.في المثال أعلاه ، نستخدم element.setattributens/element.setAttribute لتعيين القيم للسمات. في SVG DOM ، يمكننا استخدام طريقة موجهة للكائن لتعيين القيم لسمات الكائن من خلال نقاط الوصول. على سبيل المثال ، ما يلي هو مقارنة بين الطريقتين:
طريقة DOM العادية:
element.setattribute ("x" ، "10") ؛
element.setattribute ("y" ، "20") ؛
element.setAttribute ("العرض" ، "100 ٪") ؛
element.setattribute ("height" ، "2em") ؛
وطريقة SVG DOM:
element.x.baseval.value = 10 ؛
element.y.baseval.value = 20 ؛
element.width.baseval.newvaluespecifiedUnits (svglength.svg_lengthtype_percentage ، 100) ؛
element.height.baseval.newvaluespecifiedUnits (svglength.svg_lengthtype_ems ، 10) ؛
البرامج النصية DOM هي برامج نصية تقليدية ، وخصائصها هي تعيين عناصر فردية عن طريق إنشاء سلسلة قيمة. تتمثل ميزة نمط SVG DOM Script في أنه لا يتعين عليك بناء سلاسل القيمة ، لذلك يكون الأداء أفضل من البرامج النصية DOM.
البرامج النصية المضمنة في SVGإذا كنت ترغب في إضافة البرامج النصية داخل SVG ، فأنت بحاجة إلى استخدام عناصر البرنامج النصي. وقد ذكر هذا من قبل. بالإضافة إلى ذلك ، فهو نفس الشيء مثل وضع البرامج النصية في HTML في الخارج. انظر مثال:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<svg xmlns = "http://www.w3.org/2000/svg"
<script type = "text/ecmascript">
<! [CDATA [
وظيفة ShowRectColor () {
ALERT (document.getElementById ("mybluerect"). getAttributens (null ، "fill")) ؛
}
وظيفة ShowRectarea (evt) {
var width = parsefloat (evt.target.getAttRiptens (null ، "width")) ؛
var height = parsefloat (evt.target.getAttRibtens (null ، "height")) ؛
التنبيه ("منطقة المستطيل هي:" + (العرض * الارتفاع)) ؛
}
وظائف Showrotchildrenr () {
ALERT ("nr of children:"+document.documentElement.Childnodes.Length) ؛
}
]]>
</script>
<g id = "firstgroup">
<rect id = "mybluerect" x = "40" y = "20" fill = "blue" onClick = "showrectarea (evt)"/>
<text x = "40" y = "100" onClick = "ShowRectColor ()"> انقر فوق هذا النص لإظهار لون المستطيل. </text>
<text x = "40" y = "130"> انقر على المستطيل لإظهار منطقة المستطيل. </text>
<text x = "40" y = "160" onClick = "showrotchildrenr ()"> انقر على هذا النص لإظهار عدد الطفل
<tspan x = "40" dy = "20"> عناصر عنصر الجذر. </tspan> </text>
</g>
</svg>
</body>
</html>
في هذا المثال ، يتم سرد طريقة شائعة للحصول على كائنات DOM :1. احصل على الكائن من خلال طرق مثل document.getElementById أو document.getElementByClassName ؛
2. احصل على كائن المستند من خلال المستند.
3. احصل على الكائن الذي يولد الحدث من خلال معلمة الحدث evt.target. ميزة هذه الطريقة هي أنه يمكنك الحصول على الكائن الذي يولد الحدث دون استخدام المعرف.
ما تبقى من البرامج النصية هي في الأساس نفس DOM العادي.
المرجع العملي:فهرس البرنامج النصي: 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/
DOM Core Object API: http://reference.sitepoint.com/javaScript/Document
الخصائص الشائعة وطرق SVG DOM: http://riso.iteye.com/blog/393454 ، http://riso.itey.com/blog/393459