css – img src SVG更改填充颜色

html

<img src="logo.svg" alt="logo" class="logo-img">

css

.logo-img path {
  fill: #000;
}

上面的svg加载和本机填充：#fff但当我使用上面的CSS尝试改变它的黑色它不会改变，这是我第一次玩SVG，我不知道为什么它不工作。

解决方法

您需要使SVG成为内联SVG。您可以使用此脚本，通过向图像添加类svg：

/*
 * 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');

        // Check if the viewport is set,if the viewport is not set the SVG wont't scale.
        if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
            $svg.attr('viewBox','0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
        }

        // Replace image with new SVG
        $img.replaceWith($svg);

    },'xml');

});

然后，现在如果你做：

.logo-img path {
  fill: #000;
}

或者可能：

.logo-img path {
  background-color: #000;
}

这工作！

小提琴：http://jsfiddle.net/wuSF7/462/

上述脚本的积分：How to change color of SVG image using CSS (jQuery SVG image replacement)?

原文链接：https://www.f2er.com/css/223720.html

css – img src SVG更改填充颜色

解决方法

猜你在找的CSS相关文章