Выбор подэлементов шаблона SVG с помощью CSS

Question

Я не уверен в правильной разметке структуры, выбора и стиля отдельных экземпляров SVG, вызванных из обычного встроенного SVG-шаблона в HTML-файле.

<!-- first instance to style --> 
<svg id="instance1" viewBox="0 0 799.9 177.8"> 
    <use xlink:href="#template"> 
</svg> 
<!-- second instance, want different styles --> 
<svg id="instance2" viewBox="0 0 799.9 177.8"> 
    <use xlink:href="#template"> 
</svg> 

В моем шаблоне SVG, у меня есть группа <g> нескольких path с, каждый из которых дается имя класса. Я дал группе SVG идентификатор template, и я вызываю его экземпляры.

<!-- first instance to style --> 
<svg id="instance1" viewBox="0 0 799.9 177.8"> 
    <use xlink:href="#template"> 
</svg> 

<!-- second instance, want to apply different styles --> 
<svg id="instance2" viewBox="0 0 799.9 177.8"> 
    <use xlink:href="#template"> 
</svg> 

Теперь я пытаюсь выбрать элементы/стиля эти экземпляры в CSS следующим образом (хотя этот синтаксис не работает!):

/* want to style each instance differently */ 
#instance1 .outline { 
    fill: red; 
} 

#instance2 .outline { 
    fill: green; 
} 

Я предполагаю, что это легко, но я не могу 'Определите правильный способ выбора/стиля этих отдельных SVG, чтобы <use> - общий набор путей.

Любые идеи? Благодаря!

Фрагмент кода для рассмотрения на http://codepen.io/edhebert/pen/GgmKOo

Answer 1

Содержания <use> клонирует в теневом DOM и, следовательно, не может быть непосредственно выбрана и стилем, используя CSS нормальный простой способ, который мы знаем.

Прежде чем идти дальше, обратите внимание, что вы можете применять стили к содержимому элемента <use>, применяя стили к самому <use>. Например, делая это:

<svg id="instance1" viewBox="0 0 799.9 177.8"> <use xlink:href="#template" fill="maroon"> </svg>

.. потомки <use> будут наследовать в fill цвет из <use> элемента. Но все потомки наследуют этот цвет.

Если вы хотите применить определенный цвет только к одному элементу внутри <use>, например, можно использовать другую технику. Однако этот метод в настоящее время ограничен.

Техника работает, используя переменную CSS currentColor. Фабрис Вайнберг написал об этом методе в this blog post over at Codepen.

В принципе, если у вас есть SVG элемент, который вы хотите повторно use, вместо указания fill цвета внутри «шаблона» на каждом пути, вы делаете это вместо того, чтобы:

<g> <path fill="currentColor" d="..." /> </g>

А потом , в вашем CSS вы можете указать color, который вы хотите, зная, что этот цвет будет применен к указанному выше пути, потому что так работает currentColor.

use#instance1 { fill: deepPink; /* will be inherited by contents of `use` */ color: #eee; /* will be inherited by the path element */ }

Кто-то взял эту технику дальше, используя определенные пользователем переменные CSS, чтобы сделать то же самое. Вы можете прочитать об этом here.Техника переменных CSS такая же, как техника Вайнберга, за исключением того, что вы можете определить столько переменных, сколько хотите, использовать их внутри своего шаблона, а затем указать их значения в своем CSS-эти значения будут затем использоваться этими переменными везде, где у вас есть определяли их внутри шаблона. Этот метод работает, но переменные CSS в настоящее время поддерживаются только в Firefox, поэтому я не думаю, что вы использовали его в процессе производства.

Надеюсь, это поможет.