Question

我在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进行更改，就像我通常在SVM在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文件）

＆＃34;但您只能插入路径的类名。那会有用。＆＃34; 我的意思是只要你使用你的选择器留在SVG内就可以了。

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

SVG - 访问xlink：href外部源上的各个节点

1 个答案: