SVG/Elemente/Grundformen
Sie können in die Zeichenfläche innerhalb eines SVG-Elements Grafikobjekte zeichnen. Hier stellen wir Ihnen die Grundformen (basic shapes) vor.
Inhaltsverzeichnis
Rechteck [Bearbeiten]
Mit rect definieren Sie in SVG ein Rechteck.
Folgende Angaben sind nötig:
x
: horizontale Position der linken oberen Eckey
: vertikale Position der linken oberen Eckewidth
: Breiteheight
: Höhe
<svg viewBox="0 0 870 300">
<rect id="eins" width="200" height="100"/>
<rect id="zwei" x="220" y="20" width="200" height="100"/>
<rect id="drei" x="100" y="150" width="200" height="100" rx="20" ry="20" />
Ihr Browser kann kein SVG.
</svg>
Folgende Angaben sind möglich:
rx
: Abrundung der Ecken in der Horizontalenry
: Abrundung der Ecken in der Vertikalen
Wird nur eine der beiden Angaben angegeben, erhält die andere Angabe deren absoluten Wert. Ist beispielsweise rx=10%
, wird bei fehlendem ry
für dieses ein Wert von 10% der Breite(!) des Viewports angenommen.
<svg>
<rect x="50" y="50" width="300" height="100" rx="20" ry="20" />
</svg>
Kreis [Bearbeiten]
Mit circle definieren Sie in SVG einen Kreis. Folgende Angaben sind nötig:
cx
: horizontale Position des Mittelpunktescy
: vertikale Position des Mittelpunktesr
: Radius
<svg>
<circle id="eins" cx="190" cy="70" r="50" />
<circle id="zwei" cx="100" cy="200" r="20" />
</svg>
Ellipse [Bearbeiten]
Mit ellipse definieren Sie in SVG ein Oval oder Ellipse. Es kann beinahe identisch beschrieben werden wie ein Kreis, nur dass es anstatt eines Radius zwei Werte gibt, welche Breite und Höhe repräsentieren.
Folgende Angaben sind nötig:
cx
: horizontale Position des Mittelpunktescy
: vertikale Position des Mittelpunktesrx
: horizontaler Radiusry
: vertikaler Radius
<ellipse id="eins" cx="70" cy="50" rx="60" ry="40" />
<ellipse id="zwei" cx="150" cy="100" rx="20" ry="60" />
<ellipse id="drei" cx="230" cy="55" rx="50" ry="50" />
Der rote „Kreis“ ist auch eine Ellipse, aber mit gleichem Wert für rx
und ry
.
Linie [Bearbeiten]
Mit line definieren Sie in SVG eine Linie.
Folgende Angaben sind möglich:
x1
: horizontaler Startpunkty1
: vertikaler Startpunktx2
: horizontaler Endpunkty2
: vertikaler Endpunkt
Fehlende Angaben werden als 0 angenommen. Sinnvollerweise muss mindestens eine Angabe gesetzt werden. <line />
ohne Attribute zu verwenden erzeugt einen Punkt (bzw. ein Viertel davon) im Ursprung, sofern stroke-linecap nicht seinen Standardwert butt
hat.
<svg>
<line id="eins" x1="10" y1="10" x2="200" y2="190"/>
<line id="zwei" x1="200" y1="10" x2="200" y2="190" />
</svg>
Statt des bisher verwendeten fill, das bei einer Linie keinen Effekt hat, legen wir hier mit CSS Linienfarbe und -dicke fest.
- festlegen.
Polygonzug [Bearbeiten]
Mit polyline definieren Sie in SVG einen Polygonzug (oder Polylinie), der aus verschiedenen Koordinatenpunkten besteht.
Das einzige Attribut lautet:
points
: enthält alle Punkte der Polylinie
#eins {
stroke: #306f91;
stroke-width: 3;
fill: none;
}
#zwei {
stroke: #306f91;
stroke-width: 3;
fill: #dfac20;
}
<svg>
<polyline id="eins" points="10,10 40,40 10,70 40,100 10,130 40,160 10,190"/>
<polyline id="zwei" points="110,10 140,40 110,70 140,100 110,130 140,160 110,190" />
</svg>
fill="none"
angeben, da ansonsten der Standardwert schwarz für die Füllung verwendet wird.Sie können die Zwischenpunkte eines Polygonzugs oder eines Polygons markieren: SVG/Elemente/Markierungen.
Hinweis
Deshalb verwende ich lieber das path-Element. Hier können Sie Punkte relativ festlegen. Falls Sie die Form anschließend verschieben wollen, müssen Sie nur die Anfangskoordinaten im MoveTo-Kommando ändern.
--Matthias Scharwies (Diskussion) 07:55, 11. Jan. 2020 (CET)Polygon [Bearbeiten]
Mit polygon definieren Sie ein Polygon (Vieleck). Es besitzt wie die Polylinie eine Punktemenge, die ein Objekt beschreibt. Bei einem Polygonzug wird jedoch der Startpunkt nicht mit dem Endpunkt dieser Menge verknüpft, während dies bei einem Polygon der Fall ist.
Das einzige Attribut lautet:
points
: enthält alle Punkte der Polylinie / des Polygons
<svg>
<polygon id="eins" points="100,10 150,190 50,190"/>
<polygon id="zwei" points="300,10 350,190 300,170 250,190" />
</svg>
SVG erlaubt mehrere korrekte Schreibweisen für die Angabe der Punktemenge:
- Punkte dürfen aus positiven und negativen Zahlen bestehen.
- Trennzeichen einer Dezimalzahl ist grundsätzlich der Punkt.
- Die einzelnen Koordinaten werden durch ein Komma oder ein Whitespace-Zeichen voneinander getrennt.
Anwendung[Bearbeiten]
inhaltsleer oder doch mit End-Tag?[Bearbeiten]
Normalerweise sind die Elemente der Grundformen inhaltsleere Elemente, müssen also am Ende noch einen abschließenden Schrägstrich haben.
<svg ...>
<rect x="50" y="50" width="300" height="100"/>
<rect x="50" y="50" width="300" height="100">
<animate … />
</rect>
</svg>
rect
-Element im 2. Beispiel ein Start- und ein End-Tag; der abschließende Schrägstrich aus dem 1. Beispiel fällt weg.
Achtung!