marker-mid CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.
Die marker-mid CSS-Eigenschaft verweist auf ein Markierungselement, das an den mittleren Scheitelpunkten des Pfads eines Elements gezeichnet wird. Das heißt, an jedem seiner Scheitelpunkte zwischen Anfang und Ende. Die Markierung 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-mid-Attributs im SVG.
Die Richtung, in die jede Markierung zeigt, ist definiert als die Richtung genau zwischen der Richtung am Ende des vorhergehenden Pfadsegments und der Richtung am Anfang des nachfolgenden Pfadsegments. Das kann als das Kreuzprodukt der durch die beiden Pfadrichtungen definierten Vektoren betrachtet werden.
Hinweis:
Die marker-mid-Eigenschaft hat nur Auswirkungen auf Elemente, die SVG-Markierungen verwenden können. Siehe marker-mid für eine Liste.
Syntax
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 keine Markierung an den mittleren Scheitelpunkten des Pfads des Elements gezeichnet wird.
<marker-ref>-
Ein
<url>, der auf eine durch ein SVG-<marker>-Element definierte Markierung verweist, die an jedem mittleren Scheitelpunkt des Pfads des Elements gezeichnet wird. Wenn die URL-Referenz ungültig ist, wird keine Markierung an den mittleren Scheitelpunkten des Pfads gezeichnet.
Formale Definition
| Anfangswert | 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-mid =
none |
<marker-ref>
<marker-ref> =
<url>
Beispiel
<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="red" />
</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>
polyline#test {
marker-mid: url("#triangle");
}
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # MarkerMidProperty |
Browser-Kompatibilität
Siehe auch
marker-startmarker-endmarker- SVG-Attribut
marker-mid