paint-order

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

CSS 的 paint-order 属性用于设置 SVG 形状和文本的绘制顺序,包括填充、描边和可能正在使用的任何标记。 默认情况下,这些属性按以下顺序绘制:填充、描边和标记。 此属性允许我们更改绘制顺序,以便我们能够更好地控制最终的外观。

此属性真正闪耀的地方在于 SVG 文本,尤其是同时具有填充和描边的 <text> 元素。 就像这样

哎呀,那个描边真糟糕。 它只有 6 像素宽,但它有点覆盖了填充。 这是因为默认情况下填充首先绘制,然后是描边。 但是,如果我们使用 paint-order 属性反转顺序,则填充将在最后绘制并覆盖描边中难看的部分。

哦天哪,好多了! 我们实际上可以阅读文本,并且描边比以前更符合字符的形状。

语法

paint-order: normal | [ fill || stroke || markers ]
  • 初始值: normal
  • 应用于: 形状和文本内容元素
  • 继承:
  • 动画类型: 离散

/* Normal */
paint-order: normal;

/* Single values */
paint-order: stroke; /* same as: stroke fill markers */
paint-order: markers; /* same as: markers fill stroke */

/* Multiple values */
paint-order: stroke fill; /* same as: stroke fill markers */
paint-order: markers stroke fill;

值得注意的是,传递一个值是完全合法的。 例如,如果我们这样做

paint-order: stroke;

… 然后 stroke 将首先绘制,然后是其他值按其默认顺序绘制。 考虑到这一点,此示例等同于以下示例

这基本上意味着该属性要么接受一个 normal 值,要么接受 fillstrokemarkers 的组合,按其应绘制的顺序。

paint-order: stroke fill markers

如果未提供任何值或提供了无效的值,会发生什么? 将使用默认顺序:填充、描边、标记。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
不支持17+60+35+8+22+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mini
85+79+81+8+全部
来源:caniuse

进一步阅读