Совершенно верно
Лев Солнцев объяснил: "Так работает use"
Если более подробно, то как только мы применяем команду
use
всё что внутри попадает в
shadow DOM и внешние стили не работают, но есть способы обойти эти ограничения.
1. Так как инлайновые стили имеют более высокий приоритет, чем внешние стили, то необходимо их убрать.
Поэтому сборщики спрайтов автоматически удаляют все инлайн
fill, stroke
2. Так как svg элементы внутри теневого дома не наследуют родительские свойства, необходимо заставить их это сделать
circle rect{
fill:inherit;
stroke:inherit;
}
3 .В svg файл добавить строку с указанием управляющего внешнего файла CSS
<?xml-stylesheet type="text/css" href="css/svg.css" ?>
4. В SVG классы не работают их нужно заменить на id=" ".
Ниже внешний файл svg.css добавил ещё изменение цвета при наведении курсора
#circle{
fill:red;
stroke:black;
stroke-width:1px;
}
#rect{
fill:yellowgreen;
stroke:black;
stroke-width:1px;
}
circle rect{
fill:inherit;
stroke:inherit;
}
#rect:hover {
fill:red;
stroke-width:3px;
}
#circle:hover{
fill: yellowgreen;
stroke-width:3px;
}
Ниже файл SVG к которому применяются внешние стили. Это один из вариантов. Можете брать этот код и вставлять непосредственно в HTML - будет также работать. Можете вставить файл SVG в HTML посредством тега object. Подробнее
здесь.
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="css/svg.css" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="120" height="55" viewBox="0 0 120 55" >
<defs>
<symbol id="circle" >
<circle cx="25" cy="27" r="24"/>
</symbol>
<symbol id="rect" >
<rect x="60" y="2" width="48" height="48"/>
</symbol>
</defs>
<use xlink:href="#circle"></use>
<use xlink:href="#rect"></use>
</svg>
