Einführung in SVG 2D in HTML5 - Einführung und Verwendung von Grafikzeichnungen (Basic -Formen)

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

Grundform

SVG liefert viele grundlegende Formen, und diese Elemente können direkt verwendet werden, was viel besser ist als Leinwand. Lassen Sie uns keinen Unsinn sprechen, schauen Sie sich nur die Beispiele an, dies ist die direkteste:

<Svg>

<Polyline -Punkte = "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"

STROKE = "orange" fill = "transparent" Stroke-Width = "5"/>

<Polygon Points = "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"

STROKE = "Green" fill = "transparent" Stroke-Width = "5"/>

</svg>

Die in dieser HTML angezeigten Ergebnisse sind wie folgt:

Dieses Beispiel zeichnet viele Formen: normale Rechtecke, abgerundete Rechtecke, Kreise, Ellipsen, gerade Linien, Polygone und Pfade. Dies sind alles grundlegende grafische Elemente. Obwohl es viele Möglichkeiten gibt, ein Diagramm zu zeichnen, wie z. B. RECT mit Rect oder Pfad implementiert werden kann, sollten wir immer noch versuchen, den Inhalt von SVG kurz und präzise und leicht zu lesen zu halten .

Im Folgenden finden Sie die Anweisungen für die Verwendung jeder Form (es gibt nur die grundlegenden Eigenschaften, die die Form und Position der Abbildung steuern, und die Eigenschaften wie die Füllung werden später zusammengefasst).

Rechteck - RECTEL -Element

Dieses Element hat 6 Eigenschaften, die Positionen und Formen steuern, nämlich:

X: Der x -Wert der Koordinaten (Benutzerkoordinatensystem) der oberen linken Ecke des Rechtecks.

Y: Der y -Wert der Koordinaten (Benutzerkoordinatensystem) der oberen linken Ecke des Rechtecks.

Breite: Rechteckbreite.

Höhe: Rechteckhöhe.

RX: Wenn der abgerundete Eckeffekt erreicht ist, der Radius der abgerundeten Ecke entlang der X-Achse.

RY: Beim Erreichen des abgerundeten Eckeffekts den Radius der abgerundeten Ecke entlang der Y-Achse.

Zum Beispiel wird im obigen Beispiel der abgerundete Eckeffekt erreicht, und Sie können auch den Ellipse -Eckeffekt erreichen, indem Sie RX und RY auf verschiedene Werte setzen.

Kreis - Kreiselement

Die Eigenschaften dieses Elements sind einfach, hauptsächlich, um das Zentrum und den Radius zu definieren:

R: Der Radius des Kreises.

CX: X-Wert der Zentrumkoordinate.

Cy: Der y -Wert der Mittelkoordinate des Kreises.

Ellipse - Ellipse -Element

Dies ist ein allgemeineres kreisförmiges Element. Sie können die Längen der Semi-Major-Achse und der halbmagierenden Achse steuern, um verschiedene Ellipsen zu erreichen. Es ist leicht zu glauben, dass die zwei halbachse gleich sind, es ist ein perfekter Kreis.

RX: Halbmahor-Achse (x Radius).

RY: Semi-Short-Achse (Y-Radius).

CX: X-Wert der Zentrumkoordinate.

Cy: Der y -Wert der Mittelkoordinate des Kreises.

Zeilenelementelement

Eine gerade Linie muss den Startpunkt und den Endpunkt definieren:

X1: Ausgangspunkt Xkoordinate.

Y1: Der Ausgangspunkt Y -Koordinate.

x2: Endpunkt Xkoordinate.

Y2: Die Endpunkt -Y -Koordinate.

Polylinie - Polylinelement

Polylines müssen hauptsächlich die Endpunkte jedes Zeilensegments definieren, sodass nur der Satz eines Punktes als Parameter erforderlich ist:

Punkte: Eine Reihe von Punkten, die durch Räume, Kommas, Newlines usw. getrennt sind. Jeder Punkt muss 2 Zahlen haben: x Wert und Y -Wert. Also können die folgenden 3 Punkte (0,0), (1,1) und (2,2) als: 0 0, 1 1, 2 2 geschrieben werden.

Polygon - Polygonelement

Dieses Element besteht darin, einen weiteren Schritt als das Polylinelement zu machen, den letzten Punkt und den ersten Punkt zu verbinden, um eine geschlossene Figur zu bilden. Die Parameter sind gleich.

Pfad -Pfadelement

Dies ist das allgemeinste und mächtigste Element; Mit diesem Element können Sie jede andere Abbildung nicht nur die obigen grundlegenden Formen, sondern auch komplexe Formen wie die Bezier -Kurve implementieren. Darüber hinaus kann die Verwendung des Pfades reibungslose Übergangsegmente erreichen. Obwohl Polyline auch verwendet werden kann, um diesen Effekt zu erzielen, müssen viele Punkte bereitgestellt werden, und der Effekt ist nicht gut, wenn sie vergrößert werden. Dieses Element steuert Position und Form mit nur einem Parameter:

D: Eine Reihe von Zeichnungsanweisungen und Zeichnungsparametern (Punkte).

