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 |
浏览器兼容性
加载中…