我有很多 SVG 图标保存在不同的 *.svg 文件中。如果我将它们直接插入到页面中,我可以使用 fill css 选项自由控制它们的颜色。 我的麻烦来了,我需要更改 svg 的颜色,然后将其显示在 img 标签中,因为元素库的重要内容只能使用它。我的困境有解决方案吗?
<img src='img/graphic.svg' />
我需要能够更改 svg 的颜色并接收相似或相同的最终结果。这可能吗?
编辑
是否可以在 svg 文件中包含 javascript 以读取参数并相应地更改颜色?例如:
<img src='img/graphic.svg?fill=fff' />
我不确定如何实现。
最佳答案
您可以将 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;
}
当然,这些解决方案受到跨源策略的限制。
关于javascript - 从外部源加载到 img 标签时更改 SVG 的填充颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32718193/