Question

我正在开发一个使用一些SVG图标的项目，我希望能够使用css为不同的场景和悬停状态设置样式，但是我在Webkit中似乎没有工作，尽管它是在Firefox中按预期工作：

我正在使用这些SVG，就像Chris Choyier在他的带有SVG Sprites的Icon System中所概述的那样，通过在页面上包含一个defs文件，然后将<svg>个元素放在引用特定的页面上<symbol>使用id标记的<use>个元素。我也在使用Grunt-svgstore来自动构建SVG defs文件。

Chris的示例（http://codepen.io/chriscoyier/pen/EBHlD）在Webkit中运行良好，即使您开始将图标嵌套到容器中并以这种方式定位它们，所以这不是问题。在该特定示例中，Chris使用<g>个元素并将其作为目标，而Grunt-svgstore的自动输出文件将<symbol>个元素中的各个图标包含在HTML中引用的id个，但我尝试以这种方式格式化我的SVG defs文件来测试这是否是问题，而事实并非如此。

我对于我的工作示例和Chris的例子有什么不同而感到茫然 - 任何人都有任何关于为什么在Webkit中瞄准这些SVG图标失败的想法？

Answer 1

您的SVG图标具有演示属性（例如＆＃34;填充＆＃34;，＆＃34;笔画＆＃34; ...），因此忽略由css for use元素定义的这些样式。
因此，您应该删除所有演示文稿属性我做了简单的样品。 http://jsfiddle.net/n3n2vLk8/

SVG（HTML）

<svg style="display:none">
    <defs>
        <symbol id="withFill" viewBox="-5 -5 10 10">
            <circle r="5" fill="orange"/><!--You can't override this value-->
        </symbol>
        <symbol id="noFill" viewBox="-5 -5 10 10">
            <circle r="5"/>
        </symbol>
    </defs>
</svg>
<svg width="200px" height="100px">
    <use xlink:href="#withFill" width="100" height="100"/>
    <use xlink:href="#noFill" x="100" width="100" height="100"/>
</svg>

的CSS：

use{
    fill: red;
}

使用CSS无法在Webkit中使用defs文件定位SVG图标

1 个答案: