SVG/ Markierungen

SVG:

Markierungen


SVG
1.1	1.7	9	3	3.2 (teilweise falsch)	4	?	?	2.35 (größtenteils falsch)

Bei Markierungen handelt es sich um Symbole, welche am Anfang, am Ende und an jedem angegebenen Punkt eines Pfades angezeigt werden können. Genauer sind Markierungen anwendbar auf die Elemente path, polygon, polyline und line.

Markierungen sind in der Vollversion von SVG 1.1 zulässig.

Markierungen eignen sich insbesondere dazu, die aktuelle Richtung des Pfades zu kennzeichnen.

Die Graphik für die Markierung wird im Element marker notiert. Dies kann auch animierter Inhalt sein, der dann bei allen dargestellten Markierungen verwendet und animiert wird.

Markierungen können referenziert werden mit speziellen Eigenschaften, marker-start für den Beginn eines Pfades, marker-end für das Ende und marker-mid für alle angegebenen Punkte dazwischen. Die drei Eigenschaften sind auch als Präsentationsattribute verfügbar. Mit einer vierten Eigenschaft marker können alle drei Eigenschaften zusammengefasst werden. Für diese Eigenschaft gibt es kein Präsentationsattribut. Als Präsentationsattribut sind die Eigenschaften also immer einzeln zu notieren. Unter angegebenem Punkt, auch Knoten genannt (englisch: vertex oder node), wird ein Anfangs- oder Endpunkt eines Pfadfragmentes verstanden, nicht etwa ein Kontrollpunkt.

Somit kann eine Markierung nicht an eine beliebige Position entlang eines Pfades gesetzt werden. Die gewünschten Positionen der Markierungen sind also explizit als Pfadpunkte zu notieren.

Eine Verteilung in Anteilen der gesamten Länge eines Pfades ist eher mit dem Element animateMotion möglich, zusammen mit dem Attribut keyPoints und einem geeigneten Zeitablauf, welcher zu einer zeitunabhängigen Positionierung führt.

Element marker

Das Element marker definiert durch den in ihm enthaltenen Inhalt die Graphik, welche als Markierung verwendet wird.

marker hat einen eigenen Anzeigebereich.

Eigenschaften werden vom Elternelement in den marker vererbt, nicht vom referenzierenden Element aus. Das macht es insbesondere schwierig, die Eigenschaften vom referenzierenden Element automatisch zu übernehmen. Dafür wären dann kompliziertere Tricks oder Anordnungen notwendig, insbesondere wenn dieselbe Markierung so für verschiedene Elemente verwendet werden soll (zum Beispiel kann teilweise use in marker verwendet werden).

marker werden wie Symbole niemals direkt angezeigt, sondern nur referenziert.

marker können selbst nicht Ziel von Ereignissen sein.

Die Eigenschaft overflow von marker ist auf 'hidden' voreingestellt. Für ein anderes Verhalten muss die Eigenschaft also notiert werden.

Attribut markerUnits

Mit dem Attribut markerUnits wird angegeben, in welchen Einheiten, in welchem Koordinatensystem die Markierung notiert ist.

Mögliche Werte sind 'strokeWidth' und 'userSpaceOnUse'.

Falls 'strokeWidth' angegeben ist, entspricht der aktuelle Wert von stroke-width des referenzierenden Elementes einer Einheit im Koordinatensystem der Markierung. Dies bezieht sich auf markerWidth, markerHeight und den Inhalt von marker.

Falls 'userSpaceOnUse' angegeben ist, wird die Einheit des aktuellen Koordinatensystems des referenziernden Elementes verwendet.

Falls markerUnits nicht angegeben ist, wird 'strokeWidth' angenommen. Das Attribut ist animierbar.

Attribute refX und refY

Mit den Attributen wird die x- beziehungsweise die y-Koordinate im Koordinatensystem der Markierung angegeben, welcher Punkt als der Punkt verwendet werden soll, der mit den zu markierenden Punkten des referenziernden Elementes übereinstimmen soll.

