创建圆角三角形的 SVG 路径答案

【问题标题】：SVG path to create triangle with rounded corners创建圆角三角形的 SVG 路径
【发布时间】：2017-10-12 22:09:56
【问题描述】：

我正在尝试创建一个带圆角的三角形形状的简单 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>

创建具有三个平滑角的三角形的正确路径坐标是什么？我是否需要做一些几何来计算正确的起点和终点，或者是否有可以用来配置形状的工具，它会给我形状组成的坐标？

【问题讨论】：

作为一个可重复使用的解决方案，除了计算点我什么都不知道。对于简单的一次性，Inkscape 可以提供帮助。
@ccprog Inkscape 看起来很有用......不是最简单的工具：2 天后，我实际上并没有画一个圆角三角形，但正在努力！

标签： svg

【解决方案1】：

Inkscape 有一个选项可以将路径的笔划转换为填充对象。有了它，您可以：

绘制一个简单的三角形并将填充设置为无。
定义笔触，其宽度是您要实现的圆角半径的两倍。
设置stroke-linejoin:round（填充和描边对话框 -> 描边样式 -> 圆形连接）。
从菜单路径中选择 -> 描边到路径。
设置为节点选择模式。现在您可以删除内侧的所有节点。
再次将填充设置为无，然后选择您喜欢的笔触。

【讨论】：