Как я могу использовать фрагменты SVG и установить background-size: cover?

Question

У меня проблема с размером изображения SVG при использовании фрагментов . Когда я устанавливаю background-size: cover, изображение не покрывает доступное пространство в контейнере.

Вот демоверсия .

Можно ли использовать фрагменты SVG и можно ли использовать contain и cover в background-size с правильным поведением?

Answer 1

Проблема в том, что вы не указываете ширину и высоту родительского SVG. Chrome имеет ошибку, которая требует указания высоты и ширины для фрагментов, чтобы обрабатывать связанные с img CSS методы, не знаю, каков был источник информации, но CSS Трюки задокументировали ее здесь . Я думаю, что высоту и ширину нужно указывать только в родительском SVG, где есть тег use.

Здесь вы можете видеть, что установка высоты и ширины для тега svg в sprite.svg дает одинаковое поведение между обоими версии.

https://codesandbox.io/s/svg-fragment-background-position-problem-i75l3?fontsize=14&hidenavigation=1&theme=dark