Zeichnungsanweisungen sind in zwei Typen unterteilt: absolute Koordinatenanweisungen und relative Koordinatenanweisungen. Die in diesen beiden Anweisungen verwendeten Buchstaben sind gleich, dh der obere und untere Gehäuse sind unterschiedlich. Die absoluten Anweisungen verwenden Großbuchstaben, und die Koordinaten sind ebenfalls absolute Koordinaten. Die relativen Anweisungen verwenden entsprechende Kleinbuchstaben, und die Koordinaten von Punkten stellen Offsets dar.

Absolute Koordinatenzeichnungsanweisung

Die Parameter dieses Anweisungssatzes repräsentieren absolute Koordinaten. Unter der Annahme, dass sich die aktuelle Bürste unter (x0, y0) befindet, repräsentiert die folgende absolute Koordinatenanweisung die Bedeutung wie folgt:

Anweisung	Parameter	veranschaulichen
M	xy	Bewegen Sie die Bürste auf den Punkt (x, y)
L	xy	Das Pinsel zeichnet Liniensegment vom aktuellen Punkt bis zum Punkt (x, y)
H	X	Das Pinsel zeichnet das horizontale Liniensegment vom Strompunkt bis zum Punkt (x, y0)
V	y	Das Bürsten zeichnet das vertikale Liniensegment vom Strompunkt bis zum Punkt (x0, y)
A	Rx Ry X-Achse-Rotation Large-Arc-Flag-Sweep-Flag XY	Die Bürste zeichnet einen Bogen vom aktuellen Punkt bis zum Punkt (x, y)
C	x1 y1, x2 y2, xy	Die Bürste zeichnet eine kubische Bezier -Kurve vom Strompunkt bis zum Punkt (x, y)
S	x2 y2, xy	Spezialversion der kubischen Bezier -Kurve (der erste Kontrollpunkt wird weggelassen)
Q	x1 y1, xy	Zeichnen Sie eine quadratische Bezier -Kurve zum Punkt (x, y)
T	xy	Spezielle Version der quadratischen Bezier -Kurve (Kontrollpunkte weggelassen)
Z	Keine Parameter	Zeichnen Sie eine geschlossene Figur, und wenn das D -Attribut den Befehl Z nicht angibt, zeichnen Sie das Liniensegment anstelle der einschließenden Abbildung.

Bewegen Sie den Bürstenbefehl m, zeichnen Sie den Zeilenbefehl: L, H, V und schließen Sie den Befehl z sind relativ einfach; Das Folgende ist ein Fokus auf die wenigen Anweisungen zum Zeichnen der Kurve. ARC Zeichnungsanweisung: Eine RX Ry X-Achse-Rotation mit großer ARC-Flag-Sweep-Flag XY

Es ist komplizierter, 2 Punkte mit einem Bogen zu verbinden, und es gibt viele Situationen, sodass dieser Befehl 7 Parameter enthält, die jedes Attribut der Kurve steuern. Das Folgende erklärt die Bedeutung des numerischen Wertes:

rx, ry ist die Länge der Halbmahor-Achse und der Halbscheißerachse des Bogens

Die X-Achse-Rotation ist der Winkel zwischen der x-Achse und der horizontalen Richtung, in der sich dieser Bogen befindet, dh der gegen den Uhrzeigersinnige Drehwinkel der x-Achse, und die negative Zahl repräsentiert den Drehwinkel im Uhrzeigersinn.

Groß-ARC-FLAG ist 1, um einen großen Winkelbogen und 0 darzustellen, um einen kleinen Winkelbogen darzustellen.

Die Sweep-Flag ist 1, was den Bogen vom Startpunkt bis zum Endpunkt im Uhrzeigersinn um das Zentrum darstellt, und 0 repräsentiert die gegen den Uhrzeigersinn.

x, y sind die Bogen -Terminalkoordinaten.

Ich werde nicht über die ersten beiden Parameter und die letzten beiden Parameter sprechen, es ist sehr einfach. Sprechen wir über die drei Parameter in der Mitte:

X-Achse-Rotation repräsentiert den Rotationswinkel und erlebt die Unterschiede in den Bögen im folgenden Beispiel:

<Svg>

<Pfad d = "M10 315

L 110 215

A 30 50 0 0 1 162.55 162.45

L 172.55 152.45

A 30 50 -45 0 1 215.1 109,9

L 315 10 "Stroke =" schwarz "fill =" grün "Stroke-Width =" 2 "FILL-OPACITY =" 0,5 "/>

</svg>

Das HTML oben zeichnet die folgende Abbildung:

Aus der Abbildung können wir sehen, dass die verschiedenen Ellipse -Rotationsparameter zu unterschiedlichen Richtungen des gezogenen Bogens führen. Natürlich hat dieser Parameter keinen Einfluss auf den perfekten Kreis.

Large-Arc-Flag- und Sweep-Flag-Flag-Steckdose steuern die Größe und Richtung des Bogens und erleben die Unterschiede im Bogen im folgenden Beispiel:

<Svg>

<Pfad d = "M80 80

A 45 45, 0, 0, 0, 125 125

