Question

我有一个SVG图像作为元素的背景。我需要设置图像的颜色，但我似乎无法弄清楚如何做到这一点。我的CSS代码是：

.myclass {
    background-image:url(path/to/my/image) no-repeat;
    display: block;
    width: 5em;
    height: 5em;
}

Answer 1

您是否尝试过简单地在CSS中执行此操作？不确定这是否适合你，因为我没有小提琴。

.myclass {
    background: red (path/to/my/image) no-repeat;
    display: block;
    width: 5em;
    height: 5em;
}

Answer 2

好吧，我对svg的经验很少，但我发现这个很棒的链接来自SO - LINK。

我必须说@Drew Baker是男人！我已经改变了他的代码＃34;查看页面上的所有svgs＆＃34; （.each）只是＆＃34;一个人＆＃34;。

这是FIDDLE。

第一次将鼠标悬停在龙上一两秒，你会看到眼睛变红，就像在CSS中一样。

JS

   var $img = $('img.svg');
   var imgID = $img.attr('id');
   var imgClass = $img.attr('class');
   var imgURL = $img.attr('src');
   $.get(imgURL, function(data) {
   var $svg = $(data).find('svg');
   $.get(imgURL, function(data) {
                                 var $svg = $(data).find('svg');
                                 if(typeof imgID !== 'undefined')
                                   {
                                    $svg = $svg.attr('id', imgID);
                                    }
                                 if(typeof imgClass !== 'undefined')
                                   {
                                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                                    }
                                 $svg = $svg.removeAttr('xmlns:a');
                                 $img.replaceWith($svg);
                                 }, 'xml');
                               });

如何为作为背景的SVG图像填充颜色？

2 个答案: