SVG - 访问 xlink:href 外部源上的单个节点答案

【问题标题】：SVG - Accessing individual nodes on xlink:href external sourceSVG - 访问 xlink:href 外部源上的单个节点
【发布时间】：2015-01-07 20:55:52
【问题描述】：

我在 CSS-tricks.com 上查看 Chris Coier 的 SVG 技巧，最近还看到他在一次会议上谈到了 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 中的一个节点。但仅限于该特定父节点中的节点。不是全部。

【问题讨论】：

您不能使用 CSS 选择器访问重复使用的图形的一部分；选择器只能应用于原始图形（影响图标的所有副本）或使用元素本身（影响图标实例继承的样式）。为了获得跨浏览器的悬停效果，您需要重新定义要更改的图标部分，以便它使用继承的样式。然后，您可以在 use 元素或其父 SVG 上定义悬停效果。 More details on this question;将此标记为重复。
请注意，虽然链接的问题与悬停效果特别相关，但它也适用于您想要对单个图标实例进行的任何其他样式更改。
我明白了，所以它仍然回到将 SVG 内联到文档中。至少对于这类事情。感谢您的详细回答！ :)

标签： css svg symbols xlink

【解决方案1】：

Firefox 做了一些未知的事情，您可以通过这种方式对其进行样式设置。
编辑：

更准确地说：
Firefox 似乎将这个符号变成了 DOM。 http://codepen.io/Type-Style/pen/EaGbam

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

这也适用于外部文件。（不幸的是，它没有跨域文件）

“但是你可以只插入路径的类名。这样就可以了。” 我的意思是，只要您使用选择器留在 SVG 中，它就可以工作。

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

【讨论】：

这个答案不清楚，似乎不适用于上述问题。添加一些代码来支持它，并解释原因。（另外，为什么是 Firefox？这个问题没有特别指定任何浏览器，这在其他浏览器上是否有效？）
Firefox 有一个已知的错误，当我们修复它时，它不会再以这种方式工作，所以建议任何人使用它没有多大意义。
感谢@RobertLongson。我同意。