xml - SVG 圆角

Question

我有以下 SVG:

<svg>
  <g>
    <path id="k9ffd8001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#a0a700"></path>
    <path id="kb8000001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="url(#k9ffb0001)"></path>
  </g>
</svg>

我想获得类似 CSS 的 border-top-right-radius 和 border-top-bottom-radius 效果。

如何实现圆角效果？

Answer 1

以下是使用 SVG 路径创建圆角矩形的方法:

<path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" />

解释

m100,100: 移动到点 (100,100)

h200:从我们所在的位置画一条 200px 的水平线

a20,20 0 0 1 20,20: 顺时针绘制一条 X 半径为 20px，Y 半径为 20px 的圆弧，到 X 轴和 Y 轴上相差 20px 的点

v200:从我们所在的位置画一条 200px 的垂直线

a20,20 0 0 1 -20,20:顺时针绘制 X 和 Y 半径为 20px 的圆弧，到 X 轴 -20px 和 Y 轴分别为 20px 的点轴

h-200:从我们所在的位置画一条 -200 像素的水平线

a20,20 0 0 1 -20,-20: 顺时针绘制一条 X 和 Y 半径为 20px 的圆弧，到 X 和 -20px 相差 -20px 的点在 Y 轴上

v-200:从我们所在的位置画一条 -200 像素的垂直线

a20,20 0 0 1 20,-20: 顺时针绘制 X 和 Y 半径为 20px 的圆弧，到 X 轴相差 20px 和 Y 轴相差 -20px 的点轴

z: 关闭路径

<svg width="440" height="440">
  <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="black" stroke-width="3" />
</svg>