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

【问题标题】：What's this weird gap in some corners in my svg text?我的 svg 文本中某些角落的奇怪间隙是什么？
【发布时间】：2020-07-17 23:03:01
【问题描述】：

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

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

所以我放了这个 CSS。

svg{
    stroke-linecap: square;
}

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

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

非常感谢。

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

（编辑2） 使用以下 CSS 属性，

svg{
    stroke-linecap: round;
}

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

【问题讨论】：

对我来说看起来不错。你用什么来显示 SVG？
还有 stroke-linejoin 属性。尝试使用它
@RobertLongson 我所做的是在 Illustrator 中制作文本并将其导出为 svg，然后将代码复制并粘贴到 HTML 中。
@YuriiKovalenko 感谢您的意见。我将属性放在 HTML 中的第二个路径（字母“A”）中，您可以在帖子中的 jsfiddle 链接中查看它。不幸的是，它并没有解决问题。
我已经更新了我的帖子，以准确显示出这个问题的位置。请看底部的图片。

【解决方案1】：

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

试试

svg{
    stroke-linecap: round;
}

以获得更平滑的结果。

【讨论】：

非常感谢。是的，我也试过这个属性，我觉得从远处看很顺利。然而，如果你仔细观察角落，你会发现它们是圆形的，因为这不是我想要的。我已经用一张新图片更新了我的帖子，以显示我的意思。（Edit2）再次感谢您。