html - 使用 CSS 为 SVG 中的子类设置样式

Question

我正在为我们在整个网站中使用的常用图标嵌入 SVG 定义:

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none">
  <symbol id="icon-1" viewbox="0 0 113.8 113.8">
    <title>Icon 1</title>
    <g>
      <circle class="st2 outter-circle" cx="56.9" cy="56.8" r="55" />
      <line class="st1" x1="56.9" y1="71.5" x2="56.9" y2="86.3" />
    </g>
  </symbol>
</svg>

(在本示例中已将其截断。)

然后我将其包含在我的标记中:

<svg viewBox="0 0 100 100" class="campus-icon white five-eighths">
    <use xlink:href="#icon-1"></use>
</svg>

我遇到的问题是通过为 SVG 对象设置类来为图标选择配色方案。

这些是默认样式:

.st1 {
    fill:none;
    stroke:#363636;
    stroke-width:0.75;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
}

.st2 {
    fill:none;
    stroke:#363636;
    stroke-width:2;
    stroke-miterlimit:10;
}

我尝试做的是允许 SVG 对象上的类帮助定义图标的描边颜色:

.campus-icon.white .st1,
.campus-icon.white .st2 {
  stroke: #FFF;
}

这似乎在 Firefox 中有效，但在 Chrome 或 Safari 中无效。

因为我的图标有两种颜色，这是我真正需要弄清楚的事情(如果可能的话)。

据我所知，Safari 和 Chrome 不允许我在 SVG 对象上使用选择器，然后在 SVG 本身内使用选择器。

为了检验这个理论，我采用了这个工作示例 (SVG CSS Hover Styling) 并创建了一个 CodePen 实例 (http://codepen.io/ericrovtar/pen/ZeZqRE)。

谁知道有没有办法做到这一点？

谢谢!

-埃里克

Answer 1

不幸的是，Firefox 的行为不符合标准。引用元素的组件应该位于具有单独 CSS 解析树的影子 DOM 中。

但是有一个小漏洞:影子树中的元素继承 其宿主的样式<use>元素。

A - 如果您能够以一种颜色始终应用于笔划而另一种颜色始终应用于填充的方式来制定图标，则可以不为符号定义这些颜色, 并且只为使用元素的类设置它们。

.st1 {
    fill:none;
    stroke-width:0.75;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
}

.st2 { /* the element beeing a rectangle instead of a line */
    stroke:none;
}

.campus-icon.white {
   stroke: #FFF; /* could apply to .st1 */
   fill: #DDD;   /* could apply to .st2 */
}

B - 对于更复杂的情况，您需要将图标分解成相同颜色的部分并分别引用它们，即。即.

<svg viewBox="0 0 100 100" class="campus-icon white five-eighths">
    <use class="part-1" xlink:href="#icon-1-part-1"></use>
    <use class="part-2" xlink:href="#icon-1-part-2"></use>
</svg>