なぜsvgコンテナはrect CSSを破棄しますか？

Question

これらの波をSVGコンテナ内にレンダリングしようとしています。rects

ただし、レンダリングは、これらの四角形が単独である場合にのみ機能します（svgラッパーを削除してください）。どのように私はラッパーを削除せずに動作させることができます。

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

Answer 1

CSS supported by SVG elements is limited。背景画像のようなものはそのリストにはなく、うまくいかない。 SVGはHTMLではありません。

SVG 2はこのリストをいくらか拡張しますが、HTMLとのパリティはまだありません。

<svg>ラッパーを削除すると、<rect>要素はSVG要素ではなくなり、不明なHTML要素になります。未知のHTML要素がレンダリングされます（未知のSVG要素がレンダリングされないため、SVGとの別の違い）。