Grafikelemente
Das Grafikelement <path>
Einen Elementenbaum als Strukturierungsmodell darzustellen, widme ich mich hier. Das habe ich mir beginnend einfacher vorgestellt. Somit wird es keine abgeschlossene Arbeit. Ich füge in die Übersicht nach und nach das ein, was ich dann auch anhand von Beispielen beschreiben kann.
| FormElement | |||
| Element <path> | Das Pfad-Element ist ein generisches Element, um eine Form zu definieren. Alle grundlegenden Formen können mit einem Pfad-Element angelegt werden. Mit dem Attribut d wird die Form bestimmt. | ||
| Alle Kommandos können groß als auch klein geschrieben werden. Versalien kennzeichnen die Positionen aufeinander folgender Koordinaten. Mit Minuskeln wird die auszuführende Distanz zur folgenden Angabe im Koordinatensystem definiert. | |||
| Wie für alle Grundformen sind auch segmentierte Linien: stroke-dasharray="1%, 1%" (komma-separierte ProzentAnweisungen. Jeder zweite Wert bildet eine Lücke.), stroke-linecap für Linienenden ="butt | round | square" und stroke-linejoin Eckenform ="miter | round | bevel" einsetzbar. | |||
| M (MoveTo) | Setzt den StartPunkt fest. | d="M 5 10" Der Startpunkt wird von links oben auf 5px nach rechts und 10px nach unten gesetzt. |
|
| Geraden | L/l (LineTo) | Zeichnet eine Linie vom Startpunkt/vorherig angegebem Punkt zur angegebenen Koordinate.
<path d="M 1 1
L 100 40
L 200 1
L 1 1"
fill="orange" stroke="black" stroke-width="1" />
|
Mit der dritten Angabe für die L-Koordinate entfällt das Schließen der Form. Wird auf diese letzte Angabe verzichtet, muss die Form mit Z geschlossen werden. (d="M 1 1 L 100 40 L 200 1 Z") Auf diesen Vektor hat dann stroke keinen Einfluss. |
| H/h (Horizontal LineTo) |
Zeichnet von vorheriger Koordinate aus eine horizontale Linie
<path d="M 40 38 H 200" fill="none" stroke="blue" stroke-width="2" /> <path d="M 0 68 h 200" fill="none" stroke="red" stroke-width="2" /> Länge blaue Linie H 200-40=160px rote Linie h = 200px |
||
| V/v (Vertical LineTo) |
Zeichnet von vorheriger Koordinate aus eine vertikale Linie
<path d="M 1 1 V 40" fill="none" stroke="blue" stroke-width="2" /> |
Das ist adäquat zum Vorherigen. Es wird nur eine Senkrechte gezogen. | |
| Z/z (ClosePath) | Schließt die Form. Nicht geschlossene Formen mit Füllungen schließen das Objekt optisch, jedoch ohne Rand. Erst mit der Schließanweisung wird auch der Rand gerendert. |
insofern nicht von Hand geschlossen. | |
| Bézier-Kurven | |||
| C/c (CurveTo) | Zeichnet vom AusgangsPunkt aus eine Bézier-Kurve
Pfad mit kubischer Bézier-Kurvenform <path d="M 5,150 C 5,10 305,10 305,150" /> Positionierung der Punkte durch Kordinatenbestimmung (C) Die Kurvenbeschreibung benötigt für jede Koordinate einen Kontrollpunkt. |
||
| S/s (Shorthand/Smooth CurveTo) |
Im Gegensatz zu bekannten Grafikprogrammen werden für einen weichen Kurvenverlauf keine zwei Kontrollpunkte benötigt. Hier wird ein Kontrollpunkt wie eine Tangente zum Vorgänger aus dem Kurvenpunkt gezogen.
<path d="M 5,150
S 55, 0 150,80
S 205,160 305,80" />
Es folgt die relative Angabe mit „s“ (gelbe Kurve in der grünen) .
<path d="M 5, 150
s 50,-150 100,-70
s 100, 80 200, 0" />
Mir zumindest wird jetzt erst klar, was die Aussage betrifft, dass sich die Kurve aus den Koordinaten des Vorgängers berechnet.
|
||
| Q/q (CurveTo) | Zeichnet vom AusgangsPunkt aus eine Bézier-Kurve
Pfad mit quadratischer Bézier-Kurvenform
<path d="M 5, 200
q 70,-200 150,0
q 70, 100 150,0" />
Positionierung der Punkte durch Abstandsbestimmung (kleinbuchstaben). Der einzige Kurvenpunkt stellt sich in diesem Fall als Eckpunkt heraus. Von ihm aus gesehen wird durch den 2. Kontrollpunkt die Kurve geknickt. Um einen weichen Übergang zu erreichen, bedarf es dann doch Rechen- oder Frickelarbeit.Die Darstellung mit Punkten und Tangenten dient nur der Visualisierung. Das wird niemand in seine Präsentation einarbeiten. Den einen oder anderen wird die Einarbeitung wohl abschrecken. |
||
| T/t (Shorthand/Smooth Quadratic Bézier CurveTo) |
Zeichnet von vorausgehender Kurvenanweisung Q/q aus eine Bézier-Kurve. Dies ist eine grundlegende Voraussetzung. Die Anweisung benötigt nur eine Koordinate wie für Q1: t 100,-20 (weißer Vektor) zu sehen. Die Ausformung spiegelt sich aus dem Vektor KP1 Q1, ist gestrichelt stahlblau von Q1 nach VP1 und der Endpunkt wirkt wie ein virtueller Kontrollpunkt. Analog die weiteren Anweisungen.
<path d="M 10,150
Q 30, 0 50,80
t 100,-20
Q 200, 0 250,60
t -50,120" />
Ein wenig Hardcore ist das schon, aber schöne weiche Kurven werden erzeugt.
|
||
| A/a (Elliptical Arc) | Die elliptische Bogenkurve
Der Pfad einer Teilumrandung einer Ellipse |
<path d="M 299,0 A 50 75 0 1 1 100,100" style="stroke:Green;" />Eine KontrollEllipse: <ellipse cx="200" cy="53" rx="105" ry="155" stroke="gold" stroke-width="1" fill="none" /> habe ich darüber gelegt, um eine Vorstellung zu erhalten. |
|
Das Grafikelement <text>
Und noch einmal: Text im Element <text> ist nicht für ellenlange Beschreibungen geeignet. Überschriften, Bildunterschriften und irgendwelche Hinweise, die sich innerhalb der Abmessungen der viewBox befinden - alles klar! Für typografisch gestaltete Aufmacher/Startseiten bietet das hier allerdings ein großes Spielfeld. So etwas bekommt man nur mir professionellen Layoutprogrammen als Werkzeug in die Hand. Dann macht das auch Freude.
Als solches betrachte ich dies. Nun muss ich auch mein Slogan anbringen: „Macht endlich Schluss mit den ewig langweiligen Überschriften im Web!“
| Element | ||
| Attribute global | Präsentationsattribute
class style transform Gestaltung mit grafischen Elementen |
|
| Attribute spezisch | x y dx dy text-anchor rotate | |
| Kindelemente | <tspan>, <tref> und <textpath> | |
| <text> | Texte können durch Attribute mittels deren Eigenschaften formatiert werden. |
|
| <svg width="330" height="60" class="svg"> <g style="font-family:verdana; font-size:14px; fill:black"> <text x="0" y="15">Es ist nur einzeiliger Text möglich.</text> <text x="20" y="35">Umbrüche scheitern in diesem Element.</text> </g> </svg> |
Das Gruppierungselement <g> übernimmt die Formatierung für seinen Gruppeninhalt. | |
Das kann zum einen über Klasseneigenschaften erreicht werden, Direktformatierung im Element als auch im Definitionsabschnitt <defs>
<style type="text/css"><![CDATA[
Element, Klasse, Id {...}
]]></style>
|
||
| Element <tspan> | Also ... (Pause) als Kindelement von <text> lassen sich allgemeine Text-Eigenschaften übertragen. Für <tspan>-Elemente muss die x-Position angegeben werden, um nicht am Ende des vorherigen Kindelementes sich zu positionieren - im Gegensatz zu <text>, dass dann die Position "0" für die Horizontale interpretiert. Für fehlendes y gilt: verticale Positionierung auf vorausgehendes Element. x und y verhalten sich nicht relativ zum Elternelement, die Angaben sind absolut :-( ! | |
QuellCode für die Anwendung <text> und <tspan>
| 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<svg width="330" height="160">
|
| Transformationen lassen sich nicht anwenden. Frage: ja, muss es das können, wenn das <text> kann? Nöö! Also gut. Fazit: Machs gleich mit dem <text>-Element. |
||
| Element <tref> |
<defs>
<text id="RefT">Referenztext im <defs>-tag</text>
</defs>
<text x="10" y="30" font-size="28" fill="Azure"
style="font-family:Times;" >
<tref xlink:href="#RefT"/>
<tspan x="20" y="70" font-size="24" >
Das ist nichts für Browser!</tspan>
</text>
|
Mit diesem Element kann kein Browser etwas anfangen! Probe auf: www.w3.org/TR/SVG/text.html#TRefElement |
| Element <textPath> |
Holla die Waldfee. Hier sollte genau bedacht werden, ob man sich darauf einlässt. Zwei Beispiele!
1.: Das tut meine Augen weh! Da hilft selbst bei Profiprogrammen der optische Zeichenausgleich nicht weiter. Da muss von Hand eine Spationierung problematischer Zeichenabstände vorgenommen werden. Dafür hält das SVG-Modell das Attribut <dx> bereit. 2.: <text dx="0 0 0 0 0 -2 0 0 0 3 1 1 0 0 0 0 0 -2 0 0 0 0 3 8 1 0 0 0 0 0 2 0 1 1"> Der Abstand jedes Zeichens wird definiert. Immer noch nicht besonders gut anzuschauen. Dann muss man halt einen geeigneteren Pfadverlauf konstruieren. Fazit: Vorher überlegen was man will und kann! |
|
1.: QuellCode für die Anwendung <text> auf <path>
| 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
<svg width="330" height="100" id="b2">
|
2.: QuellCode gleiche Abbildung aber mit dem „quasi-Kerning“-Attribut dx="..."
| 172 173 174 175 176 177 |
<!-- D e r _ T e x t _ w i r d _ a m _ P f a d _ a u s g e r i c h t e t ! -->
|
| Eingedenk dass es sich immer um eine überschaubare Textmenge handelt, ist die Bildung von „Kerningpaaren“ mit dem Verschiebungsattribut dx grundsätzlich zu überlegen. Bei großer Schriftabbildung fällt auf, dass ein e nicht das T unterschneiden will, wie im Beispiel. Soll eine Headline gestaltet werden und diese überschreitet notwendiger Weise 24px, gehört sich auch diese typografische Gestaltungsarbeit, sonst bleibt das nur Text in den Computer gekloppt. Damit zeign mer, dass wir auch vom Handwerk was verstehen. |
||
| Attribute: | Wie im CSS, aber Abweichungen der Syntax beachten! Mit color für die Schriftfarbe kommt man nicht an, das ist nur mit fill:"" umzusetzen. Dazu ist für die Schriftumrandung mit stroke eine zusätzliche Attributgruppe gegeben. stroke:"Randfarbe" stroke-width:"Randdicke" auch Dezimal angebbar ".5" Weitere Attribute wie kerning="" (wird noch garnicht von Browsern unterstützt) letter-spacing="" (teilweise und wo bitte ist der Unterschied zu kerning?) sind zu überlegen, wenn diese Unterstüzung finden. |
Unterschneidungen am Beispiel Versalien mit dem dx-Attribut
L T A V A W
dx="0 -3 -2 -8 -6 -6 ">
text.versal { font-family:AmericanTypewriterM; font-size:56px; fill:Orange; stroke:DarkRed; stroke-width:.5;} |
| weiteres: | Auf die Gestaltung mit grafischen Elementen gehe ich in „Beschneidungspfad Maskierung“ ein. | |