5

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>

I then changed that to:

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

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

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

Thanks.

Greeso
  • 7,544
  • 9
  • 51
  • 77

1 Answers1

10

is using percentages in width and height a W3C standard?

Yes. According to https://www.w3.org/TR/SVG/coords.html:

The supported length unit identifiers are: em, ex, px, pt, pc, cm, mm, in, and percentages.

Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79