border-radius在SVG圖形上的應(yīng)用方法

小樊
101
2024-06-17 17:09:56

在SVG圖形中，可以使用<rect>元素來(lái)創(chuàng)建矩形，并通過(guò)設(shè)置rx和ry屬性來(lái)實(shí)現(xiàn)border-radius的效果。其中，rx屬性用于設(shè)置矩形的水平圓角半徑，ry屬性用于設(shè)置矩形的垂直圓角半徑。

示例代碼如下所示：

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

在上面的示例中，創(chuàng)建了一個(gè)藍(lán)色的矩形，寬度為80，高度為80，并且設(shè)置了水平和垂直圓角半徑為10，實(shí)現(xiàn)了border-radius的效果。您可以根據(jù)需要調(diào)整rx和ry屬性的值來(lái)改變圓角的大小。

0 踩