Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 10   

10.9 Pfeilspitzen - das marker-Element

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.




index  |  Kapitel 10  |  10.8  <<  | 10.9 |  >>  10.10   Tipp zur Erstellung von Pfaden