HTML5 SVG 2d Einführung 12 - Einführung in SVG DOM- und DOM -Operationen

Autor：Eve Cole Aktualisierungszeit：2025-04-03 16:00:04

Die Verwendung von Skripten kann leicht verschiedene komplexe Aufgaben erledigen, und es ist auch eine Mainstream -Methode, um Animation und Interaktion zu vervollständigen. Da SVG ein Element von HTML ist, unterstützt es normale DOM -Operationen. 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 derzeit SVG derzeit nicht unterstützt, erfordert die Entwicklung von SVG -Seiten, die auf dem IE basieren, unterschiedliche Methoden. Jeder ist wirklich sehr vertraut mit diesem Teil des Wissens. Schauen wir uns also kurz unten an.

DOM -Operationen auf HTML -Seiten

Jeder sollte mit Dom vertraut sein. Hier ist ein kleines Beispiel:

<kopf>

#SVGContainer {

Breite: 400px;

Höhe: 400px;

Hintergrundfarbe: #a0a0a0;

}

</style>

Funktion erstelltvg () {

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, "width", boxwidth);

svgelem.setattributens (null, "Höhe", BoxHeight);

svgelem.style.display = "block";

var g = document.createelementns (xmlns, "g");

svgelem.appendchild (g);

G.Setattributens (Null, 'Transformation', 'Matrix (1,0,0, -1,0,300)');

// lineare Gradienten 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 (Stopptop);

var stopbottom = document.createelementns (xmlns, "stop");

stopbottom.setattributens (null, "offset", "100%");

stopbottom.setattributens (null, "stop-color", "#0000ff");

Grad.AppendChild (Stopbottom);

Defs.AppendChild (Grad);

G.Appendchild (DEFS);

// Grenzen zeichnen

var coordinates = "m 0, 0";

Koordinaten += "L 0, 300";

Koordinaten += "L 300, 0";

Koordeln += "L 0, -300";

Koordeln += "l -300, 0";

var path = document.createelementns (xmlns, "path");

Path.SetatTributens (Null, 'Schlaganfall', "#000000");

Path.SetatTributens (NULL, 'Schlaganfall-Breite', 10);

Path.SetatTributens (NULL, 'STRECE-LINEJOIN', "ROCK");

Path.SetatTributens (Null, 'D', Koordinaten);

path.setattributens (null, 'fill', "url (#gradient)");

Path.SetatTributens (NULL, 'Opazität', 1.0);

G.Appendchild (Pfad);

var svgContainer = document.getElementById ("SvgContainer");

SVGContainer.AppendChild (Svgelem);

}

</script>

</head>

</body>

Hast du es entdeckt? Es ist genau das gleiche wie der DOM -Betrieb gewöhnlicher HTML -Elemente:

Element auswählen: Dokument.GetElementById

Element erstellen: document.createelementns

Eine andere Möglichkeit, untergeordnete Elemente zu erstellen: Element.CreateChildns

Element hinzufügen: node.appendchild

Setzen Sie das Attribut des Elements: Element.SetatTributens/Element.SetAttribute

Zusätzlich zu den oben genannten Operationen sind auch die folgenden Operationen und Eigenschaften sehr häufig:

Erhalten Sie den Attributwert des Elements: Element.getAttributens/element.getAttribute

Überprüfen Sie, ob ein Attribut in einem Element vorhanden ist: Element.hasattributens

Entfernen Sie ein Attribut eines Elements: Element.removeAttributens

Elternelement, untergeordnetes Element und Geschwisterknoten: Element.Parentnode/Element.Firstchild/Child.Nextsibling

Diese Methoden werden hier nicht ausführlich eingeführt. Darüber hinaus ist die Knotenstruktur des DOM -Baums und die Vererbungsbeziehung zwischen Objekten ähnlich, sodass ich nicht im Detail erklären werde. Schüler, die es brauchen, beziehen sich auf die Dokumentation für das DOM -Core -Objekt unten.

Es ist jedoch zu beachten, dass SVG im Wesentlichen ein XML -Dokument ist, daher ist die DOM -Methode im Grunde genommen eine Methode mit NS, um verwandte Namespaces bereitzustellen. Wenn der Namespace bereits beim Erstellen eines Elements angegeben ist und es kein Problem mit mehreren Namespaces gibt, können Sie beim Einstellen der zugehörigen Attribute auch eine Version ohne NS verwenden, z. Im Allgemeinen wird jedoch immer noch dringend empfohlen, eine Version mit NS -Ende zu verwenden, da diese Version auch bei mehreren Namespaces immer normal funktioniert.

