CSS paint-order祝大家元旦快乐 « 张鑫旭-鑫空间-鑫生活

这篇文章发布于 2020年01月1日，星期三，21:04，归类于 CSS相关。阅读 16272 次, 今日 5 次 4 条评论

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9163
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

今天是1月1日，祝大家2020元旦快乐！

2020元旦快乐

一、了解CSS paint-order

CSS paint-order作用在SVG图形元素上，设置是先绘制描边还是先绘制填充。

为什么会有这个属性呢？在SVG中，描边和填充同时都有设置是很常见的，而SVG图形的描边和CSS中的-webkit-text-stroke描边是一样的，都是居中描边。

描边位置测试效果截图

如果描边再粗一点，文字原本颜色说不定就看不见了，那就不是描边效果，是加粗效果了，并不符合我们的预期，有没有什么办法可以实现外描边效果呢？

对于CSS文本可以使用text-shadow代替，在SVG中可以使用本文这里的paint-order进行控制。

paint-order案例

一个SVG，两个两行文字，其中一个设置了paint-order:stroke，代码如下：

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="50">张旭旭是大帅锅</text>
    <text x="10" y="120" class="paint-order">张旭旭是大帅锅</text>
</svg>

svg {
    background-color: deepskyblue;
    fill: crimson;
    stroke: white;
    stroke-width: 6px;
    font-size: 40px;
    font-weight: bold;
}
.paint-order {
    paint-order: stroke;    
}

结果就有下图所示的效果：

描边效果对比

其中上面一行文字6px的描边已经把文字原本的颜色给遮盖了，而后面一行文字设置了paint-order:stroke，可以让浏览器绘制时候，先绘制描边，再绘制填充，这样文字的填充就会覆盖白色描边，于是只有在文字区域外面的描边可以看到，文字原本填充的crimson颜色显示良好，这就是CSS paint-order属性的作用。

眼见为实，您可以狠狠的点击这里：CSS paint-order实现文字外描边demo

二、语法和兼容性

☞ 语法

paint-order: normal | [ fill || stroke || markers ]

||表示或者，可以并存，因此下面的写法都是合法的：

paint-order: normal;

paint-order: fill;
paint-order: stroke;
paint-order: markers;

paint-order: fill markers;
paint-order: markers stroke;
...

paint-order: fill markers stroke;
paint-order: markers fill stroke;
paint-order: stroke markers fill;
...

其中：

normal

默认值。绘制顺序是fill stroke markers。图形绘制是后来居上的，因此默认是描边覆盖填充，标记覆盖描边。

fill

先填充。

stroke

先描边，然后再填充或者标记。

markers

先标记。下图坐标值的两个箭头，以及折线上的红色小圆点就是标记，<marker>元素绘制的，文档这里。

标记图形示意

CSS paint-order可以作用在SVG的以下这些元素上：<circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, 以及<tspan>。

paint-order也可以直接作为XML属性用在上面这些元素上。