Einführung in SVG 2D in HTML5 8 – Zusammenfassung der Dokumentstruktur und verwandter Elemente_HTML5-Tutorialfähigkeiten

Viele grundlegende Elemente wurden bereits eingeführt, einschließlich strukturbezogener Kombinationen und wiederverwendbarer Elemente. Hier werden wir die verbleibenden relevanten Elemente in der Dokumentstruktur von SVG kurz zusammenfassen und uns dann mit anderen Funktionen von SVG befassen.
Die Elemente von SVG-Dokumenten können grundsätzlich in die folgenden Kategorien unterteilt werden:
•Animationselemente: animate, animateColor, animateMotion, animateTransform, set;
•Erklärungselemente: desc, metadata, title; •Grafikelemente: Kreis, Ellipse, Linie, Pfad, Polygon, Rechteck; • Strukturelemente: Defs, G, Symbol, Verwendung; Andere Elemente: a, altGlyphDef, clipPath, Farbprofil, Cursor, Filter, Schriftart, Schriftart, Fremdobjekt, Bild, Markierung, Maske, Muster, Skript, Stil, Schalter, Text, Ansicht usw.
Darunter wurden grafische Elemente, Verlaufselemente, Text, Bildelemente und Kombinationen eingeführt. Hier sind mehrere andere Elemente im Zusammenhang mit der Struktur.


SVG-Element anzeigen

Sie können alle anderen Elemente in beliebiger Reihenfolge innerhalb des SVG-Elements platzieren, einschließlich verschachtelter SVG-Elemente.
Die vom SVG-Element unterstützten häufig verwendeten Attribute sind ID, Klasse, x, y, Breite, Höhe, ViewBox, PreserveAspectRatio und verwandte Attribute von Füllung und Strich. Die vom SVG-Element unterstützten Ereignisse werden häufig auch onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload usw. verwendet. Zum SVG-Element gibt es nicht viel zu sagen. Eine vollständige Liste der Attribute und Ereignisse finden Sie später in der offiziellen Dokumentation.

Erklärende Elemente – Desc-Element und Titelelement

Jedes Containerelement (ein Element, das andere Containerelemente oder Grafikelemente enthalten kann, wie zum Beispiel: a, defs, glyph, g, Markierungs-, Masken-, Missing-Glyph-, Muster-, SVG-, Schalter- und Symbolelemente) und Grafikelemente können desc- und title-Elemente enthalten, wobei es sich bei beiden um Hilfselemente zur Erklärung verwandter Situationen handelt, bei denen es sich um Text handelt. Beim Rendern des SVG-Dokuments werden diese beiden Elemente nicht in die Grafik gerendert. Der Unterschied zwischen diesen beiden Elementen ist nicht allzu groß. In einigen Implementierungen wird der Titel als Eingabeaufforderungsinformation angezeigt, sodass der Titel normalerweise an der ersten Position des übergeordneten Elements platziert wird.
Typische Verwendung ist wie folgt:



Code kopieren

Der Code lautet wie folgt: < ;svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="4in"height="3in">

;title>Unternehmensumsätze nach Region< ;/title>

Dies ist ein Balkendiagramm, das

Unternehmensumsätze nach Region zeigt. svg>


Normalerweise sollte das äußerste SVG-Element von einer Titelbeschreibung begleitet werden, damit das Programm besser lesbar ist.


Marker-Marker-Element

Marker definiert grafische Elemente (Pfeile und Mehrpunktmarkierungen), die an einem oder mehreren Scheitelpunkten (Pfad-, Linien-, Polylinien- oder Polygonscheitelpunkten) angebracht sind. Pfeile können durch Anbringen einer Markierung am Start- oder Endpunkt eines Pfads, einer Linie oder einer Polylinie erstellt werden. Mit Multipunktmarkierungen können Markierungen an allen Eckpunkten eines Pfads, einer Linie, einer Polylinie oder eines Polygons angebracht werden. Die Markierung

wird durch das Markierungselement definiert und dann werden einfach die relevanten Attribute (Markierung, Markierungsanfang, Markierungsmitte und Markierungsende) in Pfad, Linie, Polylinie oder Polygon festgelegt. Nehmen Sie ein Beispiel:

Kopieren Sie den Code

Der Code lautet wie folgt:


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

viewBox="0040002000"version="1.1"

xmlns="http://www.w3.org/2000/svg"> ;defs> 3" orient="auto">

Platzieren einer Pfeilspitze am Ende eines Pfades. ;/desc>

Werfen wir einen detaillierten Blick auf Marker-bezogenes Wissen:
1. Marker ist ein Containerelement, das Grafikelemente, Containerelemente, Animationen, Verlaufselemente usw. in beliebiger Reihenfolge speichern kann.
2. Das Markierungselement kann ein neues Ansichtsfenster erstellen: Legen Sie den Wert der viewBox fest.
3. Wichtigere Attribute des Markers:
markerUnits="strokeWidth|userSpaceOnUse"
Dieses Attribut definiert das Koordinatensystem, das von den Attributen markerWidth, markerHeight und marker content verwendet wird. Dieses Attribut verfügt über zwei optionale Werte. Der erste Wert, StrokeWidth, ist der Standardwert, was bedeutet, dass die Einheiten des von den Attributen markerWidth, markerHeight und dem Inhalt der Markierung verwendeten Koordinatensystems dem durch das Stroke-Set festgelegten Wert entsprechen. Breite des Grafikelements, das auf die Markierung verweist.

