HTML5 SVG 2d EINLEITUNG 8 - Dokumentstruktur und verwandte Elemente Zusammenfassung

Autor：Eve Cole Aktualisierungszeit：2025-04-10 04:16:01

Ich habe viele grundlegende Elemente eingeführt, einschließlich strukturbezogener Kombinationen und Wiederverwendungelemente. Hier werde ich kurz die verbleibenden verwandten Elemente in der SVG -Dokumentstruktur zusammenfassen und dann weiterhin andere Funktionen von SVG schätzen.

Die Elemente von SVG -Dokumenten können grundsätzlich in die folgenden Kategorien unterteilt werden:

• Animationselemente: Animate, AnimateColor, Animatemotion, Animatetransform, Set;

• Erläuterungselemente: Desc, Metadaten, Titel;

• Grafikelemente: Kreis, Ellipse, Linie, Pfad, Polygon, Polylinie, Rechtek;

• Strukturelemente: Defs, G, SVG, Symbol, Verwendung;

• Gradientenelemente: lineargradient, radialgradient;

• Andere Elemente: A, Altglyphdef, Clippath, Farbprofil, Cursor, Filter, Schriftart, Schriftart, ForeignObject, Bild, Marker, Maske, Muster, Skript, Stil, Switch, Text, Ansicht usw.

Unter ihnen wurden grafische Elemente, Gradientenelemente, Text, Bildelemente und Kombinationen eingeführt. Das Folgende sind mehrere andere Elemente im Zusammenhang mit der Struktur.

Fenster-SVG-Element

Alle anderen Elemente können im SVG -Element, einschließlich verschachtelter SVG -Elemente, in beliebiger Reihenfolge platziert werden.

Die vom SVG -Element unterstützten Eigenschaften werden üblicherweise verwendet, nämlich ID, Klasse, X, Y, Breite, Höhe, Viewbox, PreserveSpectratio sowie Füll- und Schlaganfallattribute.

Ereignisse, die vom SVG -Element unterstützt werden, werden auch häufig verwendet, Onload, Onmouseover, Onmousemove, Onmousedown, OnmouseUp, Onclick, Onfocusin, Onfocusout, OnResize, OnScroll, Onun -Ladung usw. Ich werde nicht über das SVG -Element sprechen. Die vollständige Attribute und die Ereignisliste finden Sie in der folgenden offiziellen Dokumentation.

Erklärungselemente - Desc -Elemente und Titelelemente

