Einführung in SVG 2D in HTML5 2 – Einführung und Verwendung des grafischen Zeichnens (grundlegende Formen)_HTML5-Tutorial-Fähigkeiten

Grundformen
SVG bietet viele Grundformen, die direkt verwendet werden können, was viel besser ist als Leinwand. Hören Sie auf, Unsinn zu reden, und schauen Sie sich das Beispiel direkt an:

Kopieren Sie den Code

Der Code ist wie folgt folgt:

Stroke="orange" fill=" transparent" Stroke-Width=" 5"/>
Stroke="grün" fill="transparent" Stroke- width="5"/>

Das von diesem HTML angezeigte Ergebnis ist wie folgt:

In diesem Beispiel werden viele Formen gezeichnet: normales Rechteck, Rechteck mit abgerundeten Ecken, Kreis, Ellipse, gerade Linie, Polylinie, Polygon und Pfad. Dies sind grundlegende grafische Elemente. Obwohl es viele Möglichkeiten gibt, eine Grafik zu zeichnen, beispielsweise kann ein Rechteck mithilfe von rect oder path usw. implementiert werden, sollten wir dennoch versuchen, den Inhalt von SVG kurz, prägnant und leicht lesbar zu halten .

Im Folgenden finden Sie Anweisungen zur Verwendung jeder Form (hier stellen wir nur die Grundattribute vor, die die Form und Position von Grafiken steuern, und Attribute wie die Füllung werden später zusammengefasst).

Rechteck – Rechteckelement
Dieses Element verfügt über 6 Attribute, die Position und Form steuern:
x: die Koordinaten der oberen linken Ecke des Rechteck (Benutzerkoordinatensystem) x-Wert.
y: Der y-Wert der Koordinaten der oberen linken Ecke des Rechtecks ​​(Benutzerkoordinatensystem).
Breite: Rechteckbreite.
Höhe: Rechteckhöhe.
rx: Beim Erreichen des abgerundeten Eckeneffekts der Radius der abgerundeten Ecke entlang der x-Achse.
ry: Beim Erzielen des abgerundeten Eckeneffekts der Radius der abgerundeten Ecke entlang der y-Achse.
Im obigen Beispiel wird beispielsweise der Effekt abgerundeter Ecken erreicht. Sie können auch den Effekt elliptischer Ecken erzielen, indem Sie rx und ry auf unterschiedliche Werte einstellen.

Kreis – Kreiselement
Die Attribute dieses Elements sind sehr einfach und definieren hauptsächlich den Mittelpunkt und den Radius des Kreises:
r: der Radius des Kreis.
cx: X-Wert der Kreismittelpunktkoordinate.
cy: Y-Wert der Kreismittelpunktkoordinate.

Ellipse – Ellipsenelement
Dies ist ein allgemeineres kreisförmiges Element. Sie können die Länge der großen Halbachse und der kleinen Halbachse separat steuern, um unterschiedliche zu realisieren Wenn die beiden Halbachsen gleich sind, kann man leicht davon ausgehen, dass es sich um einen perfekten Kreis handelt.
rx: große Halbachse (x-Radius).
ry: kleine Halbachse (y-Radius).
cx: X-Wert der Kreismittelpunktkoordinate.
cy: Y-Wert der Kreismittelpunktkoordinate.

Gerade Linie – Linienelement
Eine gerade Linie muss den Startpunkt und den Endpunkt definieren:

x1: x-Koordinate des Startpunkts.
y1: Y-Koordinate des Startpunkts.
x2: x-Koordinate des Endpunkts.
y2: Y-Koordinate des Endpunkts.

Polylinie – Polylinienelement
Polylinie definiert hauptsächlich die Endpunkte jedes Liniensegments, daher ist nur eine Sammlung von Punkten als Parameter erforderlich:

Punkte: Eine Reihe von Punkten, getrennt durch Leerzeichen, Kommas, Zeilenumbrüche usw. Jeder Punkt muss zwei Zahlen haben: x-Wert und y-Wert. Die folgenden drei Punkte (0,0), (1,1) und (2,2) können also geschrieben werden als: „0 0, 1 1, 2 2“.

Polygon – Polygonelement
Dieses Element macht einen Schritt mehr als das Polylinienelement und verbindet den letzten Punkt mit dem ersten Punkt, um eine geschlossene Figur zu bilden. Die Parameter sind die gleichen.
Punkte: Eine Reihe von Punkten, getrennt durch Leerzeichen, Kommas, Zeilenumbrüche usw. Jeder Punkt muss zwei Zahlen haben: x-Wert und y-Wert. Die folgenden drei Punkte (0,0), (1,1) und (2,2) können also geschrieben werden als: „0 0, 1 1, 2 2“.

