Diemarker-endCSS Eigenschaft verweist auf einen Marker, der am letzten Vertex des Pfades des Elements gezeichnet wird, also an seinem Endvertex. 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 desmarker-end-Attributs im SVG.

Bei vielen markierungsunterstützenden Formen sind die ersten und letzten Vertices derselbe Punkt: zum Beispiel die obere linke Ecke eines<rect>. In solchen Formen werden, wenn sowohl der erste als auch der letzte Marker definiert sind, zwei Marker an diesem Punkt gezeichnet, auch wenn sie möglicherweise nicht in die gleiche Richtung zeigen.

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 Vertex des Pfades des Elements gezeichnet wird.

<marker-ref>

Ein<url>, der auf einen Marker verweist, der durch ein SVG<marker>-Element definiert ist und am letzten Vertex des Pfades des Elements gezeichnet werden soll. Wenn der URL-Verweis ungültig ist, wird kein Marker am letzten Vertex des Pfades gezeichnet.

Formale Definition

Formale Syntax

marker-end =
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           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       fill="none"    stroke="black"    points="20,100 40,60 70,80 100,20" /></svg>

polyline#test {  marker-end: url("#triangle");}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• marker-start
• marker-mid
• marker
• SVGmarker-end Attribut