SVG RectElement.rx 属性

SVG （Scalable Vector Graphics） 是一种用于描述二维矢量图形的 XML 标记语言。SVG 矩形元素（<rect>）是一个用于创建矩形的标记，它具有一个 rx 属性，用于设置矩形的四个圆角的半径。

语法

<rect rx="value" />

其中，value 为非负数，表示圆角的半径。如果 value 大于矩形高或宽的一半，则只会画出一条直线而不是圆角。

示例

下面的代码演示了如何创建一个带有圆角的矩形：

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80" rx="20" />
</svg>

这将创建一个宽高均为 80px，圆角半径为 20px 的矩形。

运行以上代码，可得到以下的结果：

注意事项

• rx 属性适用于 <rect> 元素，而不适用于其他 SVG 元素。
• 圆角半径不能为负数。
• 如果矩形的宽或高小于等于 rx，则会得到一个全圆形。
• 如果 rx 的值比矩形的高或宽的一半还要大，则只会画出一条直线而不是圆角。

参考链接

• MDN Web Docs - SVG rect element
• W3Schools - SVG rect rx Attribute