如何为SVG中的polygon元素（三角形）添加圆角？

首先，polygon元素本身不支持直接通过rx/ry属性设置圆角，得换用path元素来绘制——原理和带圆角的矩形类似，用圆弧（A命令）代替原本的尖角即可。

以下是具体实现示例：

<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- 带圆角的三角形 -->
  <path d="M 60,150 
           L 140,150 
           A 10,10 0 0 1 150,140 
           L 100,60 
           A 10,10 0 0 1 90,60 
           L 50,140 
           A 10,10 0 0 1 60,150 
           Z" 
        fill="#4CAF50" />
</svg>

代码说明： #

• M 60,150：移动到三角形左下角的起始位置（已做圆角偏移）
• L 140,150：绘制底边到右下角尖角的前一个点位
• A 10,10 0 0 1 150,140：绘制右下角的圆角圆弧，其中10,10是圆角半径，0 0 1控制圆弧的方向与大小
• 重复L+A的组合，完成另外两条边和对应圆角的绘制
• Z：闭合路径，形成完整图形

想要调整圆角大小，直接修改A命令里的两个半径数值（比如改成15,15）就行。

另外也可以用滤镜实现圆角，但滤镜会让边缘产生模糊感，精度不如path绘制的方案，更推荐用path的方式。

内容的提问来源于stack exchange，提问作者zosia