paint-order
paint-order 屬性指定了給定形狀或文字元素的填充、描邊和標記的繪製順序。
注意： 作為一個呈現屬性，paint-order 也有一個對應的 CSS 屬性：paint-order。當兩者都指定時，CSS 屬性具有更高的優先順序。
你可以將此屬性與以下 SVG 元素一起使用
用法說明
| 值 |
normal | [ fill || stroke || markers ] |
|---|---|
| 預設值 | normal |
| 可動畫的 | 離散 |
- normal
-
此值表示填充將首先繪製，然後是描邊，最後是標記。
- [ fill || stroke || markers ]
-
這三個關鍵字的順序表示從左到右的繪製順序。如果省略了三個繪製元件中的任何一個，它們將在指定的元件之後按預設順序繪製。例如，使用
stroke等同於stroke fill markers。
示例
html
<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>
示例將按以下方式渲染
可以透過以下 CSS 屬性實現描邊效果
css
#stroke-under {
paint-order: stroke;
}
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # PaintOrderProperty |
瀏覽器相容性
載入中…