Im obigen Beispiel beträgt die Breite des Markierungselements beispielsweise 400 und die Höhe 300. Seien Sie jedoch nicht verwechselt. Die vom Pfad im Markierungselement verwendeten Koordinaten sind die neuen Benutzerkoordinaten System, das von der viewBox festgelegt wird.
Ein weiterer Wert dieses Attributs ist userSpaceOnUse, was bedeutet, dass die Attribute markerWidth, markerHeight und der Inhalt des Markers das Koordinatensystem des Grafikelements verwenden, das auf den Marker verweist.
refX, refY: Definieren Sie die Positionskoordinaten des referenzierten Punkts, der mit der Markierung ausgerichtet ist. Im obigen Beispiel ist der referenzierte Punkt beispielsweise der Endpunkt und sollte an der (0,5)-Position der Markierung ausgerichtet sein. Beachten Sie, dass refX und refY das von der viewBox transformierte Endbenutzer-Koordinatensystem verwenden.
markerWidth, markerHeight: Die Breite und Höhe des Markierungsfensters. Dies ist leicht zu verstehen.
orient: definiert den Winkel der Markierungsdrehung. Sie können einen Winkel angeben oder automatisch automatisch zuweisen.
auto bedeutet, dass die positive Richtung der x-Achse gemäß den folgenden Regeln gedreht wird :
a Wenn der Punkt, an dem sich die Markierung befindet, nur zu einem Pfad gehört, ist der positive x -Achsenrichtung der Markierung ist die gleiche wie die Richtung des Pfades. Siehe das Beispiel oben.
b. Wenn der Punkt, an dem sich die Markierung befindet, zu zwei verschiedenen Pfaden gehört, stimmt die positive x-Achsenrichtung der Markierung mit der Winkelhalbierenden des Winkels zwischen den beiden Pfaden überein.
4. Markierungsattribute von Grafikelementen

Wenn ein Grafikelement auf eine Markierung verweisen möchte, muss es verwandte Attribute verwenden, hauptsächlich diese drei: marker-start (setzen Sie die referenzierte Markierung am Startpunkt) , marker-mid (platzieren Sie den referenzierten Marker an allen Punkten außer dem Startpunkt und dem Endpunkt), marker-end (platzieren Sie den referenzierten Marker am Endpunkt). Die Werte dieser drei Attribute können „none“ sein (d. h. nicht auf den Marker verweisen), „marker reference“ (auf einen bestimmten Marker verweisen) und „inherit“ (hierzu muss nicht mehr gesagt werden).
Die Verwendung von Markern können Sie auch dem obigen Beispiel entnehmen.

Skript- und Stilskriptelement und Stilelement
Tatsächlich können grundsätzlich alle Attribute (für alle Elemente, nicht nur Text) mithilfe von CSS einem Element zugeordnet werden, und zwar alle CSS-Eigenschaften sind in SVG-Bildern verfügbar. Sie können das Stilattribut direkt verwenden, um das Element zu formatieren, oder auf das Stylesheet verweisen, um das Element zu formatieren. Stylesheets sollten nicht für XML-Dateien analysiert werden (da sie gelegentlich Zeichen enthalten, die Probleme verursachen können), daher müssen sie in einem XMLCDATA-Abschnitt platziert werden. Das Gleiche gilt für Skripte, die im XMLCDATA-Abschnitt platziert werden müssen. Schauen Sie sich das folgende CSS-Beispiel an:

Kopieren Sie den Code

Der Code lautet wie folgt:

Text 🎜>
< /defs>
Colorscanbepecified ="20"y ="100"font-size="30">bytheir
R >G
Bvalues
orbykeywordssuchas

lightsteelblue,


< /svg>


Sehen Sie sich das Skriptbeispiel noch einmal an:





Kopieren Sie den Code

Der Der Code lautet wie folgt:

Scriptingtheonclickevent


functionhideReveal(evt){
varimageTarget=evt.target;
vartheFill=imageTarget.getAttribute("fill");
if(theFill=='white')
imageTarget.setAttribute("fill","url(#notes)");
else
imageTarget.setAttribute("fill","white");
}
]]>

patternTransform="rotate(15)"
patternUnits="userSpaceOnUse"> ;

Stroke-Width="3"Stroke="Black"/>
Stroke-Width="3"Stroke="Black"/>


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

条件处理-switch元素
条件处理属性是能控制所在元素渲染与否的属性.基本上大多数的元素(特别是图形元素)都可以指定条件处理属性.条件处理属性有3个:requiredFeatures,requiredExtensions和systemLanguage.这些属性就是一组测试，都允许指定一个值列表(前面两个属性是空格隔开的,语言这个属性是使用逗号隔开的),默认值都为true.

SVG的switch元素提供了按指定条件渲染的能力.switch元素是一个容器元素,可以包含图形元素,解释性元素,动画元素,a, ForeignObject,g,image,svg,switch,text,use等元素.switch的的第一个子元素,其他的子元素都会被忽略。这些属性与display属性一样，只会影响直接使用这些属性的元素的渲染，不会影响引用的元素(比如use (Beispiel: a,altGlyph,foreignObject, textPath,tref,tspan,animate,animateColor,animateMotion,animateTransform,set ist eine Datei mit defs,cursor,mask,clipPath,pattern就是引用别的元素)。

注意：子元素的Anzeige和Sichtbarkeit属性值并不影响Schalter元素条件判断的结果.
条件处理属性的取值列表参看官方文档,这里就看一个小例子:

复制代码

代码如下:

x="10"y="10"width="322"height="502"Deckkraft ="0.6"
fill="black"stroke="none"filter="url(#gblurshadow)"/>
fill="black"stroke="none"/>
(带filter属性), 如果不支持filter特性, 就绘制下面的矩形.
其实更多的时候，用的比较多的属性是systemLanguage，就是文本的多语言处理能力。例如:

复制代码

代码如下:

de-HAHA
en-haha





实用参考

：
脚本索引：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/