目录

CSS paint-order 属性

❮上一节完整的CSS参考下一节❯

示例

更改 SVG <circle> 元素的绘制顺序：

circle {
paint-order: stroke fill;
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个paint-order属性指定 SVG 元素或文本的绘制顺序。

笔记：对于文本元素，只能更改描边和填充的顺序，因为标记不适用。

展示演示❯

默认值：	普通的
遗传：	是的
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.paintOrder="stroke fill"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
paint-order	35.0	17.0	60.0	8.0	22.0

CSS 语法

paint-order: normal| one value| two values| three values|initial|inherit;

属性值

Value	Description	Demo
normal	Default value. The paint order is fill, stroke, markers.	Demo ❯
one value	Painting will start with given value, then continue with the remaining painting in default order. If only "stroke" is given, the next painting activity is fill, then markers.	Demo ❯
two values	Painting will start with given values, then continue with the remaining painting in default order. If "stroke markers" are given, the next painting activity will be fill.	Demo ❯
three values	Painting will be done according to given values.	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

示例

使用彩虹渐变填充更改 SVG <text> 元素上的绘制顺序：

text {
paint-order: stroke fill;
}

亲自试一试 »

相关页面

SVG 教程：SVG 教程

HTML SVG 图形：HTML SVG 图形

❮上一节完整的CSS参考下一节❯