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

Question

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

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

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

编辑

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

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

我不确定如何实现。

Answer 1

您可以将 svg 文档作为 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"/>

所以，要么你通过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;

或者您通过 <object> 加载它或 <iframe>元素，然后转换它的 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;
}

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