为什么svg容器会破坏rect css？

Question

所以我试图在svg容器中渲染这些wave 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元素）。