Pfad – Pfadelement
Dies ist das vielseitigste und leistungsfähigste Element, das Sie mit allen anderen Grafiken realisieren können, nicht nur mit der oben genannten Grundform Komplexe Formen wie Bezier-Kurven können ebenfalls verwendet werden, um glatte Übergangsliniensegmente zu erzielen. Es müssen jedoch viele Punkte bereitgestellt werden, und der Vergrößerungseffekt ist nicht gut. Dieses Element steuert Position und Form mit nur einem Parameter:
d: eine Reihe von Zeichenanweisungen und Zeichenparametern (Punkten) kombiniert.

Zeichnungsanweisungen werden in zwei Typen unterteilt: Anweisungen für absolute Koordinaten und Anweisungen für relative Koordinaten. Die in diesen beiden Anweisungen verwendeten Buchstaben sind die gleichen, aber die Großbuchstaben sind unterschiedlich. Die absoluten Anweisungen verwenden Großbuchstaben und die Koordinaten sind ebenfalls absolut Koordinaten; die relativen Anweisungen verwenden die entsprechenden Kleinbuchstaben und Punktkoordinaten stellen Offsets dar.

Anweisungen zum Zeichnen absoluter Koordinaten
Die Parameter dieser Befehlsgruppe stellen absolute Koordinaten dar. Unter der Annahme, dass die aktuelle Position des Pinsels (x0, y0) ist, haben die folgenden absoluten Koordinatenanweisungen folgende Bedeutung:

指令	参数	说明
M	x y	将画笔移动到点(x,y)
L	x y	画笔从当前的点绘制线段到点(x,y)
H	x	画笔从当前的点绘制水平线段到点(x,y0)
V	y	画笔从当前的点绘制竖直线段到点(x0,y)
A	rx ry x-axis-rotation large-arc-flag sweep-flag x y	画笔从当前的点绘制一段圆弧到点(x,y)
C	x1 y1, x2 y2, x y	画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
S	x2 y2, x y	特殊版本的三次贝塞尔曲线(省略第一个控制点)
Q	x1 y1, x y	绘制二次贝塞尔曲线到点(x,y)
T	x y	特殊版本的二次贝塞尔曲线(省略控制点)
Z	无参数	绘制闭合图形，如果d属性不指定Z命令，则绘制线段，而不是封闭图形。

Bewegen Sie den Pinselbefehl M, zeichnen Sie eine gerade Linie: L, H, V und der Schließbefehl Z sind relativ einfach.

Befehl zum Zeichnen eines Bogens: A rx ry x-axis-rotation large-arc-flag Sweep-flag x y
Die Verwendung eines Bogens zum Verbinden von zwei Punkten ist komplizierter und es gibt viele Situationen Dieser Befehl verfügt über 7 Parameter, die verschiedene Attribute der Kurve steuern. Im Folgenden wird die Bedeutung der Werte erläutert:
rx,ry ist die Länge der großen Halbachse und der kleinen Halbachse des Bogens
x-Achsenrotation ist der Winkel zwischen der x-Achse, bei der dies der Fall ist Der Bogen befindet sich in horizontaler Richtung, also auf der x-Achse. Der Winkel der Drehung gegen den Uhrzeigersinn, eine negative Zahl stellt den Winkel der Drehung im Uhrzeigersinn dar.
large-arc-flag ist 1 für Bögen mit großem Winkel und 0 für Bögen mit kleinem Winkel.
Sweep-Flag ist 1, was bedeutet, dass der Bogen vom Startpunkt bis zum Endpunkt im Uhrzeigersinn um die Mitte verläuft, und 0, was die Richtung gegen den Uhrzeigersinn darstellt.
x,y sind die Bogenendkoordinaten.
Auf die ersten beiden Parameter und die letzten beiden Parameter werde ich nicht näher eingehen, sie sind sehr einfach; arc im Beispiel unten Der Unterschied:

Code kopierenDer Code lautet wie folgt:

Der obige HTML-Code zeichnet die folgende Grafik:

Sie können dem Bild entnehmen, dass die unterschiedlichen Rotationsparameter der Ellipse zu unterschiedlichen Richtungen der gezeichneten Bögen führen. Natürlich hat dieser Parameter keinen Einfluss auf einen perfekten Kreis.

Large-Arc-Flag und Sweep-Flag steuern die Größe und Richtung des Bogens in den folgenden Beispielen:

Kopieren Code Der Code lautet wie folgt:

Dieser HTML-Code zeichnet die folgenden Bilder:

Wie oben zu sehen ist, sind diese Parameter tatsächlich die einzigen Parameter, die zur Bestimmung eines Bogens benötigt werden. Wir sehen hier auch, dass die Bögen in SVG komplizierter sind als die in Canvas.


