Einführung in SVG 2D in HTML5 12 – Einführung in SVG DOM und DOM-Operationen_html5 Tutorial-Fähigkeiten

Durch die Verwendung von Skripten können verschiedene komplexe Aufgaben problemlos erledigt werden, und es handelt sich auch um eine gängige Methode zur Vervollständigung von Animationen und Interaktionen. Da SVG ein Element von HTML ist, unterstützt es gewöhnliche DOM-Operationen. Und da SVG im Wesentlichen ein XML-Dokument ist, gibt es auch eine spezielle DOM-Operation, die meist als SVG-DOM bezeichnet wird. Da der IE SVG derzeit nicht unterstützt, sind für die Entwicklung von SVG-Seiten auf Basis des IE natürlich andere Methoden erforderlich. Dieser Teil des Wissens ist eigentlich jedem bekannt, also werfen wir einen kurzen Blick darauf.

DOM-Operationen in HTML-Seiten
Jeder sollte mit DOM vertraut sein:

Code kopieren

Der Code lautet wie folgt:

#svgContainer {
width: 400px ;
height: 400px
background-color: #a0a0a0;}

function CreateSVG () {
var xmlns = "http://www.w3.org/2000/svg";
var boxWidth = 300;
var boxHeight = 300;
var svgElem = document.createElementNS (xmlns, "svg");
svgElem.setAttributeNS (null, "viewBox", "0 0 " boxWidth " " boxHeight);
svgElem.setAttributeNS (null, "height". " , 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)');
// linearen Farbverlauf zeichnen
var defs = document.createElementNS (xmlns, "defs");
var grad = document.createElementNS (xmlns, "linearGradient");
grad.setAttributeNS (null, "id", "gradient");
grad.setAttributeNS (null, "x1", "0 % ");
grad.setAttributeNS (null, "x2", "0%");
grad.setAttributeNS (null, "y1", "100%");
grad.setAttributeNS (null , "y2", "0%");
var stopTop = document.createElementNS (xmlns, "stop");
stopTop.setAttributeNS (null, "offset", "0%"); stopTop .setAttributeNS (null, "stop-color", "#ff0000");
grad.appendChild (stopTop);
var stopBottom = document.createElementNS (xmlns, "stop"); setAttributeNS (null, „offset“, „100 %“);
stopBottom.setAttributeNS (null, „stop-color“, „#0000ff“); appendChild (grad);
g.appendChild (defs);
var coords = "M 0, 0";
coords = "l 0, 300"; coords = " l 300, 0"; coords = " l -300, 0";
var path = document.createElementNS (xmlns, "path" ) ;
path.setAttributeNS (null, 'Stroke', "#000000");
path.setAttributeNS (null, 'Stroke-Width', 10); - linejoin', "round");
path.setAttributeNS (null, 'd', coords);
path.setAttributeNS (null, 'fill', "url(#gradient)"); path .setAttributeNS (null, 'opacity', 1.0);
g.appendChild (path);
var svgContainer = document.getElementById ("svgContainer");
svgContainer.appendChild (svgElem); > }


;

Ist Ihnen aufgefallen, dass die DOM-Operation gewöhnlicher HTML-Elemente genau die gleiche ist:
Element auswählen: document.getElementById
Element erstellen: document.createElementNS
Eine andere Möglichkeit, untergeordnete Elemente zu erstellen: element createChildNS
Fügen Sie ein Element hinzu: node.appendChild
Legen Sie die Attribute des Elements fest: element.setAttributeNS/element.setAttribute
Zusätzlich zu den oben genannten Operationen sind auch die folgenden Operationen und Attribute üblich:
Rufen Sie die Elemente ab attributes Attributwert: element.getAttributeNS/element.getAttribute
Überprüfen Sie, ob ein Attribut für das Element vorhanden ist: element.hasAttributeNS
Entfernen Sie ein Attribut des Elements: element.removeAttributeNS
Übergeordnetes Element, untergeordnetes Element und Geschwisterknoten : element.parentNode/element.firstChild/child.nextSibling
Diese Methoden werden hier nicht im Detail vorgestellt, da die Knotenstruktur des DOM-Baums und die Vererbungsbeziehung zwischen Objekten ebenfalls ähnlich sind ausführlich beschrieben. Schüler, die es benötigen, können später auf die Dokumentation von DOM Core Object zurückgreifen.
Es sollte jedoch beachtet werden, dass SVG im Wesentlichen ein XML-Dokument ist. Daher enden die grundlegenden DOM-Methoden alle auf NS, um verwandte Namespaces bereitzustellen, wenn beim Erstellen eines Elements ein Namespace bereitgestellt wurde und es nicht mehrere Namespaces gibt Problem, dann können Sie beim Festlegen verwandter Attribute auch die Version ohne NS verwenden, z. B. die direkte Verwendung von element.setAttribute zum Festlegen des Attributwerts. Im Allgemeinen wird jedoch weiterhin dringend empfohlen, die Version mit NS-Endung zu verwenden, da Diese Version funktioniert immer einwandfrei, auch bei mehreren Namespaces.
SVG DOM
Wie unterscheidet sich das vom Standard-DOM? Ich weiß derzeit nur, dass die Methoden zur Zuweisung von Attributen unterschiedlich sind. Wenn es Schüler gibt, die davon wissen, lassen Sie es mich bitte wissen.
Im obigen Beispiel verwenden wir element.setAttributeNS/element.setAttribute, um Attributen Werte zuzuweisen. Im SVG-DOM können Sie die objektorientierte Methode verwenden, um den Attributen von Objekten Werte zuzuweisen, indem Sie auf dot zugreifen Im Folgenden finden Sie beispielsweise zwei Vergleichsmethoden:
Gemeinsame DOM-Methode:

Kopieren Sie den Code

Der Code lautet wie folgt:

element.setAttribute("x", "10");
element.setAttribute("y", "20"); ("width", "100%");
element.setAttribute("height", "2em"); >

Code kopieren


Der Code lautet wie folgt:

element.x.baseVal.value = 10; element .y.baseval.Value = 20; >DOM-Skript ist ein traditionelles Skript, das durch die Übergabe von Construct-„Wertzeichenfolgen“ zum Festlegen einzelner Elemente gekennzeichnet ist. Der Vorteil des SVG-DOM-Skriptstils besteht darin, dass Sie keine „Wertzeichenfolge“ erstellen müssen, sodass die Leistung besser ist als beim DOM-Skript.

In SVG eingebettetes Skript

Wenn Sie ein Skript in SVG hinzufügen möchten, müssen Sie das bereits erwähnte Skriptelement verwenden Es ist dasselbe wie das Einfügen des Skripts in den externen HTML-Code. Schauen Sie sich ein Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

Klicken Sie auf diesen Text, um die Rechteckfarbe anzuzeigen.
Klicken Sie auf das Rechteck, um den Rechteckbereich anzuzeigen.
Klicken Sie auf diesen Text, um die Anzahl der Kinder anzuzeigen
Elemente des Stammelements.

在这个例子中，列举了常见的获取DOM对象的方式:
1. Klicken Sie auf „document.getElementById“ oder „document.getElementByClassName“. Klicken Sie auf „document.documentElement“ und „document.rootElement“. 通过事件参数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.iteye.com/blog/393459