Svg Dom

Ich habe keine umfassenden Informationen dazu und den Standard DOM gefunden. Derzeit weiß ich nur, dass die Zuordnungsmethoden der Attribute unterschiedlich sind. Wenn Sie Schüler haben, die dies verstehen, geben Sie mir bitte eine Nachricht.

Im obigen Beispiel verwenden wir Element.SetatTributens/Element.SetatTribute, um den Attributen Werte zuzuweisen. In SVG DOM können wir eine objektorientierte Methode verwenden, um Objektattributen über Zugriffspunkte Werte zuzuweisen. Beispielsweise ist Folgendes ein Vergleich der beiden Methoden:

Gewöhnliche DOM -Methode:

element.setAttribute ("x", "10");

element.setAttribute ("y", "20");

element.setattribute ("width", "100%");

element.setAttribute ("Höhe", "2em");

Und SVG DOM -Methode:

element.x.baseval.Value = 10;

element.y.baseval.Value = 20;

element.width.baseval.newValueSpecifiedUnits (svGlength.svg_lengtype_percentage, 100);

element.height.baseval.newValueSpecifiedUnits (svGlength.svg_lengtype_ems, 10);

DOM -Skripte sind traditionelle Skripte, und ihre Eigenschaften bestehen darin, einzelne Elemente durch Erstellen einer Wertzeichenfolge festzulegen. Der Vorteil des SVG -DOM -Skriptstils besteht darin, dass Sie keine Wertzeichenfolgen erstellen müssen, sodass die Leistung besser ist als DOM -Skripte.

In SVG eingebettete Skripte

Wenn Sie Skripte in SVG hinzufügen möchten, müssen Sie Skriptelemente verwenden. Dies wurde bereits erwähnt. Darüber hinaus ist es im Grunde genommen das gleiche wie das Einlegen von Skripten in die HTML nach außen. Siehe ein Beispiel:

<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">

<kopf>

</head>

<body>

<! [CDATA [

Funktion showRectColor () {

alert (document.getElementById ("myBlUeRect"). getattributens (null, "fill");

}

FunktionshowrectArea (evt) {

var width = parsefloat (evt.target.getAttributens (null, "width"));

var height = parsefloat (evt.target.getAttributens (null, "Höhe"));

alarm ("Der Rechteckbereich ist:" + (Breite * Höhe));

}

Funktion showrootothildrennr () {

Alert ("NR von Kindern:"+document.documentElement.childnodes.length);

}

]]>

</script>

<text x = "40" y = "100" onclick = "showRectColor ()"> auf diesen Text klicken, um die Rechteckfarbe anzuzeigen. </text>

<Text x = "40" y = "130"> Klicken Sie auf Rechteck, um den Rechteckbereich anzuzeigen. </text>

<text x = "40" y = "160" onclick = "showrootothildrennr ()"> auf diesen Text klicken, um die Anzahl des Kindes anzuzeigen

<tspan x = "40" dy = "20"> Elemente des Stammelements. </tspan> </text>

</g>

</svg>

</body>

</html>

In diesem Beispiel wird eine häufige Art, DOM -Objekte zu erhalten, aufgeführt :

1. Holen Sie sich das Objekt durch Methoden wie document.getElementById oder document.getElementByClassName;

2. Erhalten Sie das Dokumentobjekt über document.documentElement oder document.rootelement;

3. Holen Sie sich das Objekt, das das Ereignis über den Ereignisparameter evt.target generiert. Der Vorteil dieser Methode besteht darin, dass Sie das Objekt erhalten können, das das Ereignis ohne ID generiert.

Der Rest der Skripte entspricht im Grunde genommen mit dem normalen Dom.

Praktische Referenz:

Skriptindex: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Entwicklungszentrum: https://developer.mozilla.org/en/svg

Beliebte Referenz: http://www.chinasvg.com/

Offizielles Dokument: http://www.w3.org/tr/svg11/

DOM CORE -Objekt -API: http://reference.sitepoint.com/javascript/document

Häufige Eigenschaften und Methoden von SVG DOM: http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459