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
<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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
marker-start |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
<marker>
marker-end
marker-mid
- CSS
marker-start
-Eigenschaft