paint-order
该paint-order属性指定给定形状或文本元素的填充，描边和标记被绘制的顺序。它的默认值是normal，这表示先填充，然后是笔画，最后是标记。
要指定不同的顺序，可以使用以空格分隔的关键字fill，stroke和markers的列表。如果三个绘画组件中的任何一个被省略，那么将在指定的组件之后以默认顺序绘制它们。例如，使用stroke相当于笔画填充标记。
作为一个表现属性，它也可以直接在CSS样式表中作为属性使用。
用法说明
分类 | 呈现属性 |
|---|---|
值 | 正常| fill || 笔画|| 标记| 继承 |
动画 | 是 |
规范性文件 | SVG 2 |
例子
<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">stroke under</text>
</g>
</svg>这个例子将呈现如下：
元素
以下元素可以使用该paint-order属性：
- Shape elements »
- Text content elements »
浏览器兼容性
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | No support | (Yes) | (Yes) |
Feature | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
Basic support | ? | No support | No support | No support | No support |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
