marker-end
Die marker-end
CSS Eigenschaft verweist auf einen Marker, der am letzten Eckpunkt 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 {cssxref("url_value", "<url>")}} Wert referenziert werden. Der Wert der CSS-Eigenschaft überschreibt alle Werte des marker-end
Attributs im SVG.
Bei vielen Marker-unterstützenden Formen sind der erste und der letzte Eckpunkt derselbe Punkt: 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-end
Eigenschaft hat nur einen Effekt für Elemente, 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 Eckpunkt des Pfads des Elements gezeichnet wird.
<marker-ref>
-
Ein
<url>
, der auf einen Marker verweist, der durch ein SVG<marker>
Element definiert ist, um am letzten Eckpunkt des Pfads des Elements gezeichnet zu werden. Wenn die URL-Referenz ungültig ist, wird kein Marker am letzten Eckpunkt 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