marker-start

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 Attribut marker-start definiert den Pfeilkopf oder Polymarker, der am ersten Scheitelpunkt der angegebenen Form gezeichnet wird.

Bei allen Formelementen, außer <polyline> und <path>, ist der letzte Scheitelpunkt identisch mit dem ersten Scheitelpunkt. In diesem Fall werden, wenn der Wert von marker-start und marker-end beide nicht none sind, zwei Marker auf diesem letzten Scheitelpunkt angezeigt. Für <path>-Elemente gilt: Für jeden geschlossenen Teilpfad ist der letzte Scheitelpunkt identisch mit dem ersten Scheitelpunkt. marker-start wird nur am ersten Scheitelpunkt der Pfaddaten angezeigt.

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

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

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-start="url(#triangle)" />
</svg>

Nutzungshinweise

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

Gibt an, dass kein Markersymbol am ersten Scheitelpunkt gezeichnet wird.

<marker-ref>

Dieser Wert ist eine Referenz auf ein <marker>-Element, das am ersten Scheitelpunkt gezeichnet wird. Ist die Referenz ungültig, wird kein Marker gezeichnet.

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# MarkerStartProperty

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-start

Legend

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

Full support
Full support

Siehe auch