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）。

任何人都知道是否有办法实现这一目标？

谢谢！

-Eric

Answer 1

不幸的是，Firefox的行为是非标准的行为。引用元素的组件应该位于带有单独的CSS分析树的shadow 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 - 对于更复杂的情况，您需要在相同颜色的部分中分解图标并单独引用它们，i。即

<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>

使用CSS在SVG中设置子类

1 个答案: