<marker>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Das <marker> SVG Element definiert eine Grafik, die für das Zeichnen von Pfeilspitzen oder Polymarkern auf einem gegebenen <path>, <line>, <polyline> oder <polygon> Element verwendet wird.

Marker können mit den Eigenschaften marker-start, marker-mid und marker-end an Formen angebracht werden.

Beispiele

Zeichnen von Pfeilspitzen

Das folgende Beispiel zeigt, wie man eine Pfeilspitze auf einer Linie und auf einem gekrümmten Pfad zeichnet. Für den gekrümmten Pfad wird an jedem Punkt mit einem marker-mid Marker eine Pfeilspitze gezeichnet.

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- A marker to be used as an arrowhead -->
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
  </defs>

  <!-- A line with a marker -->
  <line
    x1="10"
    y1="10"
    x2="90"
    y2="90"
    stroke="black"
    marker-end="url(#arrow)" />

  <!-- A curved path with markers -->
  <path
    d="M 110 10
       C 120 20, 130 20, 140 10
       C 150 0, 160 0, 170 10
       C 180 20, 190 20, 200 10"
    stroke="black"
    fill="none"
    marker-start="url(#arrow)"
    marker-mid="url(#arrow)"
    marker-end="url(#arrow)" />
</svg>

Zeichnen von Polymarkern

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- Arrowhead marker definition -->
    <marker
      id="arrow"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      orient="auto-start-reverse">
      <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>

    <!-- Dot marker definition -->
    <marker
      id="dot"
      viewBox="0 0 10 10"
      refX="5"
      refY="5"
      markerWidth="5"
      markerHeight="5">
      <circle cx="5" cy="5" r="5" fill="red" />
    </marker>
  </defs>

  <!-- Coordinate axes with an arrowhead in both directions -->
  <polyline
    points="10,10 10,90 90,90"
    fill="none"
    stroke="black"
    marker-start="url(#arrow)"
    marker-end="url(#arrow)" />

  <!-- Data line with polymarkers -->
  <polyline
    points="15,80 29,50 43,60 57,30 71,40 85,15"
    fill="none"
    stroke="grey"
    marker-start="url(#dot)"
    marker-mid="url(#dot)"
    marker-end="url(#dot)" />
</svg>

Verwendung von context-fill und context-stroke

Das folgende Beispiel zeigt, wie Sie die Werte context-fill und context-stroke verwenden, um einem Marker dieselbe Füllung und denselben Strich wie der Form, an die er angehängt ist, zu verleihen.

html

<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
  <marker
    id="circle"
    markerWidth="6"
    markerHeight="6"
    refX="3"
    refY="3"
    markerUnits="strokeWidth">
    <circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" />
  </marker>

  <style>
    path {
      marker: url(#circle);
    }
  </style>

  <path d="M 10,10 30,10 h 10" stroke="black" />
  <path d="M 10,20 30,20 h 10" stroke="blue" fill="red" />
  <path d="M 10,30 30,30 h 10" stroke="red" fill="none" />
  <path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" />
</svg>

html,
body,
svg {
  height: 100%;
}

Attribute

markerHeight: Dieses Attribut definiert die Höhe des Markersichtfensters. Wertetyp: <length> ; Standardwert: 3; Animierbar: ja
markerUnits: Dieses Attribut definiert das Koordinatensystem für die Attribute markerWidth, markerHeight und den Inhalt des <marker>. Wertetyp: userSpaceOnUse|strokeWidth ; Standardwert: strokeWidth; Animierbar: ja
markerWidth: Dieses Attribut definiert die Breite des Markersichtfensters. Wertetyp: <length> ; Standardwert: 3; Animierbar: ja
orient: Dieses Attribut definiert die Ausrichtung des Markers relativ zu der Form, an die er angeschlossen ist. Wertetyp: auto|auto-start-reverse|<angle> ; Standardwert: 0; Animierbar: ja
preserveAspectRatio: Dieses Attribut definiert, wie das SVG-Fragment verformt werden muss, wenn es in einem Container mit einem anderen Seitenverhältnis eingebettet wird. Wertetyp: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; Standardwert: xMidYMid meet; Animierbar: ja
refX: Dieses Attribut definiert die x-Koordinate für den Bezugspunkt des Markers. Wertetyp: left|center|right|<coordinate> ; Standardwert: 0; Animierbar: ja
refY: Dieses Attribut definiert die y-Koordinate für den Bezugspunkt des Markers. Wertetyp: top|center|bottom|<coordinate> ; Standardwert: 0; Animierbar: ja
viewBox: Dieses Attribut definiert die Begrenzung des SVG-Sichtfensters für das aktuelle SVG-Fragment. Wertetyp: <list-of-numbers> ; Standardwert: keiner; Animierbar: ja

Verwendungskontext

Kategorien	Container-Element
Erlaubter Inhalt	Beliebige Anzahl folgender Elemente, in beliebiger Reihenfolge: Animationselemente Beschreibende Elemente Formelemente Strukturelemente Gradient-Elemente `<a>`, `<clipPath>`, `<cursor>`, `<filter>`, `<font>`, `<font-face>`, `<foreignObject>`, `<image>`, `<marker>`, `<mask>`, `<pattern>`, `<script>`, `<style>`, `<switch>`, `<text>`, `<view>`

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2 # MarkerElement

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Verwandte Marker-Eigenschaften: marker-start, marker-mid, und marker-end