paint-order
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Das Attribut paint-order legt die Reihenfolge fest, in der die Füllung, die Kontur und die Marker eines Form- oder Textelements gezeichnet werden.
Hinweis:
Als Präsentationsattribut hat paint-order auch ein entsprechendes CSS-Property: paint-order. Wenn beide angegeben sind, hat das CSS-Property Vorrang.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Beispiel
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
<linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
<stop stop-color="#888888" />
<stop stop-color="#cccccc" offset="1" />
</linearGradient>
<rect width="400" height="200" fill="url(#g)" />
<g
fill="crimson"
stroke="white"
stroke-width="6"
stroke-linejoin="round"
text-anchor="middle"
font-family="sans-serif"
font-size="50px"
font-weight="bold">
<text x="200" y="75">stroke over</text>
<text x="200" y="150" paint-order="stroke" id="stroke-under">
stroke under
</text>
</g>
</svg>
Das Beispiel würde wie folgt dargestellt:
Der Effekt, bei dem die Kontur unter der Füllung liegt, lässt sich mit dem folgenden CSS-Property erzielen:
#stroke-under {
paint-order: stroke;
}
Verwendungshinweise
| Wert |
normal | [ fill || stroke ||
markers ]
|
|---|---|
| Standardwert | normal |
| Animierbar | diskret |
- normal
-
Dieser Wert gibt an, dass zuerst die Füllung, dann die Kontur und zuletzt die Marker gezeichnet werden.
- [ fill || stroke || markers ]
-
Die Reihenfolge dieser drei Schlüsselwörter bestimmt von links nach rechts, in welcher Reihenfolge die Komponenten gezeichnet werden. Wenn eine der drei Komponenten weggelassen wird, wird sie nach den angegebenen Komponenten in ihrer Standardreihenfolge gezeichnet. Beispielsweise ist
strokegleichbedeutend mitstroke fill markers.
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # PaintOrderProperty |