Ein mit dem marker-Element definierter Marker ist strenggenommen ein Symbol,
das mit einem Ende oder vielen Enden eines
path-Elements, line-Elements,
polyline-Elements oder
polygon-Elements verbunden ist.
Im etwas verständlicherem Sinne ist ein Marker eine Pfeilspitze,
die entweder an einem oder an vielen Enden eines Pfades befestigt werden kann.
Um einem der oben genannten Elemente einen Marker zuzuordnen, können Sie diesen
Elementen die Attribute
-
marker-start - Pfeilspitze am Beginn des Pfades,
-
marker-end - Pfeilspitze am Ende des Pfades, und
-
marker-mid - alle anderen Enden des Pfades
(außer Beginn und Ende)
zuordnen.
Mögliche Werte für diese Attribute sind entweder
eine URI, d.h. eine Referenz auf einen, im
defs-Container, definierten Marker oder
none.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>das marker-Element</title>
<desc>Pfeilspitzen definieren</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:12px;}
polyline {fill:none; stroke:black; stroke-width:1px;}
polygon {fill:none; stroke:black; stroke-width:1px;}
]]>
</style>
<marker id="pf1"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="15" markerHeight="15"
orient="auto">
<path d="M 0,0 l 10,5 l -10,5 z" />
</marker>
<marker id="pf1a"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="15" markerHeight="15"
orient="160">
<path d="M 0,0 l 10,5 l -10,5 z" />
</marker>
<marker id="pf2"
viewBox="0 0 10 10" refX="0" refY="5"
markerWidth="50" markerHeight="50"
orient="auto" >
<path d="M 0,0 C 0,4 6,5 10,5 C 6,5 0,6 0,10 z"
fill="red" stroke="black" stroke-width=".5" />
</marker>
<marker id="pf3"
viewBox="0 0 20 10" refX="10" refY="5"
markerWidth="30" markerHeight="30"
orient="auto">
<path d="M 0,0 L 20,5 L 0,10 z" />
</marker>
</defs>
<polyline points="20,20 50,50 100,50 200,100"
marker-end="url(#pf1)" />
<polyline points="20,70 50,100 100,100 200,150"
marker-mid="url(#pf1)" />
<polyline points="20,120 50,150 100,150 200,200"
marker-start="url(#pf1)" />
<polyline points="20,170 50,200 100,200 200,250"
marker-start="url(#pf1)"
marker-end="url(#pf1)" />
<polyline points="20,220 50,250 100,250 200,300"
marker-start="url(#pf1)"
marker-mid="url(#pf1)"
marker-end="url(#pf1)" />
<polyline points="300,120 400,80 400,100 460,80 500,80"
marker-start="url(#pf1a)"
marker-end="url(#pf2)" />
<polyline points="350,150
400,150
450,200
450,250
400,300
350,300
300,250
300,200"
marker-start="url(#pf3)"
marker-end="url(#pf2)" />
<polygon points="480,300 550,330 480,360"
marker-start="url(#pf2)"
marker-end="url(#pf3)" />
</svg>
Marker werden mit dem marker-Element im Definitionsbereich der SVG Grafik
platziert und mit einer eindeutigen ID versehen.
Innerhalb des marker-Elements können Sie durch einen beliebigen Pfad
eine Pfeilspitze definieren. Im obigen Beispiel wurde für alle Marker ein
path-Element gewählt - es hätte
aber auch eine der 6 SVG Grundformen sein können.
Für das marker-Element gibt es einige wichtige Attribute, deren Bedeutung
nachfolgend erläutert wird.
Das Attribut viewBox.
Mit diesem Attribut legen Sie im weitesten Sinn den sichtbaren Bereich des Markers fest (auf dieses
Attribut wird an anderer Stelle in diesem Tutorial noch eingegangen).
Das Attribut viewBox erwartet 4 Werte, die nacheinander die x-Koordinate, die y-Koordinate,
die Breite und die Höhe des rechteckigen Anzeigebereichs angeben.
Wählen Sie am Besten immer einen viewBox-Bereich, der den Marker genau umfasst.
Die Attribute refX und refY.
Mit Hilfe dieser Attribute bestimmen Sie den genauen Koordinatenpunkt innerhalb eines Markers,
der auf dem Pfadende aufsetzt. Sie können so die genaue Position des Markers in Bezug zum Pfadende
bestimmen.
Die Voreinstellung dieser Attribute ist 0. Das hat zur Folge, dass der Marker mit seiner linken,
oberen Ecke an das Pfadende stößt, was selten gewollt sein wird ;-). Die Verwendung dieser
Attribute ist daher empfehlenswert.
Das Attribut markerUnits.
Dieses Attribut bestimmt welche Maßeinheit für den Marker verwendet werden soll.
Dabei sind strokeWidth und userSpaceOnUse
zulässige Werte für dieses Attribut.
Bei Verwendung von strokeWidth passt sich die Größe der
Pfeilspitze an die Liniendicke des Pfades - der den Marker
referenziert - an.
Bei Verwendung von userSpaceOnUse geschieht dies nicht, d.h. der
Marker wird immer in der gleichen Größe dargestellt.
Die Attribute markerWidth und markerHeight.
Durch diese Attribute können Sie die dargestellte Größe des Markers verändern. Maßeinheit ist die
durch markerUnits festgelegte. Voreinstellung ist 3.
Das Attribut orient.
Mit diesem Attribut legen Sie die Orientierung der Pfeilspitze fest. In der Einstellung
auto übernimmt der user agent diese Aufgabe. Um die Orientierung
selbst festzulegen weisen Sie diesem Attribut einen Winkel zu.
Im obigen Beispiel wurde dies für den Marker pf1a praktiziert.
Wenn Sie dieses Attribut nicht verwenden, wird die Voreinstellung 0 verwendet,
d.h. die Pfeilspitze wird nicht rotiert, sondern immer genau so dargestellt, wie sie definiert wurde.
|