svg : rect元素的rx和ry属性演示

马黑黑

rx :

ry :

svg初始代码

【说明】rect 的 rx 和 ry 属性分别定义了水平和垂直方向的半径尺寸，取值范围为 0 ~ rect宽高的一半。rx、ry两个属性只要有一个设置为 0 则另一个怎么设置均无法给 rect 绘制圆角。

起个网名好难

和 border-radius 差不多的意思，可以这样理解吧。

红影

当它们等于一半宽高时，就是圆了。

红影

这个好，可以直接看出当其中一个值变化时，整体图形的变化情况，便于体会xy方向上的圆角变化。谢谢黑黑的详细讲解

小辣椒

这个可以直观的看见

马黑黑

红影 发表于 2024-10-1 22:16
这个好，可以直接看出当其中一个值变化时，整体图形的变化情况，便于体会xy方向上的圆角变化。谢谢黑黑的详 ...

rect 的 rx、ry 和椭圆的 rx、ry 原理一致

马黑黑

起个网名好难 发表于 2024-10-1 20:56
和 border-radius 差不多的意思，可以这样理解吧。

是的，只是取值范围的限制不同

马黑黑

红影 发表于 2024-10-1 22:13
当它们等于一半宽高时，就是圆了。

没错

马黑黑

小辣椒 发表于 2024-10-1 22:26
这个可以直观的看见

原理和 border-radius 差不离

起个网名好难

半径为rx、ry 的 1/4 椭圆与边线相接（切）

梦江南

拉动rx="100" ry="100"就会变圆。

起个网名好难

DIV + CSS border-radius: 100px / 150px;

红影

马黑黑 发表于 2024-10-1 22:26
rect 的 rx、ry 和椭圆的 rx、ry 原理一致

只设置一个可以么？看到今天的帖子里这设了rx是50%，结果也变圆了。

红影

马黑黑 发表于 2024-10-1 22:28
原理和 border-radius 差不离

嗯嗯，这样一说倒是好理解了。

马黑黑

红影 发表于 2024-10-2 12:45
只设置一个可以么？看到今天的帖子里这设了rx是50%，结果也变圆了。

ry不设置时，其值等于rx，和 border-radius 单值一个道理

红影

马黑黑 发表于 2024-10-2 13:01
ry不设置时，其值等于rx，和 border-radius 单值一个道理

嗯嗯，知道了

马黑黑

红影 发表于 2024-10-2 13:53
嗯嗯，知道了

红影

马黑黑 发表于 2024-10-2 13:57

border-radius 是写数字，一个两个到四个，比较好理解，这个直接写了rx所以迷惑了一下，现在知道了，缺省另一个就是数值相同

马黑黑

红影 发表于 2024-10-2 14:28
border-radius 是写数字，一个两个到四个，比较好理解，这个直接写了rx所以迷惑了一下，现在知道了，缺 ...

严格来说，svg的矩形圆角更好理解：一个管水平方向，一个管纵向方向。只不过，两个都设置时，其中任意一个不能为 0

红影

马黑黑 发表于 2024-10-2 18:19
严格来说，svg的矩形圆角更好理解：一个管水平方向，一个管纵向方向。只不过，两个都设置时，其中任意一 ...

是的，你讲过的，其中一个为0 ，就都没效果了。