SVG/Tutorials/Markierungen

Aus SELFHTML-Wiki
< SVG‎ | Tutorials
Wechseln zu: Navigation, Suche

Mit dem marker-Element können Sie Symbole festlegen, die Start-, End- und Zwischenpunkte eines Pfades, einer Linie, eines Polygonzuges oder eines Polygons markieren. Genau wie bei symbol können dies beliebig viele Kindelemente sein.

Allgemeines

Beispiel ansehen …
    <defs>
      <marker id="markerAnfang" markerWidth="7" markerHeight="7" refx="4" refy="4">
        <rect x="1" y="1" width="5" height="5" />
      </marker>
   
      <marker id="markerKreis" markerWidth="8" markerHeight="8" refx="4" refy="4">
        <circle cx="4" cy="4" r="3" />
      </marker>

      <marker id="markerPfeil" markerWidth="130" markerHeight="13" refx="2" refy="6">
        <path d="M2,2 v8 l8,-4z "/>
		<text x="15" y="10" stroke="none" fill="#c32e04">Ziel</text>
      </marker>
    </defs>

    <path d="M20,10 v100 h100"
          style="marker-start: url(#markerAnfang);
                 marker-mid: url(#markerKreis);
		 marker-end: url(#markerPfeil);
                "
           />

    <path d="M20,150 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
          style="marker-start: url(#markerAnfang);
                 marker-mid: url(#markerKreis);
		 marker-end: url(#markerPfeil);
                "
    />

Die Pfade erhalten an Start-, Zwischen- und Endpunkten Markierungen.


markerUnits

Für die Formatierung des marker-Elements stehen Ihnen folgende Attribute zur Verfügung:

  • markerheight: Höhe des Viewports des marker-Elements
  • markerwidth: Breite des Viewports des marker-Elements
  • markerUnits: legt die Berechnungsgrundlage für die weiteren Werte fest:
    • strokeWidth: bezieht sich auf die Dicke der Randlinien
    • userSpaceOnUse: legt fest, dass die "normalen" Pixel gelten
  • refX: Bezugspunkte des marker-Elements
  • refY: Bezugspunkte des marker-Elements

Wenn die Bezugspunkte refX und refY nicht gesetzt werden, wird ein Wert von 0,0 angenommen, sodass der Kreis seinen Mittelpunkt in der linken oberen Ecke hätte und dadurch nur teilweise sichtbar wäre.

Beispiel ansehen …
path {
  stroke: #666;
  fill:none;
  stroke-width:20px;
}

marker {
  stroke: #000;
  fill:url(#verlauf1);
} 

#eins {
  stroke-width: .05px;
}

#zwei {
 stroke-width: 1px; 
}
  <marker id="eins" markerWidth="22" markerHeight="22" markerUnits="strokeWidth" refx="1" refy="1">
    <circle cx="1" cy="1" r=".5" />
  </marker>

  <marker id="zwei" markerWidth="22" markerHeight="22" markerUnits="userSpaceOnUse" refx="10" refy="10">
    <circle cx="10" cy="10" r="9" />
  </marker>
Obwohl die Markierungen beider Pfade gleich aussehen, müssen in der Standardeinstellung markerUnits="strokeWidth" alle Werte unter Bezug der Strichdicke umgerechnet werden. Vergleichen Sie die Werte der Pfade #eins und #zwei. Während das marker-Symbol von Pfad #eins eine Strichdicke von 0.05px hat, weil der Bezugswert die Strichdicke des Pfades mit 20px Breite ist, sind die Werte für den Pfad #zwei normale Pixelwerte.
Empfehlung: Verwenden Sie markerUnits="userSpaceOnUse", damit Sie mit den gewohnten Pixelwerten rechnen können.

orient

Im ersten Beispiel entspricht die Lage der End-Markierungen nicht dem Verlauf des Pfades. Mit dem orient-Attribut können Sie dies anpassen.

Folgende Einstellungen sind möglich:

  • auto: automatische Ausrichtung am Verlauf des Pfades
  • auto-start-reverse: automatische Ausrichtung wie bei auto, außer beim Startpunkt, der um 180° gedreht ist, sodass ein einfacher Pfeil in die (jeweils) richtige Richtung zeigt (<---->)
  • Zahl: Angabe eines Winkelmaßes
Beispiel ansehen …
    <defs>
      <marker id="markerAnfang" markerWidth="7" markerHeight="7" refx="4" refy="4">
        <rect x="1" y="1" width="5" height="5" />
      </marker>
 
      <marker id="markerPfeil" markerWidth="130" markerHeight="13" refx="2" refy="6">
        <path d="M2,2 v8 l8,-4z "/>
      </marker>
	  
      <marker id="markerPfeilAuto" markerWidth="130" markerHeight="13" refx="2" refy="6" orient="auto">
        <path d="M2,2 v8 l8,-4z "/>
      </marker>
    </defs>
 
    <path d="M20,10 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
          style="marker: url(#markerPfeil); marker-start: url(#markerAnfang);"
           />
 
    <path d="M20,150 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
          style="marker: url(#markerPfeilAuto); marker-start: url(#markerAnfang);"
          />
Der untere Pfad hat automatisch ausgerichtete Markierungen. Die Markierungen für Zwischen und Endpunkte werden mit dem marker-Attribut gesetzt, das dann für den Startpunkt mit marker-start wieder überschrieben wird.

marker-knockout-left, marker-knockout-right

In SVG2 soll es ein neues marker-knockout-Attribut geben, mit der Sie einfach eine Form als Markierung aus dem Strich des Pfades herausschneiden können. Auf der w3.org-Seite finden Sie eine Grafik mit Beispielen.[1]

Folgende Werte wären möglich:

  • knockout-offset Länge
  • knockout-shape: Form

Markierungen referenzieren

Nachdem die Markierungen definiert sind, können sie beliebig referenziert werden.

Folgende Attribute sind möglich:

  • marker: setzt eine Markierung für alle Punkte, kann aber durch nachfolgende Attribute überschrieben werden:
  • marker-start: Startpunkt
  • marker-mid: Zwischenpunkt
  • marker-end: Endpunkt


Beispiel ansehen …
    <path d="M20,10 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
          style="marker: url(#markerPfeil); marker-start: url(#markerAnfang);"
           />
 
    <path d="M20,150 v100 h100 m50,0 c100,-140 150,140 250,0 c100,-140 150,140 250,0"
          style="marker: url(#markerPfeilAuto); marker-start: url(#markerAnfang);"
          />
Der untere Pfad hat automatisch ausgerichtete Markierungen. Die Markierungen für Zwischen- und Endpunkte werden mit dem marker-Attribut gesetzt, das dann für den Startpunkt mit marker-start wieder überschrieben wird.
Beachten Sie: Bei Polygonen und Pfaden, die geschlossen wurden, liegt der Endpunkt auf dem Startpunkt. Verwenden Sie entweder marker-end:none oder die gleichen Markierungen.

Referenz

  1. http://www.w3.org/TR/SVG2/painting.html#MarkerKnockoutLeftProperty