Der Wert ist jeweils eine Koordinate. Ist eines der Attribute nicht angegeben, wird für dieses fehlende jeweils 0 angenommen.

Die Attribute sind animierbar.

Attribute markerWidth und markerHeight

markerWidth und markerHeight geben Breite und Höhe des Anzeigebereiches der Markierung an.

Der Wert ist jeweils eine nicht negative Länge. Ein negativer Wert ist ein Fehler, der zum Abbruch der Darstellung des Dokumentes führt. Ist mindestens einer der beiden Werte 0, so unterbindet dies die Darstellung der Markierung. Für ein nicht angegebenes Attribut wird 3 angenommen.

Die Attribute sind animierbar.

Attribut viewBox

Das Attribut viewBox gibt eine rechteckige Region an, in welche die Markierung fällt. Das Attribut ist sinngemäß bereits für das Element svg beschrieben.

Das Attribut ist animierbar.

Attribut preserveAspectRatio

Wenn das Seitenverhältnis der viewBox nicht zu width und height passt, kann mit preserveAspectRatio angegeben werden, wie es in den Anzeigebereich einzupassen ist.

Die möglichen Werte sind bereits entsprechend für das Element svg beschrieben.

Das Attribut ist animierbar.

Attribut orient

Mit dem Attribut orient wird angegeben, wie die Markierung bei der Darstellung orientiert wird.

Mögliche Werte sind entweder 'auto' oder ein Winkel. Ein Winkel ist eine Zahl, optional direkt gefolgt von einer Einheit. Mögliche Einheiten sind: 'deg' für Grad (eine Umdrehung 360deg), 'grad' für Neugrad (eine Umdrehung 400grad) oder 'rad' (eine Umdrehung 2π). Ist keine Einheit angegeben, so wird 'deg' angenommen.

Der Wert 0 wird angenommen, wenn das Attribut nicht angegeben ist.

Das Attribut ist animierbar, aber nicht additiv.

Ist ein Winkel angegeben, so bestimmt dieser die Ausrichtung im lokalen Koordinatensystem des referenzierenden Elementes. 0 bedeutet zum Beispiel ein Ausrichtung der x-Achse der Markierung in Richtung der x-Achse des lokalen Koordinatensystems. Bei 90 wird die x-Achse der Markierung in Richtung der y-Achse des lokalen Koordinatensystems ausgerichtet.

Beim Wert 'auto' wird die x-Achse der Markierung entlang der Richtung des Pfades ausgerichtet. Die Richtung bei Ecken bestimmt sich als Mittelwert der Richtungen vor und nach der Ecke. An offenen Enden wird jeweils die Richtung des verfügbaren Pfadsegmentes gewählt. Bei geschlossenen Unterpfaden wird jeweils ein Mittelwert von der ersten und der letzten Richtung des Unterpfades genommen.

Nun gibt es auch Situationen, wo ein Pfadsegment keine Richtung hat. Beim Startpunkt wird zunächst versucht, die Richtung aus dem vorherigen Segment desselben Unterpfades zu ermitteln.
Beim Endpunkt wird zunächst versucht, die Richtung aus dem folgenden Segment desselben Unterpfades zu ermitteln.
Sofern für Anfangs- beziehungsweise für den Endpunkt keine Richtung gefunden wurde, wird die Richtung des End- beziehungsweise Anfangspunktes genommen, sofern dieser eine hat. Ist so immer noch keine Richtung auffindbar, so wird die lokale x-Achse als Richtung angenommen.

Für Z-Kommandos gibt es Sonderregeln. Folgt auf ein Kommando Z kein M oder m, so ist die in den Knoten eingehende Richtung jene, die zum Z-Pfadsegment gehört. Die ausgehende Richtung ist die des ersten Pfadsegmentes des Unterpfades.

Sonst gehört zwar auch die in den Knoten eingehende Richtung zum Z-Pfadsegment, die ausgehende Richtung gehört aber zum nächsten Pfadsegment des Unterpfades.

