1

我在 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 中的一个节点。但仅限于该特定父节点中的节点。不是所有的人。

4

1 回答 1

-2

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;  
}
于 2015-03-19T12:42:14.507 回答