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

css
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 Wertnone
Anwendbar aufcircle, ellipse, line, path, polygon, polyline, and rect elements in an svg
VererbtJa
Berechneter Wertwie angegeben, aber mit absoluten url Werten
Animationstypdiskret

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

html
<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>
css
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