css - SVG - 访问 xlink :href external source 上的单个节点

Question

我在 CSS-tricks.com 上查看 Chris Coier 的 SVG 技巧，最近还在一次 session 上看到他，他在会上谈到了 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>

听起来不错!但是，如果 SVG 在 HTMl 中内联，我希望能够访问每个符号中的各个节点并使用 CSS 更改它们，就像我通常所做的那样。

看看这个 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;  
}

这也适用于外部文件。 (不幸的是，它不适用于跨域文件)

"But you can insert just the class name of the path. That will work." I mean as long as you stay within the SVG with your selectors it will work.

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