CSS 属性 Stroke 正在剪裁我的 SVG 字体字母

Question

这是我的字体（默认 Arial Black 字体）的屏幕截图：

底部有填充物而顶部没有任何填充物。它为大多数字母提供了正确的笔划，但有些字母在左上角有一个被剪掉的部分，例如：E、F、H、I 等......它基本上从它们顶部的一些字母中切出一个小方块离开了。

知道它为什么这样做吗？ CSS如下，

行程："black" 笔划线帽："butt" 描边不透明度：“1” 笔划宽度：“2.5” 笔划线连接= "round" 油漆顺序= "stroke"

Answer 1

只需添加stroke-linecap="round"

<svg x="0px" y="0px" width="162px" height="121.634px" viewBox="0 0 162 121.634">
 <line fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" x1="3.654" y1="118.134" x2="90.646" y2="3.5"/>
 <line fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" x1="90.646" y1="3.5" x2="158.5" y2="118.134"/>
 <line fill="none" stroke="#000000" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" x1="158.5" y1="118.016" x2="3.5" y2="118.016"/>
</svg>

CSS 属性 Stroke 正在剪裁我的 SVG 字体字母

CSS Property Stroke is clipping my letters for fonts in SVG

css

fonts

svg

stroke