将SVG添加到网页中？

Question

我如何通过CSS在网页中添加SVG并更改其颜色？

我尝试过：

<img src="my.svg" class="svg"/>

.svg{
    fill: white;
}

但是没有运气。

请提供纯CSS解决方案，不需要任何后备方案，只支持新浏览器。

- panthro

---

有许多包含SVG的方法，请看这里：https://css-tricks.com/using-svg。重要的是要说一些方法可能看起来更容易（比如像你所做的使用`<img>标签或将其用作background-image`），但它只会导致你面临的问题：无法在SVG内部级联外部CSS，即页面样式不会反映在加载的SVG中。 - Erick Petrucelli

Answer 1

这种方式行不通。如果您直接包含SVG，可以更改填充颜色，例如：

HTML：

<p>Some other webpage content</p>
<svg class="my-svg">
    <g>
        <path fill="..."></path>
        <path fill="..."></path>
    </g>
</svg>
<p>Some other webpage content</p>

CSS:

.my-svg *{
    fill:white;
}

所以，您可以通过Web检查my.svg，并将其内容复制粘贴到目标页面。然后您可以对其进行样式设置。

- nicael