svg-fill在Firefox中不起作用

Question

我正在尝试填充我的svg，在chrome和IE中一切都很好，但在Firefox中却没有。在Firefox中，我可以在检查时看到样式，但它没有得到颜色。如果我试图在css中只保留没有社交链接类的路径，那么它是有效的，但我希望它有像.social链接路径这样的父类。提前谢谢。

$(document).ready(function() {
jQuery('.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');
});
})

.social-link path {
fill: #ee44ff;
}

<img id="facebook-logo" class="svg social-link" src="images/facebook.svg">

Answer 1

而不是通过img标记访问svg。你能在任何编辑器中打开SVG图像吗？复制代码并将其粘贴到你的html中。然后将类添加到路径并应用css。它会解决你的问题注意在代码中，确保检查路径没有fill="none"这样的属性。如果是，则删除它。