Html 使用 CSS 更改 svg 图像的颜色

Changing the color of an svg image using CSS

提问by darkhorse

I have the following svg image in my html file:

我的 html 文件中有以下 svg 图像：

<img class="svg" src="my-image-link.svg">

Now, I am trying to change the color using this css code:

现在，我正在尝试使用此 css 代码更改颜色：

.svg path {
    fill: black;
}

However, nothing changes. What is the correct way to change the color of an svg image's path using css? Thanks!

然而，什么都没有改变。使用 css 更改 svg 图像路径颜色的正确方法是什么？谢谢！

回答by FalcoB

if you are using the svg in a image tag, it is not possible to change anything within the SVG...

如果您在图像标签中使用 svg，则无法更改 SVG 中的任何内容...

to do that, you have to include the whole SVG inline... look for example here: link

要做到这一点，你必须包含整个 SVG 内联......在此处查找示例：链接

回答by rorymorris89

You have to use an inline SVG, where the path element is inside the HTML, as opposed to linking to an external SVG.

您必须使用内联 SVG，其中路径元素位于 HTML 内部，而不是链接到外部 SVG。

Example: https://jsfiddle.net/fznuckb0/1/

示例：https: //jsfiddle.net/fznuckb0/1/

.path-name {
    fill: tomato;
    fill-rule: evenodd;
}