У меня есть SVG, встроенный в мой HTML, например, так:
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 256 256">
<defs>
<g id="my_element">
<polygon points="10 4829 45 294"/>
<polygon points="30 390 93 20"/>
</g>
</defs>
</svg>
...
Позже в моем html я ссылаюсь на элемент svg следующим образом:
<svg viewBox="0 0 256 256" class="style1"><use xlink:href="#my_element"></use></svg>
Это работает отлично. Если в моем svg есть несколько групп, я могу вставить их в HTML, просто сославшись на их идентификатор группы (#my_element).
Кроме того, я могу вносить изменения в CSS для каждого SVG на лету, например, так:
svg.style1 {
fill: red;
}
Тем не менее, это где моя проблема. Я не могу внести изменения атрибутов CSS в отдельные компоненты SVG. Это не работает:
svg.style1 polygon {
stroke: purple;
fill: yellow;
}
Очевидно, что я могу внести эти изменения непосредственно в SVG, но мне нужно иметь возможность вставлять несколько SVG одного и того же #my_element и управлять цветами на отдельном уровне. Если бы я внес изменения в сам SVG, то все элементы имели бы одинаковые цвета независимо от того, какой стиль я применил к SVG. Поэтому мне нужно уметь делать такие вещи:
svg.style1 polygon {
stroke: purple;
fill: yellow;
}
svg.style2 polygon {
stroke: red;
fill: white;
}
Можно ли это сделать? Можно ли управлять атрибутами CSS отдельных компонентов SVG при использовании синтаксиса use xlink:href ?