css - 我的 svg 文本中某些角落的奇怪间隙是什么？

我正在使用我在 Illustrator 中创建的轮廓文本测试 svg 动画。这是我正在制作的动画。

首先，我注意到一些角落的间隙，如下图所示。

所以我把这个CSS。

svg{
    stroke-linecap: square;
}

我设法以某种方式填补了空白，但唯一被修复的字母是 B，我假设这是因为绳子是 90 度。如下图所示，其他字母 A、R 和 N 现在有断角。

我的问题是，首先是什么导致了这种差距？另外，有什么办法可以弥补这些差距吗？我希望像 A 这样的字母有尖利的角。

非常感谢。

（Edit1） 这张图片显示了这个间隙最初的位置。请注意，字母“B”在 jsfiddle 中看起来不错，因为 CSS 属性“stroke-linecap: square”。

（Edit2） 使用以下 CSS 属性，

svg{
    stroke-linecap: round;
}

你得到下面的结果。如您所见，相应的角现在是圆的，我希望它们像其他角一样有尖角。

标签： cssanimationsvgcss-animationssvg-animate

linecap 将仅融合以square直角相交的线的线端，在您的示例中，仅由字母B组成。

尝试

svg{
    stroke-linecap: round;
}

以获得更平滑的结果。