marker-end
Die marker-end
CSS Eigenschaft verweist auf einen Marker, der am letzten Scheitelpunkt des Pfads des Elements gezeichnet wird; das heißt, an seinem Endpunkt. 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-end
-Attributs im SVG.
Für viele Marker-unterstützende Formen sind der erste und letzte Scheitelpunkt der gleiche Punkt: zum Beispiel die obere linke Ecke eines <rect>
. In solchen Formen werden, falls sowohl der erste als auch der letzte Marker definiert sind, zwei Marker an diesem Punkt gezeichnet, obwohl sie möglicherweise nicht in die gleiche Richtung zeigen.
Hinweis: Die marker-end
-Eigenschaft hat nur eine Wirkung bei Elementen, die SVG-Marker verwenden können. Siehe marker-end
für eine Liste.
Syntax
marker-end: none;
marker-end: url(markers.svg#arrow);
/* Global values */
marker-end: inherit;
marker-end: initial;
marker-end: revert;
marker-end: revert-layer;
marker-end: unset;
Werte
none
-
Dies bedeutet, dass kein Marker am letzten Scheitelpunkt des Pfads des Elements gezeichnet wird.
<marker-ref>
-
Ein
<url>
, der auf einen durch ein SVG-<marker>
-Element definierten Marker verweist, der am letzten Scheitelpunkt des Pfads des Elements gezeichnet wird. Ist der URL-Verweis ungültig, wird kein Marker am letzten Scheitelpunkt des Pfads 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-end =
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-end: url(#triangle);
}
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # VertexMarkerProperties |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
marker-start
marker-mid
marker
- SVG-
marker-end
-Attribut