SVG矩形的宽度和高度设置为100%。

Question

我正在创建一个SVG元素，并希望更改其背景颜色。根据这个问题和W3C建议，background-color不是SVG的标准样式，必须使用fill代替。然而，fill无效，最常见的解决方案是在svg元素内创建一个rect元素，并使该矩形元素的宽度和高度与svg相似。

因此，以下是建议解决方案的结果：

<svg width="300" height="200">
    <rect width="300" height="200" style="fill: rgb(0, 255, 0);></rect>
</svg>

我随后将其更改为：

<svg width="300" height="200">
    <rect width="100%" height="100%" style="fill: rgb(0, 255, 0);"></rect>
</svg>

（请注意，我的第二次尝试中 width 和 height 均设置为 100%。）现在我的问题是：即使这样可以工作，但使用百分比作为宽度和高度是否符合 W3C 标准？还是说这是一种 hack 方法？谢谢。

- Greeso

Answer 1

使用百分比作为宽度和高度的单位符合W3C标准吗？

是的。根据https://www.w3.org/TR/SVG/coords.html:

支持的长度单位标识符有：em、ex、px、pt、pc、cm、mm、in 和百分比。

- Rick Hitchcock