Grundformen des SVG
auch BasisFormElemente
Das ist schon so ein Ding, etwas klassifizieren zu wollen. Mittels <path> werden adäquat wie hier Linien, Liniengruppen und Kurven ebenfalls gerendert. Die Bezeichnung Vektoren wäre besser angebracht, den eine Linie ist auch nur eine Kurve, nur halt gerade. Vieles findet sich dort wieder, etwas anders notiert, in den Grundformen aber identisch. Erst ein Kaskadieren geschlossener Formen wird den Unterschied ausmachen.
| BasisFormElemente / Grafikelemente (Grundformen) | ||
| line Linie | Attribute: "x1 y1 x2 y2"
Linien besitzen keine Fülleigenschaften. Sie werden mit dem stroke-Attribut beeinflusst, wie: stroke="blue" stroke-width="3". Segmentierte Linien: stroke-dasharray="1%, 1%" sind komma-separierte ProzentAnweisungen. Jeder zweite Wert bildet eine Lücke. Mit stroke-linecap werden Linienenden ="butt | round | square" mit stroke-linejoin Eckenform ="miter | round | bevel" bestimmt. Die Linie wird durch ihre Anfangs- und Endpunkte im ViewPort gerendert. |
|
| rect Rechteck | Attribute: "x y width height" für Eckenrundungen steht außerdem "rx ry" zur Verfügung.<svg width="300" height="100" > <rect x="10" y="10" width="130" height="80" stroke="DarkBlue" stroke-width="6" fill="Skyblue" stroke-linejoin="round" /> <rect x="160" y="10" width="130" height="80" rx="20" ry="20" stroke="Teal" stroke-width="1" fill="PaleTurquoise" stroke-dasharray="8%, 2%" /> </svg> |
|
| circle Kreis | Attribute: "cx cy r"Kreis cx: horizontale Position und cy: vertikale Position des Mittelpunktes r: Radius Mit transform="skewX(30)" wird es ein Oval und der Mittelpunkt müsste neu berechnet werden. |
|
| ellipse Ellipse | Attribute: "cx cy rx ry"
cx: horizontale Position und cy: vertikale Position des Mittelpunktes rx: Abstand zum Mittelpunkt ry: Abstand zum Mittelpunkt und sind rx und ry dann gleisch, gibts wieder einen Kreisch. <ellipse cx="75" cy="40" rx="60" ry="30" /> |
|
| polyline Polygonzug | Attribut: "points"Mit dem Polygonzug wird eine komplexe Geradengruppe gezeichnet. Das Attribut fill hat die Eigenschaft "none" erhalten. <polyline points=" 110,160 110,80 210,80 160,10 110,80 210,160 210,80 110,160 210,160" /> |
|
| polygon Polygon | Attribut: "points"Mit dem Vieleck Beispiel „Windrose“ bestehend aus vier PolygonElementen lassen sich geschlossene Formen aus aneinandergereiten Linien erzeugen. Die Reihung der Koordinaten bestimmt die Form. Das Polygon dunkelblau: <polygon fill="DarkBlue" stroke="Black" stroke-width="1" points=" 150,150 120,120 150,0 150,150 180,120 300,150 150,150 180,180 150,300 150,150 120,180 0,150 150, 150 " /> Kann man auch alles im Quellcode sehen. |
|
Da diese Elemente auch als Grafikelemente bezeichnet werden, führe ich sie nicht noch einmal auf.