css - 更改 SVG 的颜色

Question

我有一些像这样的 svg 图片

circles.svg

<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
    <g fill="none" fill-rule="evenodd">
        <g transform="translate(1 1)" stroke-width="2">
            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
            <path d="M36 18c0-9.94-8.06-18-18-18">
                <animateTransform
                    attributeName="transform"
                    type="rotate"
                    from="0 18 18"
                    to="360 18 18"
                    dur="1s"
                    repeatCount="indefinite"/>
            </path>
        </g>
    </g>
</svg>

然后像这样使用它

<img src="circles.svg" width="50" alt=""/>

但是我不知道怎么改变颜色

我试过了

.color{
 fill:red;
}

<img src="circles.svg" width="50" alt="" class="color"/>

但它不起作用，我不想更改 SVG 我只想通过 html 更改颜色，这可能吗，而不是编辑主要 SVG？

Answer 1

CSS 不适用于跨文档边界。由于您的 SVG 在不同的文档中，因此您不能在 HTML 中使用 CSS 来影响它的样式。

您需要在 HTML 文件中内联 SVG。