Search code examples
svgrect

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

Solution

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