SVG - Доступ к отдельным узлам по xlink: внешний источник href

Question

Я смотрел на SVG-трюки Криса Койера на CSS-tricks.com, а также недавно видел его на конференции, где он говорил о полномочиях SVG и о том, как вы можете сохранить все активы в одном внешнем svg-файле.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> 

    <symbol id="beaker" viewBox="214.7 0 182.6 792"> 
    <!-- <path>s and whatever other shapes in here --> 
    </symbol> 

    <symbol id="shape-icon-2" viewBox="0 26 100 48"> 
    <!-- <path>s and whatever other shapes in here --> 
    </symbol> 

</svg> 

Тогда вы могли бы просто использовать его как это:

<svg class="icon"> 
    <use xlink:href="#shape-icon-1" /> 
</svg> 

<svg class="icon"> 
    <use xlink:href="#shape-icon-2" /> 
</svg> 

Звучит здорово! НО, я хочу иметь доступ к отдельным узлам в каждом символе и изменять их с помощью CSS, как обычно, если SVG был встроен в HTMl.

Взгляните на этот CodePen: http://codepen.io/chriscoyier/pen/Hwcxp

Я думал, что я мог бы сделать это, но я не могу заставить его работать:

.icon path{ 
    fill: green; 
} 

Это делает, но это изменяет фактический источник svg

#beaker path { 
fill: green; 
} 

Что я хочу сделать, это повторно использовать графический элемент в сетке. И при зависании, измените узел в svg. Но только на узле этого конкретного родителя. Не все из них.

Answer 1

Firefox делает какую-то неизвестную вещь, где вы можете ее стилизовать таким образом.
Редактировать:

Точнее:
Возможно, Firefox превратил этот символ в DOM. http://codepen.io/Type-Style/pen/EaGbam

.hoverME:hover path, .hoverME:hover circle { 
    fill: red; 
} 

Это также работает с внешним файлом. (К сожалению, это не с файлами CrossDomain)

«Но вы можете вставить только имя класса пути. Это будет работать». Я имею в виду, что пока вы остаетесь в SVG с помощью ваших селекторов, он будет работать.

circle:hover, path:hover { 
    fill: red; 
}