html - 使用 CSS 在 Webkit 中不起作用的 defs 文件中的目标 SVG 图标

Question

我正在开发一个使用一些 SVG 图标的元素，我希望能够针对不同的场景和悬停状态使用 css 设置样式，但我所拥有的似乎在 Webkit 中不起作用，尽管它是在 Firefox 中按预期工作:

http://codepen.io/poopsplat/pen/ycaod

我按照 Chris Choyier 在他的 Icon System with SVG Sprites 文章中概述的方式使用这些 SVG，即在页面上包含一个 defs 文件，然后放置 <svg>页面上引用特定元素 <symbol>元素 id使用 <use>标签。我还利用 Grunt-svgstore 自动构建 SVG defs 文件。

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

我不知道我的工作示例与 Chris 的示例有何不同 — 任何人都知道为什么在 Webkit 中定位这些 SVG 图标会失败？

Answer 1

您的 SVG 图标具有表示属性(如“填充”、“描边”...)，因此这些由 css 定义的用于 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;
}