更改通过背景图像加载的SVG图像的填充颜色[重复]
如果我通过css背景图像加载SVG图像，如下所示：
.icon {
background-image: url('icon.svg');
}
如何更改图标内部形状或整个图标本身的填充颜色？
谢谢。
共有2个答案
或者，如果您想动态地执行此操作，请尝试：
var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";
拨弄这里
-
问题内容： 将SVG输出直接与页面代码内联放置，我能够像这样简单地用CSS修改填充颜色： 这很好用，但是我正在寻找一种方法，当它用作Background-IMAGE时，修改SVG的“填充”属性。 现在如何更改颜色？可能吗 作为参考，这是我的外部SVG文件的内容： 问题答案： 一种方法是从某种服务器端机制为svg提供服务。只需创建一个资源服务器端，即可根据GET参数输出svg，然后将其提供给某个网址
-
我有一个SVG作为div中的背景图像。当我通过JQuery添加一个类“svg”时，我想改变这个SVG的填充颜色。 我该怎么做呢？ 以下是我目前为止的代码: 谢谢 899年
-
我想为svg（莲花）使用不同的颜色。让我们说一个绿色的盒子命名为TOPS，红色的Rest室，白色的其余部分。我想通过css设置颜色。 svg在css中被引用为背景图像： 背景图片： 网址（“https://cdn.shopify.com/s/files/1/1011/6932/t/20/assets/lotos.svg?14455316687248826498”）; 我如何才能做到这一点？
-
问题内容： 给定透明的PNG以白色显示简单形状，是否有可能通过CSS更改其颜色？某种覆盖还是什么？ 问题答案： 您可以将筛选器与和一起使用：筛选器相对于浏览器而言是较新的，但根据以下CanIUse表，超过90％的浏览器均支持它们 您可以将图像更改为灰度，棕褐色等（请看示例）。 因此，您现在可以使用滤镜更改PNG文件的颜色。
-
问题内容： 是否可以为SVG 元素设置a ？ 例如，如果设置了element ，则CSS样式有效，但都不起作用。 问题答案： 您可以通过将背景变成图案来实现： 根据您的图像调整宽度和高度，然后从这样的路径中引用它：
-
问题内容： 我正在尝试使用javascript更改svg图像颜色。这可能吗？我可以将其加载为对象，然后以某种方式访问颜色/图像数据。 每一个回应或提示都将受到高度赞赏！ 问题答案： 当然，这是一个示例（省略了标准HTML样板）：