marker-end

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-end-Attribut definiert den Pfeilkopf oder Mehrfach-Markierer, der am letzten Scheitelpunkt der angegebenen Form gezeichnet wird.

Für alle Form-Elemente außer <polyline> und <path> ist der letzte Scheitelpunkt identisch mit dem ersten Scheitelpunkt. In diesem Fall, wenn der Wert von marker-start und marker-end beide nicht none sind, werden zwei Markierer an diesem letzten Scheitelpunkt gerendert. Für <path>-Elemente ist bei jedem geschlossenen Teilpfad der letzte Scheitelpunkt identisch mit dem ersten Scheitelpunkt. marker-end wird nur auf dem finalen Scheitelpunkt der Pfad-Daten gerendert.

Hinweis: Als Präsentationsattribut hat marker-end auch ein entsprechendes CSS-Property: marker-end. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Beispiel

html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker
      id="triangle"
      viewBox="0 0 10 10"
      refX="1"
      refY="5"
      markerUnits="strokeWidth"
      markerWidth="10"
      markerHeight="10"
      orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
    </marker>
  </defs>
  <polyline
    fill="none"
    stroke="black"
    points="20,100 40,60 70,80 100,20"
    marker-end="url(#triangle)" />
</svg>

Hinweise zur Verwendung

Wert none | <marker-ref>
Standardwert none
Animierbar diskret
none

Gibt an, dass kein Markiersymbol am letzten Scheitelpunkt gezeichnet wird.

<marker-ref>

Dieser Wert ist ein Verweis auf ein <marker>-Element, das am letzten Scheitelpunkt gezeichnet wird. Wenn der Verweis nicht gültig ist, wird kein Marker gezeichnet.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# MarkerEndProperty

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
marker-end

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch