border-radius

border-radius在SVG图形上的应用方法

小樊
112
2024-06-17 17:09:56
栏目: 编程语言

在SVG图形中,可以使用<rect>元素来创建矩形,并通过设置rxry属性来实现border-radius的效果。其中,rx属性用于设置矩形的水平圆角半径,ry属性用于设置矩形的垂直圆角半径。

示例代码如下所示:

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" rx="10" ry="10" fill="blue" />
</svg>

在上面的示例中,创建了一个蓝色的矩形,宽度为80,高度为80,并且设置了水平和垂直圆角半径为10,实现了border-radius的效果。您可以根据需要调整rxry属性的值来改变圆角的大小。

0
看了该问题的人还看了