Jedes Containerelement (das andere Containerelemente oder Elemente von grafischen Elementen enthalten kann, wie z. Diese beiden Elemente sind Hilfselemente und werden verwendet, um die relevante Situation zu erklären. Ihr Inhalt ist Text. Wenn das SVG -Dokument gerendert wird, werden diese beiden Elemente nicht in die Grafik gerendert. Der Unterschied zwischen den beiden Elementen ist nicht zu groß. Der Titel wird in einigen Implementierungen als schnelle Nachricht angezeigt, sodass der Titel normalerweise an der ersten Position des übergeordneten Elements platziert wird.

Typische Verwendung sind wie folgt:

<g>

<title> CompanySalesByRegion </title>

<desc>

Thisabarchart, der zeigt

CompanySalesByregion.

</desc>

<!-barchartdefinedasvectordata->

</g>

</svg>

Im Allgemeinen sollte das äußerste SVG -Element von einer Titelbeschreibung begleitet werden, so dass das Programm besser lesbar ist.

Markerelement

Tags definieren grafische Elemente (Pfeile und Multi-Punkte-Marker), die an einen oder mehrere Scheitelpunkte (Branchbäume aus Pfad, Linie, Polylinie oder Polygon) angeschlossen sind. Pfeile können an den Startpunkt oder den Endpunkt des Pfades, der Linie oder der Polylinie angebracht werden. Multi-Point-Tags können ein Tag an alle Scheitelpunkte von Pfad, Linie, Polylin oder Polygon anhängen.

Der Marker wird durch das Markerelement definiert und dann die relevanten Attribute (Marker, Marker-Start, Marker-MID und Marker-End) im Pfad, die Linie, Polylinie oder Polygon festgelegt. Siehe ein Beispiel:

<svgwidth = "4in" height = "2in"

ViewBox = "0040002000" Version = "1.1"

xmlns = "http://www.w3.org/2000/svg">

<defs>

<markerId = "Triangle"

viewbox = "001010" refx = "0" refy = "5"

markerunits = "strokewidth"

markerWidth = "4" markerHeight = "3"

Orient = "auto">

</marker>

</defs>

<desc> platzinganarrowheadattheendofapath.

</desc>

<pathd = "M1000750L2000750L25001250"

fill = "none" stroke = "schwarz" stroke-width = "100"

marker-end = "url (#triangle)"/>

</svg>

Schauen wir uns das relevante Kenntnis der Marker im Detail an :

1. Marker ist ein Containerelement, mit dem grafische Elemente, Containerelemente, Animationen, Gradientenelemente usw. in beliebiger Reihenfolge gespeichert werden können.

2. Das Markerelement kann ein neues Fenster erstellen: Setzen Sie den Wert der Ansichtskiste.

3. More wichtige Attribute des Markers:

markerunits = strokewidth | userSpaceonuse

Diese Eigenschaft definiert das Koordinatensystem, das durch den Inhalt der Eigenschaften Markerwidth, MarkerHeight und Marker verwendet wird. Diese Eigenschaft hat 2 Werte zur Auswahl. Der erste Wert -Strokewidth ist der Standardwert. Das Koordinatensystem, das durch den Inhalt der Attribute Markerwidth, MarkerHeight und Marker verwendet wird, entspricht dem Wert, der durch die Schlaganfallbreite des Grafikelements des Markers festgelegt wird.

Zum Beispiel beträgt die Breite des Markierungselements im obigen Beispiel 400 und die Höhe 300. Verwirrt es jedoch nicht. Die vom Pfad im Markelement verwendeten Koordinaten sind das neue Benutzerkoordinatensystem, das von ViewBox festgelegt wurde.

Ein weiterer Wert dieses Attributs ist UserSpaceonuse, der den Inhalt der Attribute Markerwidth, MarkerHeight und Marker unter Verwendung des Koordinatensystems darstellt, das sich auf die grafischen Elemente des Markers bezieht.

Refx, Refy: Definiert die Positionskoordinaten des referenzierten Punktes, der mit dem Marker ausgerichtet ist. Zum Beispiel ist im obigen Beispiel der Referenzpunkt der Endpunkt und muss an der (0,5) Position des Markers ausgerichtet sein. Beachten Sie, dass Refx und Refy das durch Viewbox transformierte Endbenutzerkoordinatensystem verwenden.

Markerbreite, MarkerHeight: Die Breite und Höhe des Markersfensters ist leicht zu verstehen.

Orientiert: Definiert den Winkel der Markerrotation. Sie können einen Winkel angeben oder direkt automatisch zuweisen.

Auto repräsentiert die positive Richtung der x-Achse und dreht sich nach den folgenden Regeln :

A. Wenn der Punkt, an dem sich der Marker befindet, nur zu einem Pfad gehört, ist die Vorwärtsrichtung der X-Achse des Markers der gleiche wie der Pfad. Siehe das Beispiel oben.

B. Wenn der Punkt, an dem sich der Marker befindet, zu zwei verschiedenen Pfaden gehört, stimmt die Vorwärtsrichtung der x-Achse des Markers mit der Winkelausgleichslinie des Winkels zwischen den beiden Pfaden überein.

4. Markerattribute grafischer Elemente

Um auf einen Marker zu verweisen, müssen die relevanten Attribute verwendet werden, hauptsächlich diese drei: Marker-Start (setzen Sie den Referenzmarker auf den Startpunkt), Marker-MID (geben Sie den Referenzmarker auf alle Punkte mit Ausnahme des Startpunkts und dem Endpunkt), Marker-End (setzen Sie den Referenzmarker auf den Endpunkt). Die Werte dieser drei Attribute können keine sein (darunter, dass Marker nicht zitiert wird), Markerreferenz (bezieht sich auf einen bestimmten Marker), erben (natürlich zu sagen).

Sie können auch die Verwendung von Marker aus dem obigen Beispiel sehen.

Skript und Stil - Skriptelement und Stilelement

Grundsätzlich können alle Attribute (für alle Elemente, nicht nur Text) einem Element mit CSS zugeordnet werden, und alle CSS -Attribute sind im SVG -Bild verfügbar. Sie können direkte Stilattribute verwenden, um den Stil eines Elements zu entwerfen oder auf den Stil eines Stilblatt -Designelements zu verweisen. Stylesheets sollten nicht für XML -Dateien analysiert werden (da sie gelegentlich Zeichen enthalten, die Probleme verursachen), daher müssen sie im Abschnitt XMLCData platziert werden. Gleiches gilt für Skripte und müssen in den Abschnitt XMLCData platziert werden. Siehe das folgende CSS -Beispiel:

<! [CDATA [

.ABREVIVIATION {Textdekoration: Unterstreich;}

]]>

</style>

</defs>

<g>

<textx = "20" y = "50" font-size = "30"> colorscanbespecified </text>

<textX = "20" y = "100" font-size = "30"> by ihr

<TspanFill = "RGB (0,0,255)" class = "Abkürzung"> B </tspan> Werte </text>

<textx = "20" y = "150" font-size = "30"> orByKeywordsSuchas </text>

<tspANSTYLE = "FILL: LightsteelBlue; Schriftgröße: 30"> LightSteelBlue </tspan>,

</text>

</g>

</svg>

Schauen wir uns das Skript -Beispiel an:

<Desc> ScriptingTheonclickeven </desc>

<defs>

<! [CDATA [

functionHidereeveal (evt) {

variabletarget = evt.target;

VarTheFill = Imagetarget.getAttribute ("fill");

if (theFill == 'weiß')

Imagetarget.SetAttribute ("fill", "url (#notes)");

anders

Imagetarget.SetAttribute ("fill", "weiß");

}

]]>

</script>

<musterid = "Notizen" x = "0" y = "0" width = "50" height = "75"

musterTransform = "drehen (15)" "

musterUnits = "userSpaceonuse">

<linex1 = "20" y1 = "30" x2 = "20" y2 = "0"

stroke-width = "3" stroke = "schwarz"/>

<linex1 = "20" y1 = "0" x2 = "30" y2 = "5"

stroke-width = "3" stroke = "schwarz"/>

</muster>

</defs>

<ellipseonclick = "hidereveal (evt)" cx = "175" Cy = "100" rx = "125" ry = "60"

fill = "url (#notes)" stroke = "schwarz" stroke-width = "5"/>

</svg>

Bedingte Verarbeitung - Schaltelement

Bedingte Verarbeitungsattribute sind Attribute, die steuern können, ob das Element wiedergegeben wird oder nicht. Grundsätzlich können die meisten Elemente (insbesondere grafische Elemente) bedingte Verarbeitungseigenschaften angeben. Es gibt 3 bedingte Verarbeitungseigenschaften: Erforderliche Features, erforderliche Änderungen und Systemklagen. Diese Eigenschaften sind eine Reihe von Tests, mit denen Sie eine Liste von Werten angeben können (die ersten beiden Eigenschaften werden durch Leerzeichen getrennt, und die Spracheigenschaften werden durch Kommas getrennt) und die Standardwerte sind wahr.

Das Switch -Element von SVG bietet die Möglichkeit, gemäß den festgelegten Bedingungen zu rendern. Das Switch -Element ist ein Containerelement, das grafische Elemente, erklärende Elemente, Animationselemente, A, FremdObject, G, Bild, SVG, Switch, Text, Gebrauch und andere Elemente enthalten kann. Das Switch -Element überprüft die bedingten Verarbeitungsattribute der direkten untergeordneten Elemente in der Reihenfolge und rendert dann das erste untergeordnete Element, das seinen eigenen Bedingungen erfüllt. Andere Kinderelemente werden ignoriert. Diese Eigenschaften beeinflussen wie die Anzeigeeigenschaften nur die Darstellung von Elementen, die diese Eigenschaften direkt verwenden, und wirken sich nicht auf die referenzierten Elemente aus (z. B. die mit Verwendung verwiesenen Elemente). Einfach ausgedrückt, diese drei Attribute beeinflussen Elemente wie A, Altglyphe, ForeignObject, TextPath, Tref, TSPAN, AnimateColor, Animatemotion, Animatetransform, Set usw. und wirken sich nicht auf Elemente wie Defs, Cursor, Masken, Klippath, Muster aus (diese Elemente sind keine Elemente, oder sie beziehen sich nicht auf andere Elemente.

Hinweis : Die Anzeige- und Sichtbarkeitsattributwerte des untergeordneten Elements beeinflussen nicht das Ergebnis des Schaltelement -Bedingungsbeurteils.

Die Liste der Werte für bedingte Verarbeitungsattribute finden Sie im offiziellen Dokument. Hier ist ein kleines Beispiel:

<RecrequiredFeatures = "http://www.w3.org/tr/svg11/feature#filter"

x = "10" y = "10" Breite = "322" Höhe = "502" Opazität = "0,6"

fill = "schwarz" stroke = "keine" filter = "url (#GBLSHADOW)"/>

<rectX = "10" y = "10" Breite = "322" Höhe = "502" Opacity = "0,6"

fill = "schwarz" stroke = "keine"/>

</switch>

Die Bedeutung dieses Beispiels ist einfach: Der verwendete Browser unterstützt die Filterfunktion und zeichnet dann das obige Rechteck (mit Filterattribut). Wenn die Filterfunktion nicht unterstützt wird, zeichnen Sie das folgende Rechteck.

In der Tat ist das am häufigsten verwendete Attribut die SystemLauge, die die multisprachige Verarbeitungsfähigkeit von Text ist. Zum Beispiel:

</switch>

</svg>

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/