html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff,但当我使用上面的css尝试将其更改为黑色时,它没有改变,这是我第一次使用svg,我不知道为什么它不工作。
html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff,但当我使用上面的css尝试将其更改为黑色时,它没有改变,这是我第一次使用svg,我不知道为什么它不工作。
当前回答
这个答案是基于https://stackoverflow.com/a/24933495/3890888,但是使用了一个简单的JavaScript版本的脚本。
您需要将SVG设置为内联SVG。你可以使用这个脚本,通过添加类svg到图像:
/*
* Replace all SVG images with inline SVG
*/
document.querySelectorAll('img.svg').forEach(function(img){
var imgID = img.id;
var imgClass = img.className;
var imgURL = img.src;
fetch(imgURL).then(function(response) {
return response.text();
}).then(function(text){
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(text, "text/xml");
// Get the SVG tag, ignore the rest
var svg = xmlDoc.getElementsByTagName('svg')[0];
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
svg.setAttribute('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
svg.setAttribute('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
svg.removeAttribute('xmlns:a');
// Check if the viewport is set, if the viewport is not set the SVG wont't scale.
if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
}
// Replace image with new SVG
img.parentNode.replaceChild(svg, img);
});
});
然后,现在如果你这样做了:
.logo-img path {
fill: #000;
}
或者可能是:
.logo-img path {
background-color: #000;
}
JSFiddle: http://jsfiddle.net/erxu0dzz/1/
其他回答
对于我来说,我的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);
};
}
尝试纯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/
来自@Praveen的答案是可靠的。
我不能让它在我的工作中响应,所以我为它做了一个jquery悬停函数。
CSS
.svg path {
transition:0.3s all !important;
}
JS / JQuery
// code from above wrapped into a function
replaceSVG();
// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#CCC');
}, function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#3A3A3A');
});
使用滤镜转换为任何颜色。
我最近发现了这个解决方案,希望有人能使用它。 由于该解决方案使用过滤器,它可以用于任何类型的图像。不仅仅是svg。
如果你有一张单色图像,你只是想改变它的颜色,你可以在一些滤镜的帮助下做到这一点。当然,它也适用于多色图像,但你不能针对特定的颜色。只有整个图像。
过滤器来自于如何仅使用CSS过滤器将黑色转换为任何给定颜色中提出的脚本 如果您想将白色更改为任何颜色,您可以在每个过滤器中调整反转值。
.startAsBlack{ display: inline-block; width: 50px; height: 50px; background: black; } .black-green{ filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%); } .black-red{ filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%); } .black-blue{ filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%); } .black-purple{ filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%); } Black to any color: <br/> <div class="startAsBlack black-green"></div> <div class="startAsBlack black-red"></div> <div class="startAsBlack black-blue"></div> <div class="startAsBlack black-purple"></div>
首先必须将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的合著者