如何使用CSS（jQuery SVG图像替换）更改SVG图像的颜色？
这是我自己提出的一个方便的代码的自我问答。
目前，嵌入SVG图像并不容易，然后通过CSS访问SVG元素。 有各种使用JS SVG框架的方法，但是如果你所做的只是制作一个带有翻转状态的简单图标，它们就会过于复杂。
所以这就是我想出的，我认为这是迄今为止在网站上使用SVG文件的最简单方法。 它从早期的文本到图像替换方法中采用了它的概念，但据我所知SVG从未做过。
这是一个问题：
如何在不使用JS-SVG框架的情况下嵌入SVG并将其颜色更改为CSS？
首先，在HTML中使用IMG标签来嵌入SVG图形。 我使用Adobe Illustrator制作图形。
<img id="facebook-logo" class="svg social-link" src="/images/logo-facebook.svg"/>
这就像你嵌入正常图像一样。 请注意，您需要将IMG设置为一类svg。 “社交链接”类仅仅是为了举例。 该ID不是必需的，但是很有用。
然后使用这个jQuery代码（在单独的文件中或在HEAD中内联）。
/*
* Replace all SVG images with inline SVG
*/
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
上面的代码所做的是使用类的'svg'查找所有IMG，并将其替换为链接文件中的内联SVG。 其巨大的优势在于，它允许您现在使用CSS来更改SVG的颜色，如下所示：
svg:hover path {
fill: red;
}
我编写的jQuery代码还在原始图像ID和类中进行了端口连接。 所以这个CSS也起作用：
#facebook-logo:hover path {
fill: red;
}
要么：
.social-link:hover path {
fill: red;
}
你可以在这里看到它的一个例子：http://labs.funkhausdesign.com/examples/img-svg/img-to-svg.html
我们有一个更复杂的版本，其中包含缓存：https://github.com/funkhaus/style-guide/blob/master/template/js/site.js#L32-L90
样式
svg path {
fill: #000;
}
脚本
$(document).ready(function() {
$('img[src$=".svg"]').each(function() {
var $img = jQuery(this);
var imgURL = $img.attr('src');
var attributes = $img.prop("attributes");
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Remove any invalid XML tags
$svg = $svg.removeAttr('xmlns:a');
// Loop through IMG attributes and apply on SVG
$.each(attributes, function() {
$svg.attr(this.name, this.value);
});
// Replace IMG with SVG
$img.replaceWith($svg);
}, 'xml');
});
});
或者，你可以使用CSS mask ，授予浏览器支持不好，但你可以使用后备
.frame {
background: blue;
-webkit-mask: url(image.svg) center / contain no-repeat;
}
上一篇: How to change color of SVG image using CSS (jQuery SVG image replacement)?