SVG/Element/marker

Der Begriff marker ist mehrdeutig.
Neben dem SVG marker-Element gibt es noch das CSS-Pseudoelement ::marker.

Das marker-Element Markierungspunkte wie Pfeile oder Kreise an path, line, polyline oder polygon-Elementen.

Syntax

Start-Tag: notwendig

End-Tag: notwendig

Elternelemente

Darf vorkommen in:
defs

erlaubte Inhalte

*animate, animateMotion, animateTransform

• Beschreibungselemente
• Grundformen
• Strukturierungselemente
• Verläufe
• a, clipPath, cursor, filter, foreignObject, image, mask, pattern, script, style, switch, text, view

Attribute

Name	Inhalt	Standardwert	Bedeutung
markerWidth	NUMBER		Breite
markerHeight	CDATA		Höhe
markerUnits	strokeWidth userSpaceOnUse	strokeWidth	Einheiten
orient	auto, auto-start-reverse, Winkel, Number		Richtung
preserveAspectRatio	defer, align, meetOrSlice
refX	NUMBER		X-Koordinate des Referenzpunkts
refY	NUMBER		Y-Koordinate des Referenzpunkts
systemLanguage	IANA		Sprachkürzel
transform	CDATA
viewBox	NUMBER

Attribut: Pflichtattribut
Attribut: optionales Attribut

Beispiel

    <defs>
      <marker id="mStart" markerWidth="7" markerHeight="7" refx="4" refy="4">
        <rect x="1" y="1" width="5" height="5" />
      </marker>
   
      <marker id="mDot" markerWidth="8" markerHeight="8" refx="4" refy="4">
        <circle cx="4" cy="4" r="3" fill="context-fill" stroke="context-stroke"/>
      </marker>

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

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

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

Die beiden Pfade erhalten für Start-, Weg- und Endpunkt Referenzen auf die im Definitionsabschnitt angelegten marker.
Diese erhalten mit context-fill die Füll- und Randfarbe des entsprechenden Pfades.

Siehe auch

• SVG/Farben/Markierungen

Weblinks

• W3C: MarkerElement