Anleitung zum Zeichnen einer kubischen Bezier-Kurve: C x1 y1, x2 y2, x y Die kubische Bezier-Kurve hat zwei Kontrollpunkte, nämlich (x1, y1) und (x2, y2). Der letzte (x, y) stellt den Endpunkt der Kurve dar. Erleben Sie das folgende Beispiel:

Kopieren Sie den CodeDer Code lautet wie folgt:

< Pfad d="M70 10 C 70 20, 120 20, 120 10" Stroke="black" fill="transparent"/>









Dieses HTML-Snippet zeichnet die folgende Grafik:

Aus dem Obigen können wir ersehen, dass die Kontrollpunkte den Bogen der Kurve steuern.

Spezielle Version der kubischen Bezier-Kurve: S x2 y2, x y

Um eine glatte Kurve zu zeichnen, ist es oft notwendig, die Kurve mehrmals hintereinander zu zeichnen. Um den Übergang zu glätten, ist der Kontrollpunkt der zweiten Kurve zu diesem Zeitpunkt häufig der Abbildungspunkt des Kontrollpunkts der ersten Kurve auf der anderen Seite der Kurve. Diese vereinfachte Version kann derzeit verwendet werden. Hierbei ist zu beachten, dass, wenn vor dem S-Befehl kein anderer S-Befehl oder C-Befehl vorhanden ist, die beiden Kontrollpunkte zu diesem Zeitpunkt als gleich betrachtet werden und bei Verwendung des S-Befehls zu einer quadratischen Bezier-Kurve degenerieren; In einem anderen Fall wird nach dem S-Befehl oder dem C-Befehl der erste Kontrollpunkt des nachfolgenden S-Befehls standardmäßig auf einen Abbildungspunkt des zweiten Kontrollpunkts der vorherigen Kurve gesetzt. Probieren Sie es aus:

Code kopieren

Der Code lautet wie folgt:

Dieses HTML-Fragment zeichnet die folgenden Grafiken:

Der obige S-Befehl verfügt nur über den zweiten Kontrollpunkt und der erste Kontrollpunkt verwendet einen Zuordnungspunkt des zweiten Kontrollpunkts des vorherigen Kurvenbefehls.

Anleitung zum Zeichnen einer quadratischen Bezier-Kurve: Q x1 y1, x y, T x y (spezielle Version der quadratischen Bezier-Kurve)
Nur ​​quadratische Bezier-Kurve Ein Kontrollpunkt (x1, y1) , normalerweise wie unten gezeigt:

Wenn Sie eine kontinuierliche Kurve zeichnen, können Sie auch die vereinfachte Version T verwenden. Wenn vor T ein Q- oder T-Befehl steht, wird der Kontrollpunkt des nachfolgenden T-Befehls standardmäßig auf den Zuordnungspunkt des Kontrollpunkts der vorherigen Kurve gesetzt. Probieren Sie es aus:

Code kopieren

Der Code lautet wie folgt:

Dieses HTML-Fragment wird wie folgt gezeichnet: Grafik:

Wenn dem T-Befehl kein Q- oder T-Befehl vorangestellt ist, wird ebenfalls davon ausgegangen, dass kein Kontrollpunkt vorhanden ist, und es wird eine gerade Linie gezeichnet.

Die Anweisungen zum Zeichnen relativer Koordinaten
haben die gleichen Buchstaben wie die Anweisungen zum Zeichnen absoluter Koordinaten, außer dass sie alle in Kleinbuchstaben geschrieben sind. Die Koordinaten in den Parametern dieses Befehlssatzes stellen relative Koordinaten dar, was bedeutet, dass die Parameter den Versatz vom aktuellen Punkt zum Zielpunkt darstellen. Eine positive Zahl stellt einen positiven Versatz zur Achse dar, und eine negative Zahl stellt a dar Rückwärtsverschiebung. Beim Z-Befehl gibt es jedoch keinen Unterschied zwischen Groß- und Kleinschreibung.

Hier ist zu beachten, dass absolute Koordinatenanweisungen und relative Koordinatenanweisungen gemischt werden können . Manchmal kann das Mischen zu flexibleren Malmethoden führen.

Hinweise zum Zeichnen des SVG-Pfads:
Bitte beachten Sie beim Zeichnen von Grafiken mit Löchern: Die Außenkanten müssen gegen den Uhrzeigersinn und die Innenkanten des gezeichnet werden Löcher Die Reihenfolge muss im Uhrzeigersinn erfolgen. Nur so ist die Füllwirkung der gezeichneten Grafiken korrekt.

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/
Offizielle Dokumentation: http://www.w3.org/TR/SVG11/