SVG参考手册
属性 | Attributes
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 |