SVG/Elemente/Grundformen

Aus SELFHTML-Wiki
< SVG‎ | Elemente(Weitergeleitet von Polygon)
Wechseln zu: Navigation, Suche

Sie können eine SVG-Datei mit Grafikobjekten füllen. Hier stellen wir Ihnen die Grundformen (basic shapes) vor.

Rechteck[Bearbeiten]

Mit rect definieren Sie in SVG ein Rechteck.

Folgende Angaben sind nötig:

  • x: horizontale Position der linken oberen Ecke
  • y: vertikale Position der linken oberen Ecke
  • width: Breite
  • height: Höhe
Beispiel ansehen …
  <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>
Beachten Sie: Falls sie keine Werte für die x,y-Koordinaten setzen, wird die linke obere Ecke auf 0,0 positioniert.

Folgende Angaben sind möglich:

  • rx: Abrundung der Ecken in der Horizontalen
  • ry: Abrundung der Ecken in der Vertikalen


Beispiel ansehen …
<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 Mittelpunktes
  • cy: vertikale Position des Mittelpunktes
  • r: Radius
Beispiel ansehen …
<svg>
  <circle id="eins" cx="70"  cy="70"  r="50" />
  <circle id="zwei" cx="240" cy="140" r="20" />
</svg>
Beachten Sie: Wenn Sie für cx und cy keine Angaben machen, wird der Kreis um den Punkt 0,0 herum gezeichnet.

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 Mittelpunktes
  • cy: vertikale Position des Mittelpunktes
  • rx: Breite
  • ry: Höhe
Beispiel ansehen …
<svg>
  <ellipse id="eins" cx="70"  cy="50"  rx="60" ry="40" />
  <ellipse id="zwei" cx="250" cy="100" rx="20" ry="60" />
</svg>

Linie[Bearbeiten]

Mit line definieren Sie in SVG eine Linie.

Folgende Angaben sind nötig:

  • x1: horizontaler Startpunkt
  • y1: vertikaler Startpunkt
  • x2: horizontaler Endpunkt
  • y2: vertikaler Endpunkt
Beispiel ansehen …
<svg>
  <line id="eins" x1="10"  y1="10" x2="200" y2="190"/>
  <line id="zwei" x1="200" y1="10" x2="200" y2="190" />
</svg>

Neben dem bisher verwendeten fill legen wir hier mit CSS Linienfarbe und -dicke der Linie fest.

Empfehlung: Alternativ können Sie eine Linie mit
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
Beispiel ansehen …
#eins {
  stroke: #3983ab;
  stroke-width:3px;
  fill: none;
  }
#zwei {
  stroke: #3983ab;
  stroke-width: 3px;
  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>


Beachten Sie: Wenn Sie nur den Polygonzug darstellen wollen, müssen Sie fill="none" angeben, da ansonsten der Standardwert schwarz für die Füllung verwendet wird.

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
Beispiel ansehen …
<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.

Beispiel
<svg width="400" height="200">
  
  <rect x="50" y="50" width="300" height="100"/>
    
</svg>
<svg width="400" height="200">
      
  <rect x="50" y="50" width="300" height="100">
    <animate  />
  </rect>
 
</svg>
Wenn Sie eine Grundform mit SMIL animieren, wird das Animations-Element zum Kind-Element. Deswegen benötigt das rect-Element im 2. Beispiel ein Start- und ein End-Tag; der abschließende Schrägstrich aus dem 1. Beispiel fällt weg.