CODEWITHSUNDEEP
csssvgstyling
Walmink
Walmink

Reputation: 177

"Background" style property ignored for <svg> elements inside of other <svg> elements

A simple experiment with two nested <svg> elements shows:

Another experiment adds a transform attribute to both <svg>s shows that this attribute is also ignored by the inner <svg>.

Any reason why the inner <svg> element ignores properties like background styling and transform? In general, is there documentation of which attributes are and aren't applied to nested <svg> elements?

Upvotes: 6

Views: 991

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101830

The issue is that, when an <svg> is embedded in HTML, it kind of does double-duty as both an SVG element and an HTML one.

For consistency, some HTML features work with the outermost <svg> elements, but they don't work for inner/nested SVG elements. Remember, SVG is a different standard to HTML. It has a different purpose, and it doesn't make sense for all HTML features to work with SVG elements. Having said that, where it makes sense, certain HTML features are supported, or will be supported soon.

One early addition was making background/background-color work with outermost <svg> elements. AFAIK all browsers support that now.

The same applies to transform. The current SVG spec (1.1) does not allow transform on the <svg> element, but for consistency with other HTML elements, browsers support it for outermost <svg> elements. In the upcoming SVG 2 standard, transform will be allowed on inner <svg> elements as well. In fact Firefox has already implemented that. I believe it is currently the only browser that does.

If you want an approach that works everywhere, the following usually does the trick.

<svg ...>
  <rect width="100%" height="100%" fill="#00f"/>
  ...
</svg>

Upvotes: 6

Walmink
Walmink

Reputation: 177

I found another question with the same problem, and another duplicate that includes this link to the official W3C documentation, showing which attributes are allowed on a nested <svg> component.

In summary, nested <svg>s cannot do everything top-level <svg>s can and if you are having trouble, check the W3C documentation to see whether the thing you are trying to do is simply not supported.

Upvotes: 0

Related Questions