Тэг <use/> не работает в data:image/svg+xml,<svg

#css #svg

Я хотел добавить .svg в мою .htm страницу. Но 'use' не работает в 'svg' при вставке
с data:image. Как это сделать?

background:url("data:image/svg+xml,")

    

Ответы

Ответ 1

Вы правильно заметили, что  не работает, когда svg код добавляют в Html в качестве
background.
USE это очень своеобразная команда. Как только вы её задействовали, элемент сразу
попадает в shadow DOM. И возникает определенное количество проблем, со стилизацией
например. 

Для проверки убрал use из вашего примера - всё работает  



#car {
width:200px;
height:200px;
 background-image: url('data:image/svg+xml;utf8,');
}





Для использования use необходимо использовать другие способы добавления кода SVG
в Html: например инлайн, когда код svg непосредственно встраивается в веб страницу.
Подробнее о других способах встраивания SVG -- тут.    

Ниже пример инлайн добавления кода svg c работающим use: