Question

我想为我的svg路径创建更圆的角落，但我不能让它发挥作用。有没有一个很好的方法来实现这一目标？这是我的代码：

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
  <clipPath id="svgClip">
  <path id="svgPath" d="M3,474 L957,471 942,24 40,1 z" />
  </clipPath>
  <path id="svgMask" d="M3,474 L957,471 942,24 40,1 z" />
</svg>

＆＃13;

谢谢！

Answer 1

您可以使用stroke-linejoin="round"并选择合适的stroke-width。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="-100 -100 1200 1000">
  <path id="svgMask" d="M3,474 L957,471 942,24 40,1 z" stroke-linejoin="round" stroke="black" stroke-width="80"/>
</svg>

Answer 2

没有自动或简单的方法为路径执行此操作。您可以为r个元素提供<rect>（半径）属性，但<path>没有等价物。

您需要在路径中的适当位置计算并添加三次贝塞尔曲线路径命令（C或c）。

如何在svg中创建圆角

2 个答案: