SVG r 属性

在 SVG 中，r 属性用于定义元素的圆角半径。圆角通常应用于矩形元素，例如 <rect> 元素。

基本语法

<rect rx="x" ry="y" />

r 属性有两个值，分别是 rx 和 ry。其中 rx 指定矩形圆角的水平半径，ry 指定矩形圆角的垂直半径。如果两个值都被指定，则 rx 表示水平方向，ry 表示垂直方向。

案例演示

下面是一个矩形元素应用 rx 和 ry 属性的样例：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="20" width="100" height="100" rx="20" ry="40" />
</svg>

效果如下图所示：

注意事项

• 当 rx 或 ry 的值为 0 时，矩形角不会出现圆角。
• 当 rx 或 ry 的值大于或等于矩形的一半宽度或高度时，矩形将被裁剪为一个椭圆形。
• 当 rx 或 ry 的值小于或等于矩形的一半宽度或高度时，其值被忽略。

总结

r 属性是 SVG 中非常有用的属性，可以轻松地定义矩形元素的圆角。使用 rx 和 ry 可以为矩形元素赋予更多的设计感。同时，需要注意的是，当 rx 或 ry 大于等于矩形的一半宽度或高度时，矩形将被裁剪为一个椭圆形。