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.
Die marker-start
CSS Eigenschaft verweist auf einen Marker, der am ersten Scheitelpunkt des Pfades des Elements gezeichnet wird, also an seinem Startscheitelpunkt. Der Marker muss mit einem SVG-<marker>
-Element definiert worden sein und kann nur mit einem <url>
Wert referenziert werden. Der Wert der CSS-Eigenschaft überschreibt alle Werte des marker-start
Attributs im SVG.
Bei vielen formenunterstützenden Formen befinden sich der erste und letzte Scheitelpunkt an der gleichen Stelle: zum Beispiel die obere linke Ecke eines <rect>
. Bei solchen Formen werden zwei Marker an diesem Punkt gezeichnet, wenn sowohl der erste als auch der letzte Marker definiert sind, obwohl sie möglicherweise nicht in dieselbe Richtung zeigen.
Hinweis: Die marker-start
Eigenschaft hat nur Auswirkungen auf Elemente, die SVG-Marker verwenden können. Siehe marker-start
für eine Liste.
Syntax
marker-start: none;
marker-start: url(markers.svg#arrow);
/* Global values */
marker-start: inherit;
marker-start: initial;
marker-start: revert;
marker-start: revert-layer;
marker-start: unset;
Werte
none
-
Dies bedeutet, dass kein Marker am ersten Scheitelpunkt des Pfades des Elements gezeichnet wird.
<marker-ref>
-
Ein
<url>
, das auf einen durch ein SVG-<marker>
-Element definierten Marker verweist, der am ersten Scheitelpunkt des Pfades des Elements gezeichnet werden soll. Wenn die URL-Referenz ungültig ist, wird kein Marker am ersten Scheitelpunkt des Pfades gezeichnet.
Formale Definition
Initialer Wert | none |
---|---|
Anwendbar auf | circle , ellipse , line , path , polygon , polyline , and rect elements in an svg |
Vererbt | Ja |
Berechneter Wert | wie angegeben, aber mit absoluten url Werten |
Animationstyp | diskret |
Formale Syntax
marker-start =
none |
<marker-ref>
<marker-ref> =
<url>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Beispiel
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker
id="triangle"
viewBox="0 0 10 10"
markerWidth="10"
markerHeight="10"
refX="1"
refY="5"
markerUnits="strokeWidth"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
</marker>
</defs>
<polyline
id="test"
fill="none"
stroke="black"
points="20,100 40,60 70,80 100,20" />
</svg>
polyline#test {
marker-start: url(#triangle);
}
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # VertexMarkerProperties |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
marker-mid
marker-end
marker
- SVG
marker-start
Attribut