user2167582
user2167582

Reputation: 6378

Why does svg container break rect css?

So im trying to render these wave rects inside an svg container.

However the render only works when these rectangles are on their own (delete the svg wrapper). How can I get it working without deleting the wrapper.

http://codepen.io/zmwuqi/pen/BRrvjP

Upvotes: 0

Views: 112

Answers (1)

Robert Longson
Robert Longson

Reputation: 124169

The CSS supported by SVG elements is limited. Things like background-image are not in that list and don't work. SVG is not HTML.

SVG 2 will extend that list somewhat but still won't have parity with HTML.

When you remove the <svg> wrapper the <rect> elements stop being SVG elements and become unknown HTML elements. Unknown HTML elements are rendered (another difference with SVG as unknown SVG elements are not rendered).

Upvotes: 2

Related Questions