Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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 April 2017.
Die marker-start CSS Eigenschaft verweist auf einen Marker, der am ersten Scheitelpunkt des Pfads 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 markierungsunterstützenden Formen befinden sich der erste und der letzte Scheitelpunkt an derselben Stelle: Zum Beispiel die obere linke Ecke eines <rect>. In solchen Formen, wenn sowohl der erste als auch der letzte Marker definiert sind, werden zwei Marker an diesem Punkt gezeichnet, obwohl sie möglicherweise nicht in dieselbe Richtung zeigen.
Hinweis:
Die marker-start-Eigenschaft hat nur eine Wirkung 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 Pfads des Elements gezeichnet wird.
<marker-ref>-
Ein
<url>, der auf einen Marker verweist, der durch ein SVG-<marker>-Element definiert wird, das am ersten Scheitelpunkt des Pfads des Elements gezeichnet werden soll. Wenn der URL-Verweis ungültig ist, wird kein Marker am ersten Scheitelpunkt des Pfads gezeichnet.
Formale Definition
| Anfangswert | 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>
Beispiel
html,
body,
svg {
height: 100%;
}
<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="red" />
</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 # MarkerStartProperty |
Browser-Kompatibilität
Loading...
Siehe auch
marker-midmarker-endmarker- SVG-Attribut
marker-start