Почему контейнер SVG ломает прямоугольник CSS?

Так что я пытаюсь сделать эти волны rects внутри контейнера SVG.

Однако рендер работает только тогда, когда эти прямоугольники сами по себе (удалите оболочку svg). Как я могу заставить его работать без удаления обертки.

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

1 ответ

Решение

CSS, поддерживаемый элементами SVG, ограничен. Такие вещи, как background-image, отсутствуют в этом списке и не работают. SVG это не HTML.

SVG 2 несколько расширит этот список, но все равно не будет иметь паритета с HTML.

Когда вы удаляете <svg> обертка <rect> элементы перестают быть элементами SVG и становятся неизвестными элементами HTML. Отображаются неизвестные элементы HTML (еще одно отличие от SVG, поскольку неизвестные элементы SVG не отображаются).

Другие вопросы по тегам