专栏名称: 奇舞精选
《奇舞精选》是由奇舞团维护的前端技术公众号。除周五外,每天向大家推荐一篇前端相关技术文章,每周五向大家推送汇总周刊内容。
今天看啥  ›  专栏  ›  奇舞精选

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

奇舞精选  · 公众号  · 前端  · 2024-08-22 18:00

主要观点总结

文章介绍了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 ………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览