css - SVG - Accessing individual nodes on xlink:href external source -

css - SVG - Accessing individual nodes on xlink:href external source -

i looking @ chris coier's svg tricks on css-tricks.com , saw him @ conference talked powers of svgs , how can maintain assets in 1 external svg file.

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="beaker" viewbox="214.7 0 182.6 792"> <!-- <path>s , whatever other shapes in here --> </symbol> <symbol id="shape-icon-2" viewbox="0 26 100 48"> <!-- <path>s , whatever other shapes in here --> </symbol> </svg>

then, utilize this:

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

sounds great! but, want able access individual nodes in each symbol , altering them css if svg inline in html.

take @ codepen: http://codepen.io/chriscoyier/pen/hwcxp

i thought this, can't work:

.icon path{ fill: green; }

this does, alters actual source svg

#beaker path { fill: green; }

what want reuse graphical element in grid. , on hover, alter node in svg. on node in particular parent. not of them.

firefox unknown thing can style way. edit: more precise: firefox seems turn symbol kinda in dom. http://codepen.io/type-style/pen/eagbam

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

this works external file. (unfortunatly not crossdomain files)

"but can insert class name of path. work." mean long remain within svg selectors work.

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

css svg symbol xlink