SVG RECT宽度和高度为100％ [英] SVG RECT Width and Height of 100%

问题描述

我正在创建SVG元素，并想更改其背景颜色.根据此问题，并根据最常见的解决方案是在svg元素内创建一个rect元素，并使该rect元素的宽度和高度与svg相似.

I am creating an SVG element, and would like to change its background color. As per this question, and as per W3C recommendations, background-color is not a standard style for SVG, but fill must be used instead. However, fill does not work and the most common solution was to create a rect element inside the svg element and make that rect element have a width and height similar to that of the svg.

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

So, the following is the outcome of the suggested solution:

<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％).

(note that I have width and height set to 100% in my second attempt).

现在我的问题是:尽管这可行，但使用宽度和高度百分比还是W3C标准吗?还是黑客?

Now my question: even though this works, is using percentages in width and height a W3C standard? Or is it a hack?

谢谢.

推荐答案

使用宽度和高度百分比是W3C标准吗?

is using percentages in width and height a W3C standard?

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

支持的长度单位标识符为:em，ex，px，pt，pc，cm，mm，in和百分比.

这篇关于SVG RECT宽度和高度为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！