SVG中的paint-order现在也支持普通文本了

主要观点总结

文章介绍了CSS中的paint-order属性，该属性能够改变图形绘制的顺序，使得文字描边实现更加容易。文章首先介绍了paint-order在SVG元素中的应用，然后介绍了现在普通文本也支持了paint-order属性，使得排版更加灵活。最后，文章提到了兼容性问题和总结。

关键观点总结

关键观点1: paint-order属性的作用

改变图形绘制的顺序，让文字描边实现更加容易。

关键观点2: paint-order在SVG元素中的应用

SVG元素中使用paint-order可以改变图形绘制的层级，让填充覆盖在描边上面。

关键观点3: 普通文本也支持paint-order属性

现在普通HTML文本也支持paint-order属性，使得排版更加灵活。

关键观点4: 兼容性问题

虽然Chrome 123才开始支持paint-order属性，但Safari却早早支持了。完整兼容性需注意目标使用环境的浏览器是否支持。

文章预览

很多  CSS  特性更新是非常隐晦的，导致很容易被忽视。最近， Chrome 123  就新增了 paint-order 对普通文本的支持，这就让文字描边实现更加容易了。 这并不是一个新属性， SVG 中已经支持很多年了。一起了解一下吧 一、过去只支持 SVG 元素 paint-order ，顾名思义，表示绘制的顺序。 对于一个图形的绘制，顺序还是非常重要的。例如用 SVG 来绘制一个带边框的矩形 < style > rect { fill : #FFE8A3; stroke : #9747FF; stroke-width : 4 ; } style > < svg viewBox = " 0 0 300 300 " xmlns = " http://www.w3.org/2000/svg " > < rect x = " 50 " y = " 50 " width = " 200 " height = " 200 " /> svg > 效果如下 默认情况下，描边是在填充上面的。如果要改变绘制顺序，也相当于改变层级，让填充覆盖在描边上面，可以使用 paint-order 属性 rect { fill : #FFE8A3; stroke : #9747FF; stroke-width : 4 ; paint ………………………………