marker-mid

Die marker-mid-CSS Eigenschaft verweist auf einen Marker, der an den mittleren Scheitelpunkten des Pfades des Elements gezeichnet wird; das heißt, an jedem seiner Scheitelpunkte zwischen dem Start- und Endscheitelpunkt. 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-mid-Attributs im SVG.

Die Richtung, in die jeder Marker zeigt, wird als die Richtung definiert, die in der Mitte zwischen der Richtung am Ende des vorhergehenden Pfadsegments und der Richtung des Anfangs des folgenden Pfadsegments liegt. Dies kann als Kreuzprodukt der durch die beiden Pfadrichtungen definierten Vektoren betrachtet werden.

Hinweis: Die marker-mid-Eigenschaft wird nur für Elemente Wirkung zeigen, die SVG-Marker verwenden können. Siehe marker-mid für eine Liste.

Syntax

css
marker-mid: none;
marker-mid: url(markers.svg#arrow);

/* Global values */
marker-mid: inherit;
marker-mid: initial;
marker-mid: revert;
marker-mid: revert-layer;
marker-mid: unset;

Werte

none

Dies bedeutet, dass kein Marker an jedem mittleren Scheitelpunkt des Pfades des Elements gezeichnet wird.

<marker-ref>

Ein <url> das auf einen durch ein SVG-<marker>-Element definierten Marker verweist, der an jedem mittleren Scheitelpunkt des Pfades des Elements gezeichnet wird. Wenn der URL-Verweis ungültig ist, wird kein Marker an den mittleren Scheitelpunkten des Pfades 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-mid = 
  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 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>
css
polyline#test {
  marker-mid: url(#triangle);
}

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# VertexMarkerProperties

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch