marker
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
CSS Eigenschaft weist auf einen Marker hin, der an den ersten, mittleren und letzten Scheitelpunkten des Pfads des Elements gezeichnet wird; das heißt, an allen seinen Scheitelpunkten. 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 der Attribute marker-start
, marker
und marker-end
im SVG.
Für viele markenunterstützende Formen befinden sich die ersten und letzten Scheitelpunkte 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.
Für die mittleren Scheitelpunkte wird die Richtung, in die jeder Marker zeigt, als die Richtung definiert, die sich auf halbem Weg zwischen der Richtung am Ende des vorhergehenden Pfadsegments und der Richtung des Beginns des nachfolgenden Pfadsegments befindet. Dies kann als das Kreuzprodukt der durch die beiden Pfadrichtungen definierten Vektoren betrachtet werden.
Hinweis: Die marker
-Eigenschaft wird nur für Elemente Wirkung zeigen, die SVG-Marker verwenden können. Sehen Sie marker-start
für eine Liste.
Syntax
marker: none;
marker: url(markers.svg#arrow);
/* Global values */
marker: inherit;
marker: initial;
marker: revert;
marker: revert-layer;
marker: unset;
Werte
none
-
Dies bedeutet, dass kein Marker an jedem Scheitelpunkt des Pfads des Elements gezeichnet wird.
<marker-ref>
-
Ein
<url>
, das auf einen Marker verweist, der durch ein SVG-<marker>
-Element definiert ist, um an jedem Scheitelpunkt des Elementpfads gezeichnet zu werden. Wenn der URL-Verweis ungültig ist, wird kein Marker an den Scheitelpunkten des Pfades gezeichnet.
Formale Definition
Initialer Wert | wie die jeweiligen Kurzschreibweisen:
|
---|---|
Anwendbar auf | circle , ellipse , line , path , polygon , polyline , and rect elements in an svg |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
marker =
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 240 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 130,10 150,10 170,20 170,100 120,100" />
</svg>
polyline#test {
marker: url(#triangle);
}
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # MarkerShorthand |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
marker-start
marker-end
- SVG-
marker
-Attribut