L 125 80 Z "fill =" grün "/>

<Pfad d = "M230 80

A 45 45, 0, 1, 0, 275 125

L 275 80 Z "fill =" rot "/>

<Pfad d = "M80 230

A 45 45, 0, 0, 1, 125 275

L 125 230 Z "fill =" lila "/>

<Pfad d = "M230 230

A 45 45, 0, 1, 1, 275 275

L 275 230 Z "fill =" blau "/>

</svg>

Diese HTML zeichnet die folgenden Bilder:

Aus dem obigen Punkt können wir sehen, dass diese Parameter tatsächlich die einzigen Parameter sind, die zur Bestimmung eines ARC -Abschnitts erforderlich sind. Hier ist auch zu sehen, dass die Bögen in SVG komplizierter sind als die in Leinwand.

Zeichnen von Kubikbezier -Kurven Anweisungen: C x1 y1, x2 y2, xy

In der Kubikbezier -Kurve gibt es zwei Kontrollpunkte, nämlich (x1, y1) und (x2, y2), und die letzte (x, y) repräsentiert den Endpunkt der Kurve. Erleben Sie die folgenden Beispiele:

<Svg>

</svg>

Dieser HTML -Snippet zeichnet die folgende Abbildung:

Aus dem obigen können wir sehen, dass der Steuerpunkt den Radian der Kurve steuert.

Spezielle Version der kubischen Bezier -Kurve: SX2 Y2, xy

Um eine glatte Kurve zu zeichnen, muss die Kurve mehrmals mehrmals kontinuierlich zeichnen. Zu diesem Zeitpunkt ist der Kontrollpunkt der zweiten Kurve häufig der Mapping -Punkt des ersten Kurven -Steuerpunkts auf der anderen Seite der Kurve, um den Übergang zu glätten. Diese vereinfachte Version kann zu diesem Zeitpunkt verwendet werden. Es sollte hier angemerkt werden, dass die beiden Kontrollpunkte, wenn es keine anderen Anweisungen oder C -Anweisungen vor der S -Anweisung gibt, als gleich angesehen und in die quadratische Bezier -Kurve degeneriert werden. Wenn die S -Anweisung nach einer anderen S- oder C -Anweisung verwendet wird, wird der erste Kontrollpunkt der nachfolgenden S -Anweisung standardmäßig auf einen Zuordnungspunkt des zweiten Steuerpunkts der vorherigen Kurve eingestellt. Lassen Sie uns es erleben:

<Svg>

</svg>

Dieses HTML -Fragment wird wie folgt gezeichnet:

Der obige S -Befehl hat nur einen zweiten Kontrollpunkt, und der erste Steuerpunkt verwendet einen Zuordnungspunkt des zweiten Kontrollpunkts des vorherigen Kurvenanweisung.

Zeichnen quadratischer Bezier -Kurvenanweisungen: QX1 Y1, XY, T XY (Spezielle Version der quadratischen Bezier -Kurve)

Die quadratische Bezier -Kurve hat nur einen Kontrollpunkt (x1, y1), der normalerweise in der folgenden Abbildung dargestellt ist:

Wenn Sie kontinuierlich eine Kurve zeichnen, können Sie auch die vereinfachte Version T verwenden. In ähnlicher Weise wird der Steuerpunkt des anschließenden T -Befehls t, wenn T erst vor Q- oder T -Befehl ist, standardmäßig auf den Zuordnungspunkt des Steuerpunkts der vorherigen Kurve eingestellt. Lassen Sie uns es erleben:

<Svg>

</svg>

Dieses HTML -Fragment wird wie folgt gezeichnet:

In ähnlicher Weise wird der Befehl t dem Befehl T nicht vorausgeführt, dass es keinen Kontrollpunkt gibt und die gezogene Linie eine gerade Linie ist.

Relative Koordinatenzeichnungsanweisung

Die Buchstaben der absoluten Koordinatenzeichnungsanweisung sind gleich, außer dass sie alle Kleinkoffer sind. Die an den Koordinaten in den Parametern dieses Anweisungssatzes beteiligten Parameter repräsentieren relative Koordinaten, was bedeutet, dass die Parameter den Offset vom aktuellen Punkt zum Zielpunkt darstellen. Eine positive Zahl repräsentiert den positiven Versatz zur Achse, und eine negative Zahl repräsentiert den umgekehrten Offset. Für Z -Anweisungen gibt es jedoch keinen Unterschied in den Fällen.

Es ist hier zu beachten, dass absolute Koordinatenanweisungen und relative Koordinatenanweisungen gemischt verwendet werden können . Manchmal kann gemischter Gebrauch zu flexibleren Zeichenmethoden führen.

Anmerkungen zur SVG -Pfadzeichnung:

Wenn Sie eine Figur mit Löchern zeichnen, sollten Sie darauf achten: Die Zeichnung der Außenkanten muss gegen den Uhrzeigersinn sein, und die Reihenfolge der Ränder der Löcher im Haus muss im Uhrzeigersinn sein. Nur der auf diese Weise gezogene grafische Fülleffekt ist 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/

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