使SVG曲线看起来更平滑

Question

我创建了这个 svg 边框路径。但是曲线看起来不平滑。如果我增加行程宽度=“1”，曲线就会消失。 （边缘和中间的弧线）

我想让笔画宽度=“10”最小

怎样才能让它干净呢？我是 SVG 新手

.box {
  height: 200px;
  width: 400px;
}

<div class="box">
  <svg height="100%" width="100%" viewbox="0 0 400 200">
    <path d="M 5 0  
             H 395
             Q 400 0 400 5     
             V 95
             Q 400 98 395 100  
             A 1 1, 0 0 0, 395 150
             Q 397 150 400 155
             V 195
             Q 400 200 395 200            
             H 5
             Q 0 200 0 195
             V 5
             Q 0 0 5 0
             " stroke="red" stroke-linecap="round" fill="none" stroke-width="1" />

  </svg>

</div>

Answer 1

在设计软件 Figma 中查看您的 svg，我可以看到路径并未绘制为完美的曲线，因此当使其变厚时，其效果会很明显（请参阅随附的屏幕截图）。

还注意到，将笔画宽度设置为大于一只会影响提到的曲线，而不影响路径的其余部分，在我看来，这是一个问题。

还将 SVG 代码粘贴到 https://svgomg.net（免费在线 SVG 代码优化工具）中，该工具指出它有问题。

总而言之，我可以猜测您正在尝试自己编写路径元素，我对此非常尊重，因为我自己还不知道如何做到这一点，但也许您可以尝试在工具中绘制它或者如果您愿意，可以手动重试，这应该可以解决您的问题。