从外部源加载到img标签时更改SVG的填充颜色

I have quite a few SVG icons saved in different *.svg files. If I insert them into the page directly I can freely control their colors with the fill css option. My trouble comes that I need to change the color of the svg and then display it in an img tag, because an important for the project library can only work with that. Is there a solution to my predicament?

我有很多SVG图标保存在不同的* .svg文件中。如果我直接将它们插入页面，我可以使用fill css选项*控制它们的颜色。我的麻烦来了，我需要更改svg的颜色，然后将其显示在img标签中，因为项目库的一个重要部分只能使用它。我的困境有解决方案吗？

<img src='img/graphic.svg' />

I need to be able to change the color of the svg and receive similar or the same end result. Is this even possible?

我需要能够更改svg的颜色并获得相似或相同的最终结果。这有可能吗？

EDIT

编辑

Is it possible to include javascript in the svg file that will read parameters and change color accordingly? For example:

是否可以在svg文件中包含javascript，它将读取参数并相应地更改颜色？例如：

<img src='img/graphic.svg?fill=fff' />

I am not sure how can this be achieved.

我不确定如何实现这一目标。

1 个解决方案

#1

You can pass your svg doc as a dataURL :

您可以将svg doc作为dataURL传递：

<img src="data:image/svg+xml; charset=utf8, %3Csvg%20version%3D%221.1%22%20id%3D%22first%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20250%20250%22%20height%3D%22250%22%20width%3D%22250%22%3E%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2250%22%20fill%3D%22pink%22%2F%3E%3C%2Fsvg%3E"/>

So, either you download the file through xhr, append it to an svg element and then convert it to this dataURL,

因此，要么通过xhr下载文件，将其附加到svg元素，然后将其转换为此dataURL，

var parser = new DOMParser();
var svgDoc = parser.parseFromString(xhr.response, "image/svg+xml");
svgDoc.querySelector('#yourElement').setAttributeNS(null, 'fill', yourColor);
var dataURL = encodeURIComponent(new XMLSerializer().serializeToString(svgDoc));
img.src = dataURL;

or you load it through an <object> or an <iframe> element and then convert its contentDocument :

或者通过

var obj = document.createElement('object');
obj.src = "path/to/your/file.svg";
obj.onload = function(){
  var svgDoc = obj.contentDocument;
  svgDoc.querySelector('#yourElement').setAttributeNS(null, 'fill', yourColor);
  var dataURL = encodeURIComponent(new XMLSerializer().serializeToString(svgDoc));
  img.src = dataURL;
}

Of course, these solutions are limited by the cross-origin policies.

当然，这些解决方案受到跨源策略的限制。

#1