时间戳

首页 > 解决方案 > Chrome中带有字母间距的SVG绘制顺序

css - Chrome中带有字母间距的SVG绘制顺序

问题描述

在 SVG 中，绘制顺序允许我们“控制文本内容和形状的填充和描边的绘制顺序”，将描边放在填充后面非常有用。

但是，我刚刚发现在 Chrome 中，当更改letter-spacingCSS 属性时，不是所有笔触都被绘制在所有填充后面，而是似乎每个字母都是单独绘制的。

例如，给定这个片段：

text {
  font-size: 60px;
  stroke: wheat;
  stroke-width: 10px;
  letter-spacing: -5px;
  paint-order: stroke;
}
<svg width="500" height="120">
  <text x="10" y="100">This is an example</text>
</svg>

这是它在 Chrome 中的样子：

在此处输入图像描述

虽然，例如在 Firefox 中，结果是我所期望的：

在此处输入图像描述

因此，在报告错误之前，我想问一下：这种行为真的是依赖于实现的（也就是说，每个浏览器都以他们喜欢的方式实现它）还是在 SVG 文档的某个地方指定了它？

标签： cssgoogle-chromesvgfirefox

解决方案

这是另一种解决方案：stroke: wheat您可以使用过滤器 feMorphology 与operator="dilate".

text {
  font-size: 60px;
  letter-spacing: -5px;
}
<svg width="500" height="120">
<filter id="outline">
<feMorphology in="SourceAlpha" result="expanded"
operator="dilate" radius="3"/>
<feFlood flood-color="wheat" result="color" />
<feComposite in ="color" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
  <text filter="url(#outline)" x="10" y="100">This is an example</text>
</svg>

推荐阅读