Grundlegende Formen

Es gibt mehrere grundlegende Formen, die für die meisten SVG-Zeichnungen verwendet werden. Der Zweck dieser Formen ist aus ihren Namen recht offensichtlich. Einige der Parameter, die ihre Position und Größe bestimmen, sind angegeben, aber eine Elementreferenz würde wahrscheinlich genauere und vollständigere Beschreibungen zusammen mit anderen Eigenschaften enthalten, die hier nicht behandelt werden. Da sie jedoch in den meisten SVG-Dokumenten verwendet werden, ist es notwendig, ihnen eine Art Einführung zu geben.

Um eine Form einzufügen, erstellen Sie ein Element im Dokument. Verschiedene Elemente entsprechen verschiedenen Formen und erfordern unterschiedliche Parameter, um die Größe und Position dieser Formen zu beschreiben. Einige sind etwas redundant, da sie durch andere Formen geschaffen werden können, aber sie sind alle für Ihre Bequemlichkeit da, um Ihre SVG-Dokumente so kurz und lesbar wie möglich zu halten. Alle grundlegenden Formen sind im folgenden Bild gezeigt.

Der Code, um dieses Bild zu erzeugen, sieht ungefähr so aus:

xml

<svg width="200" height="250" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="none" stroke-width="5"/>
  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="none" stroke-width="5"/>

  <circle cx="25" cy="75" r="20" stroke="red" fill="none" stroke-width="5"/>
  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="none" stroke-width="5"/>

  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
      stroke="orange" fill="none" 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="none" stroke-width="5"/>

  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>

Hinweis: Die Attribute stroke, stroke-width und fill werden später im Tutorial erklärt.

Rechteck

Das <rect>-Element zeichnet ein Rechteck auf dem Bildschirm. Es gibt sechs Grundattribute, die die Position und Form der Rechtecke auf dem Bildschirm steuern. Das Rechteck rechts hat seine rx- und ry-Parameter gesetzt, was ihm abgerundete Ecken verleiht. Wenn sie nicht gesetzt sind, beträgt der Standardwert 0.

xml

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

x: Die x-Position der oberen linken Ecke des Rechtecks.
y: Die y-Position der oberen linken Ecke des Rechtecks.
width: Die Breite des Rechtecks.
height: Die Höhe des Rechtecks.
rx: Der x-Radius der Ecken des Rechtecks.
ry: Der y-Radius der Ecken des Rechtecks.

Kreis

Das <circle>-Element zeichnet einen Kreis auf dem Bildschirm. Es benötigt drei grundlegende Parameter, um die Form und Größe des Elements zu bestimmen.

xml

<circle cx="25" cy="75" r="20"/>

r: Der Radius des Kreises.
cx: Die x-Position des Mittelpunkts des Kreises.
cy: Die y-Position des Mittelpunkts des Kreises.

Ellipse

Ein <ellipse> ist eine allgemeinere Form des <circle>-Elements, bei der Sie den x- und y-Radius (im Allgemeinen als Hauptachse und Nebenachse in der Mathematik bezeichnet) des Kreises separat skalieren können.

xml

<ellipse cx="75" cy="75" rx="20" ry="5"/>

rx: Der x-Radius der Ellipse.
ry: Der y-Radius der Ellipse.
cx: Die x-Position des Mittelpunkts der Ellipse.
cy: Die y-Position des Mittelpunkts der Ellipse.

Linie

Das <line>-Element nimmt die Positionen von zwei Punkten als Parameter und zeichnet eine gerade Linie zwischen ihnen.

xml

<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>

x1: Die x-Position von Punkt 1.
y1: Die y-Position von Punkt 1.
x2: Die x-Position von Punkt 2.
y2: Die y-Position von Punkt 2.

Polylinie

Eine <polyline> ist eine Gruppe von verbundenen geraden Linien. Da die Liste der Punkte ziemlich lang werden kann, sind alle Punkte in einem Attribut enthalten:

xml

<polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/>

points: Eine Liste von Punkten. Jede Zahl muss durch ein Leerzeichen, Komma, EOL oder ein Zeilenumbruchzeichen mit zusätzlichem Leerraum getrennt sein. Jeder Punkt muss zwei Zahlen enthalten: eine x-Koordinate und eine y-Koordinate. So könnte die Liste (0,0), (1,1) und (2,2) als 0, 0 1, 1 2, 2 geschrieben werden.

Polygon

Ein <polygon> ist ähnlich wie eine <polyline>, da es aus geraden Liniensegmenten besteht, die eine Liste von Punkten verbinden. Bei Polygonen verbindet der Pfad jedoch automatisch den letzten Punkt mit dem ersten, wodurch eine geschlossene Form entsteht.

Hinweis: Ein Rechteck ist eine Art Polygon, daher kann ein Polygon verwendet werden, um ein <rect/>-Element zu erstellen, das keine abgerundeten Ecken hat.

xml

<polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/>

points: Eine Liste von Punkten, wobei jede Zahl durch ein Leerzeichen, Komma, EOL oder ein Zeilenumbruchzeichen mit zusätzlichem Leerraum getrennt ist. Jeder Punkt muss zwei Zahlen enthalten: eine x-Koordinate und eine y-Koordinate. So könnte die Liste (0,0), (1,1) und (2,2) als 0, 0 1, 1 2, 2 geschrieben werden. Die Zeichnung schließt dann den Pfad, sodass eine letzte gerade Linie von (2,2) nach (0,0) gezogen würde.

Pfad

Ein <path> ist die allgemeinste Form, die in SVG verwendet werden kann. Mit einem path-Element können Sie Rechtecke (mit oder ohne abgerundete Ecken), Kreise, Ellipsen, Polylinien und Polygone zeichnen. Im Grunde jede andere Art von Formen, Bézier-Kurven, quadratische Kurven und viele mehr.

Aus diesem Grund wird sich der nächste Abschnitt dieses Tutorials auf Pfade konzentrieren. Beachten Sie vorerst, dass es einen einzigen Parameter gibt, der seine Form steuert.

xml

<path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>

d: Eine Liste von Punkten und anderen Informationen darüber, wie der Pfad gezeichnet werden soll. Siehe den Abschnitt Pfade für weitere Informationen.

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden