CSS paint-order祝大家元旦快乐

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9163

本文欢迎分享与聚合,全文转载就不必了,尊重版权,圈子就这么大,若急用可以联系授权。

今天是1月1日,祝大家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新特性而言,兼容性还是很不错的,毕竟这个CSS渲染规则浏览器厂商还是很好实现的,成本很低,比Houdini的支持简单多了:

可以用起来。

三、未来十年是更好美好的十年

21世纪第3个10年要开始了。

在接下来这10年里,继续心怀梦想,努力拼搏,只争朝夕,不负昭华,为实现中华民族伟大复兴尽自己一份力,和祖国一起成长,砥砺前行!

2019年是过去十年最好的一年,未来十年也一定会比2019年更好!

本文为原创文章,欢迎分享,勿全文转载,如果实在喜欢,可收藏,永不过期,且会及时更新知识点及修正错误,阅读体验也更好。

本文地址: https://www.zhangxinxu.com/wordpress/?p=9163

(本篇完)

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章