html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff，但当我使用上面的css尝试将其更改为黑色时，它没有改变，这是我第一次使用svg，我不知道为什么它不工作。
当前回答
简单的 JS
使用以下简短的函数ImgToSvg将img转换为svg(包括类列表)
<img src="logo.svg" onload="ImgToSvg(this)" class="logo-img"/>
const ImgToSvg= async (img) => { const s = document.createElement('div'); s.innerHTML = await (await fetch(img.src)).text(); s.firstChild.classList = img.classList; img.replaceWith(s.firstChild) } .logo-img { fill: yellow; } <img onload="ImgToSvg(this)" class="logo-img" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9InN0cm9rZTojNTU1NTU1O3N0cm9rZS13aWR0aDoyIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtc2l6ZT0iMTgiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGFsaWdubWVudC1iYXNlbGluZT0ibWlkZGxlIiBmb250LWZhbWlseT0ibW9ub3NwYWNlLCBzYW5zLXNlcmlmIiBmaWxsPSIjNTU1NTU1Ij4zMDAmIzIxNTszMDA8L3RleHQ+PC9zdmc+" /> <!-- in this snippet I use dataURI in img src to avoid CORS problems witch reading svg data from external source by js -->
这是对Waruyama answer的改进，提供了简短的js函数
其他回答
尝试纯CSS:
.logo-img {
/* to black */
filter: invert(1);
/* or to blue */
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}
更多信息请参见本文https://blog.union.io/code/2017/08/10/img-svg-fill/
如果你只是在真实颜色和黑白之间切换图像，你可以设置一个选择器为:
{过滤器:没有;}
另一个是:
{filter:grayscale(100%);}
对于我来说，我的svg在使用img和svg时看起来有所不同。所以我的解决方案将img转换为csv，在内部更改样式并返回img(尽管它需要更多的工作)，我相信“blob”也有更好的兼容性比upvotes使用“掩码”的答案。
let img = yourimgs[0];
if (img.src.includes(".svg")) {
var ajax = new XMLHttpRequest();
ajax.open("GET", img.src, true);
ajax.send();
ajax.onload = function (e) {
svg = e.target.responseText;
svgText = "";
//change your svg-string as youd like, for example
// replacing the hex color between "{fill:" and ";"
idx = svg.indexOf("{fill:");
substr = svg.substr(idx + 6);
str1 = svg.substr(0, idx + 6);
str2 = substr.substr(substr.indexOf(";"));
svgText = str1 + "#ff0000" + str2;
let blob = new Blob([svgText], { type: "image/svg+xml" });
let url = URL.createObjectURL(blob);
let image = document.createElement("img");
image.src = url;
image.addEventListener("load", () => URL.revokeObjectURL(url), {
once: true,
});
img.replaceWith(image);
};
}
首先必须将SVG注入到HTML DOM中。
有一个名为SVGInject的开源库可以为您完成这项工作。它使用onload属性来触发注入。
下面是一个使用SVGInject的最小示例:
<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>
图像加载后，onload="SVGInject(this)将触发注入，<img>元素将被src属性中提供的SVG文件的内容所取代。
它解决了SVG注入的几个问题:
svg可以隐藏，直到注射完成。如果在加载时已经应用了样式，这就很重要，否则会导致简短的“无样式内容闪光”。 <img>元素自动注入自身。如果动态添加svg，就不必担心再次调用注入函数。 向SVG中的每个ID添加一个随机字符串，以避免在多次注入SVG时在文档中多次使用相同的ID。
SVGInject是纯Javascript，适用于所有支持SVG的浏览器。
声明:我是SVGInject的合著者
如果你想要一个动态的颜色，不想使用javascript，也不想使用内联SVG，使用CSS变量。适用于Chrome, Firefox和Safari。编辑:和Edge
<svg>
<use href="logo.svg" style="--color_fill: #000;"></use>
</svg>
在SVG中，将style="fill: #000"的任何实例替换为style="fill: var(——color_fill)"。
