paint-order

paint-order 屬性指定給定形狀或文字元素的填充、描邊和標記的繪製順序。

注意：作為呈現屬性，paint-order 可用作 CSS 屬性。

您可以將此屬性與以下 SVG 元素一起使用

使用說明

值	`normal` \| [ `fill` \|\| `stroke` \|\| `markers` ]
預設值	`normal`
可動畫化	discrete

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="#888" />
    <stop stop-color="#ccc" 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>

示例將按以下方式呈現

An image showing how the paint-order example looks in a UA that supports the paint-order property.

可以透過以下 CSS 屬性實現描邊效果

css

#stroke-under {
  paint-order: stroke;
}

規範

規範
可縮放向量圖形 (SVG) 2 # PaintOrder

瀏覽器相容性

BCD 表僅在瀏覽器中載入