创建圆角三角形的 SVG 路径

Question

我正在尝试创建一个带有圆角的三角形的简单 svg 路径。

我从这个三角形开始：

<svg width="440" height="440">
  <path d="M5,100 L70,5 L135,100 z" fill="none" stroke="black" stroke-width="3" />
</svg>

但我正在努力添加角落 - 这是我所能得到的：

<svg width="440" height="440">
  <path d="M5,100 a10,10 1 0 1 -5,-10 L70,5 L135,90 a10,10 1 0 1 5,10  z" fill="none" stroke="black" stroke-width="3" />
</svg>

创建具有三个平滑角的三角形的正确路径坐标是多少？我是否需要做一些几何计算来计算正确的起点和终点，或者是否有一个工具可以用来配置形状，该工具将为我提供形状组成的坐标？

Answer 1

Inkscape 具有将路径笔画转换为填充对象的选项。这样您就可以：

1. 绘制一个简单的三角形并将填充设置为无。
2. 定义宽度为要实现的圆角半径两倍的描边。
3. 设置stroke-linejoin:round（填充和描边对话框 -> 描边样式 -> 圆形连接）。
4. 从菜单“路径”->“描边到路径”中选择。

5. 设置为节点选择模式。现在您可以删除内侧的所有节点。

6. 再次将填充设置为无，然后选择您喜欢的描边。