| Weitere Artikel aus dem Webentwickler Blog |
| Teilen |  |
 |
 |
HTML - Praxiswissen Teil 2 - Grafiken
HTML5 Praxiswissen - Basisfunktionen von SVG
Einfache SVG-Grafiken, zum Beispiel Balkengrafiken für statistische Verteilungen, lassen sich mit ein paar Grundkenntnissen auch ohne Grafikeditor direkt erzeugen. Deshalb sollen die wichtigsten Gestaltungsfunktionen von SVG hier kurz vorgestellt werden.
Formen zeichnen
Mit SVG können Sie Rechtecke, Kreise, Ellipsen, Polygone (z. B. für Dreiecke, Vielecke, Sterne), Linien, Polylinien (Zickzack-Linien) und Pfade (z. B. für Bézier-Kurven) erstellen. Gezeigt werden hier die ersten fünf dieser Grundformen.
Beispiel
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="40" y="20" width="200" height="40" rx ="5" ry ="5" />
<circle cx="140" cy="140" r="60" />
<ellipse cx="140" cy="240" rx="60" ry="20" />
<polygon points="40,280 240,280 140,360" />
<line x1="20" y1="20" x2="20" y2="380" stroke="black"
stroke-width="3" />
<line x1="10" y1="370" x2="240" y2="370" stroke="black"
stroke-width="3"/>
</svg>
Erläuterung
Alle Elemente für geometrische Grundformen werden in Form von Standalone-Tags notiert, haben also keinen Elementinhalt.
Wenn sich Formen auf Grund ihrer Position und Größe überdecken, überdecken später notierte Formen früher notierte.
Durch einfaches Umstellen der Reihenfolge können Sie die Überdeckung also beeinflussen.
Einfache Formen in SVG
Rechteck
Mit <rect ... /> markieren Sie ein Rechteck. Das x-Attribut gibt den Horizontalversatz der linken oberen Ecke des Rechtecks an. Das y-Attribut gibt den Vertikalversatz der linken oberen Ecke des Rechtecks an. Das width-Attribut gibt die Breite des Rechtecks an. Das height-Attribut gibt die Höhe des Rechtecks an. Wenn das Rechteck abgerundete Ecken haben soll, können Sie mit dem rx-Attribut die horizontale Abrundung und mit dem ry-Attribut die vertikale Abrundung bestimmen. Wenn das Rechteck scharfe Ecken haben soll, lassen Sie die Attribute rx und ry einfach weg.
Kreis
Mit <circle ... /> markieren Sie einen Kreis. Das cx-Attribut gibt den Horizontalversatz des Kreismittelpunktes an. Das cy-Attribut gibt den Vertikalversatz des Kreismittelpunktes an. Das r-Attribut gibt die Größe des Radius an.
Ellipse
Mit <ellipse ... /> markieren Sie eine Ellipse. Das cx-Attribut gibt den Horizontalversatz des Ellipsenmittelpunktes an. Das cy-Attribut gibt den Vertikalversatz des Ellipsenmittelpunktes an. Das rx-Attribut gibt den horizontalen Radius bzw. die halbe Maximalbreite der Ellipse an. Das ry-Attribut gibt den vertikalen Radius bzw. die halbe Maximalhöhe der Ellipse an.
Polygon
Ganzen Artikel lesen...
Stefan Münz, Clemens Gull
Lernen Sie die ganze Vielfalt vom Franzis Buch- und Softwareverlag kennen