Markierungseigenschaften


SVG
1.1	1.7	9	3	3.2	4	?	?	2.35

Bei path, line, polyline und polygon können Markierungen mit den Eigenschaften marker-start, marker-end, marker-mid und marker gesetzt werden. marker fasst die anderen drei Eigenschaften zusammen und ist nicht als Präsentationsattribut verfügbar.

Mögliche Werte sind:

inherit: geerbt
none: keine Markierung (Voreinstellung)
Funktionale URI: Fragmentidentifizierer eines Elementes marker

Die Eigenschaften sind animierbar und werden vererbt.

Gibt es den angegebenen Fragmentidentifizierer nicht oder gehört dieser nicht zu einer Markierung, so wird keine Markierung verwendet.

Die Darstellung erfolgt so, dass erst der Pfad dargestellt wird und darauf die Markierung.

Beispiele für Markierungen

Markierungen bei einfachen Pfaden

Markierungen bei einfachen Pfaden
Beispielpfade path, line, polyline und polygon mit Markierungen, rect ohne.

Die Markierungseinheit richtet sich nach der Strichbreite.

Markierungen bei einfachen Pfaden (2)

Markierungen bei einfachen Pfaden (2)
Beispielpfade path, line, polyline und polygon mit Markierungen, rect ohne.

Die Markierungseinheit richtet sich nach dem lokalen Koordinatensystem.

Markierungen, Attribut orient

Markierungen, Attribut orient
Beispielpfade path, line, polyline und polygon mit Markierungen, rect ohne.

5 Sekunden nach Dokumentbeginn wird das Attribut orient animiert, springt begonnen mit 0 Grad jeweils um 30 Grad weiter. Anfangs ist orient 'auto'.

Markierungen, Eigenschaft marker

Markierungen, Eigenschaft marker
Beispielpfade path, line, polyline und polygon mit Markierungen, rect ohne.

Die Markierungen werden mit der Eigenschaft marker angewendet.

Markierung und Vererbung

Markierung und Vererbung
Vererbt werden Eigenschaften in das Element marker vom Elternelement, nicht vom referenzierenden Element. Ist etwas ähnliches wie das letztere erwünscht, sollten die Eigenschaften in einem gemeinsamen Elternelement von beiden notiert werden. Das ist eine Situation, bei der es auch mal inhaltlich sinnvoll sein kann, das Element marker mitten im Quelltext und nicht im Element defs des Hauptelementes svg zu notieren.

Kompliziertere Inhalte von Markierungen lassen sich dann auch mit use-Elementen wiederverwenden.

Wie an der hellen Fläche zu sehen ist, muss der Strich selbst auch nicht unbedingt gemalt sein, damit die Markierungen gesetzt werden können.

Markierung und Eigenschaft overflow

Markierung und Eigenschaft overflow
Mit der Eigenschaft overflow kann festgelegt werden, ob Teile der Markierung außerhalb der viewBox dargestellt werden sollen. Das Beispiel bietet einen Test mit den verschiedenen Werte von overflow. Auch viewBox und refX und refY sind leicht variiert, um Fehler von Darstellungsprogrammen aufzuspüren, denn Implementierungsfehler sind bei Markierungen recht häufig zu finden.

Grau sind die Pfade, blau die Markierungen am Pfad. Diese sind mit gleichen roten Strukturen hinterlegen. Wenn etwas Rotes sichtbar wird, ist die Darstellung fehlerhaft.

Markierungen und Richtungen


SVG
1.1	1.7 (teilweise)	9 (teilweise)	3 (teilweise)	3.2 (teilweise)	4 (teilweise)	?	?	?

Bereits im Kapitel über Pfade wurden Formeln angegeben, wie die Richtung einer Kurve an einer beliebigen Stelle bestimmt werden kann.

