SVG圆角 | 20px

本文介绍了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>

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

I want to get a CSS-like border-top-right-radius and border-top-bottom-radius effect.

我如何实现这一目标圆角效果？

How can I achieve that rounded corner effect?

推荐答案

我知道回答这个问题已经很晚了但是为了这个缘故，这里是你如何创建一个圆形的矩形与SVG路径：

I know that's late to answer this but for SO sake, here is how you can create a rounder rectangle with SVG Path:

<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" />

Expaination：

M100,100： 移至点（100,100）

h200： 从我们所在位置绘制200px水平线

a20,20 0 0 1 20,20： 绘制一个20px X半径的弧，20px Y半径，顺时针，在X和Y轴上具有20px差异的点

v200 ： 从我们所在位置绘制200px垂直线

a20,20 0 0 1 -20,20： 绘制一个20px X和Y半径的弧，顺时针，与X轴的差异为20px，Y轴的差异为20px

h-200： 从我们所在位置绘制一条-200xx水平线

a20 ，20 0 0 1 -20，-20： 绘制一个20px X和Y半径的弧，顺时针方向，与X轴的-20px差异和Y轴的-20px差异

v-200： 从我们所在位置绘制一条-200xx垂直线

a20,20 0 0 1 20，-20： 绘制一个20px X和Y半径的弧，顺时针，一个点，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>

这篇关于SVG圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！