Как растянуть прелоадер с svg?

Question

[Wasya UK]

Почему когда ставлю длину родителю в 100% (#preloader)все rect растягиваются, но прозрачного текста с анимацией не видно? В чем проблема? По идее, все блоки должны подстраиваться под высоту и ширину, но результата 0. Что я делаю не так? Заранее спасибо)

Answer 1

[sdgroup14]

если я правильно понял. Вы хотите прелоадер тоже на всю высоту экрана.
во первых, для svg не достаточно в css задать высоту и ширину или fill и т.д. Основную роль играют атрибуты, у вас в svg атрибутах max-height 100%, a rect 100px.
но это еще пол беды, там еще есть атрибут viewBox - это тоже касается размеров :).
Я бы вам сделал, если б знал что нужно, но мой вам совет почитайте хорошо про svg....
Я лично настроил gulp таску которая полностью чистит svg обьект атрибуты фил строук ширину высоту и потом после добавляю ему стили

Comments

[Wasya UK]

Ну я вот к #main-rect-inverted применил width: 100%, height: 100, убрал viewBox, но не помогло. О размерах читал тут css.yoksel.ru/svg-sizes

[sdgroup14]

A rect у вас 100px...

[Wasya UK]

sdgroup14, Оу! Спасибо, все заработало)