Neben den Fällen, die in der kanonischen Parametrisierung relativ einfach zu berechnen sind, gibt es auch jene, die etwas mehr Probleme bereiten können, insbesondere weil ein Kontrollpunkt mit einem zugehörigen Endpunkt des Kurvensegmentes zusammenfällt - oder auch beide Kontrollpunkte. Eigentlich sollten Darstellungsprogramme diese noch relativ harmlosen Fälle problemlos darstellen können, indes Kontrolle ist besser:

Richtungen, wenn Punkte und Kontrollpunkte zusammenfallen

Richtungen, wenn Punkte und Kontrollpunkte zusammenfallen
Richtung von kubischen Pfaden - Kurven, bei denen Kontroll- und Endpunkte übereinstimmen. Die Markierungen in Form von gelben Pfeilen sollen jeweils in Richtung der grünen Striche zeigen, sofern vorhanden, welche die korrekte Richtung des Pfades an den jeweils interessanten Stellen andeuten.

Richtungen, wenn Punkte und Kontrollpunkt zusammenfallen

Richtungen, wenn Punkte und Kontrollpunkt zusammenfallen
Richtung von quadratischen Pfaden - Kurven, bei der Kontroll- mit einem Endpunkt übereinstimmt. Sonst wie beim vorherigen Beispiel.

Problematisch können auch Pfadsegmente der Länge 0 sein. In solchen Fällen muss das Darstellungsprogramm wie beschrieben erst im vorherigen Pfadsegment desselben Unterpfades nach einer Richtung suchen, dann im folgenden.
Es auch möglich, dass gar keine Richtung ermittelt werden kann, weil die Länge des Unterpfades 0 ist, dann wird die Richtung der lokalen x-Achse angenommen.
Auch hier ist Kontrolle besser:

Richtungen und Pfadlänge 0

Richtungen und Pfadlänge 0
Richtungsbestimmung bei Pfadsegmenten der Länge 0. Sonst wie beim vorherigen Beispiel.

Allerdings kann auch der Mittelwert zweier Richtungen gerade 0 werden:

Richtungen und Mittelwert 0

Richtungen und Mittelwert 0
Die Richtungen an den äußeren Ecken haben den Mittelwert 0.

Genaugenommen ist das Verhalten in den betroffenen Ecken jeweils außen undefiniert. Plausibel wäre eine Ausrichtung senkrecht zum Pfad. In vielen Fällen könnte eine Analyse der höheren Ableitungen eine Richtungsinformation bringen, aber nicht in allen, wie bei dem Kreuz in der Mitte. Vermutlich wird ein Autor daher am ehesten mit einer Ausrichtung in Richtung der lokalen x-Achse rechnen müssen.

Auch das Verhalten für Z-Kommandos kann ein Problem für Darstellungsprogramme sein:

Richtungen und Z-Kommando

Richtungen und Z-Kommando (2)

Richtungen und Z-Kommando
Richtungen und Z-Kommando (2)
Bei der zweiten Datei bleibt es dem Leser zur Übung überlassen, die richtigen Richtungen zu ergänzen...

Spannend ist auch die Frage, ob richtig implementiert worden ist, wenn in einer unüblichen Weise Pfadkommandos aufeinandertreffen, also schon eine erlaubte Kombination darstellen, dies aber wohlmöglich nicht ausgiebig getestet wurde:

Richtungen und ungewöhnliche Kommandokombinationen in Pfaden

Eine weitere Möglichkeit, Markierungen an beliebigen Stellen entlang des Pfades anzubringen, wird auch im Kapitel über Animation diskutiert. Dies kann mit dem Element animateMotion und keyPoints geschehen:

keyPoints zur Positionierung von Markierungen

keyPoints zur Positionierung von Markierungen
Die hellgrünen Pfeile werden mit animateMotion und keyPoints in gleichen Abständen entlang des Pfades positioniert. Anders als beim Einsatz von marker können mit animateMotion und keyPoints beliebige Positionen entlang des Pfades als Positionen für Markierungen festgelegt werden.