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

很多 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-order: stroke; /*先描边*/
}

这个表示先绘制stroke，效果如下

看着变细了，这是因为描边是「居中」的，由于先绘制的描边，后绘制的填充颜色（后绘制的在上面），所以描边被填充盖住了一半，示意如下

这个属性在SVG文本中应该更明显，例如

<style>
  text{
    font-size: 60px;
    fill: #FFE8A3;
    stroke: #9747FF;
    stroke-width: 4;
    font-weight: bold;
  }
</style>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
  <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle">前端侦探</text>
</svg>

效果如下

文字本身都快被描边给覆盖了，下面调整一下

text{
  font-size: 60px;
  fill: #FFE8A3;
  stroke: #9747FF;
  stroke-width: 4;
  font-weight: bold; 
  paint-order: stroke; /*先描边*/
}

这样就好多了

你也可以访问以下链接查看真实效果：

• SVG paint-order (codepen.io)[1]

二、现在支持普通文本了

这么好的特性，现在终于支持普通文本了，也就是非 SVG 元素。

在普通HTML中，我们可以用-webkit-text-stroke来实现文字的描边效果，例如

<h1 class="txt">前端侦探</h1>

然后加上描边

.txt{
  -webkit-text-stroke: 4px #9747FF;
}

效果如下，文字已经被描边压缩的看不清了

在以往，我们通常使用绝对定位叠加的方式，手动让描边的那一层位于底部（可以用伪元素代替），就像这样

<p class="text" data-title="前端侦探">前端侦探</p>

.text{
    margin: 0;
    font-weight: bold;
    -webkit-text-stroke: 6px rgb(51, 51, 51);
}
.text::before{
    content: attr(data-title);
    position: absolute;
    background-image: linear-gradient(#FFCF02, #FF7352);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
}

示意效果如下

有关这个具体实现可以参考之前这篇文章：CSS和SVG实现文字渐变、描边、投影

不过现在，你也可以像SVG一样，直接通过paint-order来改变层级了

.txt{
  -webkit-text-stroke: 4px #9747FF;
  paint-order: stroke; /*先描边*/
}

效果如下

相比SVG最大的好处就是，排版更加灵活，比如文本自动换行，SVG就无法实现，CSS就非常容易了

你也可以访问以下链接查看真实效果：

• CSS paint-order (codepen.io)[2]

四、兼容性和总结

提一下兼容性，虽然Chrome 123才开始支持（2024-03-19），但是Safari却早早支持了（2017-09-19），这是少数Safari先于Chrome支持的属性，实在难得，完整兼容性如下

下面总结一下文章要点

1. paint-order，顾名思义，表示绘制的顺序。

2. 默认情况下，先绘制填充，后绘制描边，也就是描边是在填充上面

3. paint-order可以改变描边和绘制的层级，更好地实现文字描边效果

4. 在过去paint-order仅支持SVG元素

5. 现在paint-order也支持普通HTML文本了

6. 相比SVG最大的好处就是，排版更加灵活，比如文本自动换行

由于兼容性限制，目前还无法大规模使用。不过可以预见的是，SVG和CSS一直都在相互发展的，各种属性也都通用了。

[1]SVG paint-order (codepen.io)： https://codepen.io/xboxyan/pen/poXyjQp

[2]CSS paint-order (codepen.io)： https://codepen.io/xboxyan/pen/yLdOoeE

- END -

如果您关注前端+AI 相关领域可以扫码进群交流

 

扫码进群2或添加小编微信进群1😊

关于奇舞团

奇舞团是 360 集团最大的大前端团队，非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。