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 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"/>

因此，要么通过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;
}

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

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

1 个答案: