MDN-Tutorial

Es beginnt mit Arbeitsergebnissen des Tutorials. Dem schließt sich an:

Grundformen
Text in SVG
Linien-Elemente in SVG
Pfade in SVG

Arbeitsergebnisse des Tutorials

Die erste Lektion des Tutorials beginnt mit einem Rechteck:

Dieses Objekt ist hier in eine div-Box mit svg-Code abgebildet.

Der Code bezieht sich auf http://www.w3.org/2000/svg, Version 1.1. Es wird eine (300×200)px-Fläche erzeugt. Recherchiere: baseProfile; full!
Das Tutorial empfieht hier eine bedächtige Codierung.

a doctype declaration as known from (X)HTML should be left off because DTD based SVG validation leads to more problems than it solves

Das erste Objekt ist ein rect-Rechteck: (100×100)%, red.

Darüber liegt ein grüner Kreis mit den Mittelpunktkoordinaten (150,100) und einem Radius von 80.

Der weiße Text schließt den Code ab: Er beginnt bei (150,125), liegt middle, font-size: 60.

Grundformen

SVG kennt einige Grundformen: Rechteck, Kreis, Ellipse, Linie, Linienzug, Polygon.

Siehe auch: Basic Shapes, das 9. Kapitel der SVG 1.1 (2nd Edition)

Es gibt Parameter, die nicht an einzelne Grundformen gebunden sind:

Allgemeine Werte
Wert	Einheit	Bemerkung
x	px	x-Koordinate des obersten linken Punktes
y	px	y-Koordinate des obersten linken Punktes
width	px	Breite des Objektes
height	px	Höhe des Objektes
fill	Farbwert	Füllung des Objektes

Das Rechteck (rectangle)

<rect width="100%" height="100%" fill="red" />

Rechteck
Wert	Einheit	Bemerkung
rx	px	x-Radius der abgerundeten Ecke
ry	px	y-Radius der abgerundeten Ecke

Kreise und Ellipsen

<circle cx="150" cy="100" r="80" fill="green" />

Kreise und Ellipsen
Wert	Einheit	Bemerkung
cx	px	x-Koordinate des Mittelpunkts
cy	px	y-Koordinate des Mittelpunkts
r	px	Radius des Kreises
rx	px	Radius der x-Halbachse (Ellipse)
ry	px	Radius der y-Halbachse (Ellipse)

nach oben | Startseite | Exzerpte → Tutorial (SVG) | Internetworx