html - 通过 css 访问 svg 的路径属性

Question

我用 illustrator 保存了我的 svg 图片，内容如下:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="10.3 126 503.7 272" style="enable-background:new 10.3 126 503.7 272;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#B7B7B7;}
    .st1{fill:#33BFC1;}
    .st2{fill:#B23939;}
</style>
<path fill="#B7B7B7" class="st0" d="M20.4,126h113c4.3,0,8"/>
<path class="st1" d="M504,126H390c-4.3,0-8,2.7-9.4,6"/>
<path class="st2" d="M420.9,384.6l-92.2-252"/>
</svg>

在我的 html 中我有:

<a><img class="logo" src="logo.svg"></a>

由于 svg 中有 3 个路径，我希望能够使用 css 为每个路径设置样式。我知道我可以直接编辑 svg 文件，但我的想法是通过 css 更改它。

我试过类似的东西

.st0 {
fill:#fff
}
.st0 path {
fill:#fff
}

但都没有用

Answer 1

这应该有效，只有当它放在前面的 .st0 声明之后时。

.st0 {
fill:#fff
}

这是声明第二个示例的正确方法。

path.st0  {
fill:#fff
}

但这两个都必须在 svg 代码块之后。

我认为正在发生的事情是您的 body 中有 SVG，并且您在头部中声明了 css。所以你的 fill:#fff 被 SVG 元素内的 CSS 覆盖。