如何更改base64格式的svg img的颜色？

Question

我有一个base64格式的Svg img 并试图改变它的颜色.有没有人有任何指示如何做到这一点？我发现了一些关于<path>元素的东西,但确实知道svgimg是一个base64字符串我不知道如何使用它.任何人都可以帮助我或指出我正确的方向吗？

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iNS4wIC0xMC4wIDEwMC4wIDEzNS4wIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIiBoZWlnaHQ9IjEwMHB4IiB3aWR0aD0iMTAwcHgiPgo8cGF0aCBpZD0icGF0aDE5ODNfM18iIGQ9Ik01MC4xLDQuOXY3LjRjMCwwLDAsMC0wLjIsMGMtMC4xLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNS4xLDAsNS4zYzAsMC4yLTAuMiwwLjItMC4yLDAuNCAgYzAsMC4yLDAsNC42LDAsNC44cy0wLjIsMC4yLTAuMiwwLjRjMCwwLjIsMCwxLjcsMCwxLjdsLTEuMywzLjZjMCwwLTAuNSwwLTAuNywwYy0wLjIsMC0wLjQsMC4yLTAuNCwwLjRjMCwwLjIsMCwwLjksMCwwLjkgIHMtMC40LDAtMC41LDBzLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDUuMSwwLDUuMXMtMC40LDAtMC41LDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDYsMCw2LjJjMCwwLjMtMC42LDAuNC0wLjYsMC42ICBjMCwwLjIsMCwzMCwwLDMwcy0wLjcsMC0wLjksMGMtMC4yLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNi42LDAsNi42cy0xLjgsMC0yLDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDkuOSwwLDkuOSAgcy0yLjYsMC0yLjgsMHMtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNC41LDAsNC41aDI1LjljMCwwLDAtNC4zLDAtNC41YzAtMC4yLTAuMi0wLjQtMC40LTAuNGMtMC4yLDAtMi44LDAtMi44LDBzMC05LjcsMC05LjkgIGMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTIsMC0yLDBzMC02LjQsMC02LjZjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjksMC0wLjksMHMwLTI5LjgsMC0zMGMwLTAuMi0wLjYtMC4zLTAuNi0wLjYgIGMwLTAuMywwLTYuMSwwLTYuMmMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNSwwLTAuNSwwczAtNSwwLTUuMWMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNiwwLTAuNiwwczAtMC43LDAtMC45ICBjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjcsMC0wLjcsMGwtMS4zLTMuNmMwLDAsMC0xLjUsMC0xLjdjMC0wLjItMC4yLTAuMi0wLjItMC40czAtNC42LDAtNC44YzAtMC4yLTAuMi0wLjItMC4yLTAuNCAgYzAtMC4yLDAtNS4xLDAtNS4zYzAtMC4yLTAuMi0wLjQtMC40LTAuNHMtMC4yLDAtMC4yLDBWNC45aC0wLjRoLTAuMUg1MC4xeiIvPgo8dGV4dCB4PSIwLjAiIHk9IjExNy41IiBmb250LXNpemU9IjUuMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EgTmV1ZSwgSGVsdmV0aWNhLCBBcmlhbC1Vbmljb2RlLCBBcmlhbCwgU2Fucy1zZXJpZiIgZmlsbD0iIzAwMDAwMCI+Q3JlYXRlZCBieSBMYXphciBOaWtvbGljPC90ZXh0Pjx0ZXh0IHg9IjAuMCIgeT0iMTIyLjUiIGZvbnQtc2l6ZT0iNS4wIiBmb250LXdlaWdodD0iYm9sZCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSBOZXVlLCBIZWx2ZXRpY2EsIEFyaWFsLVVuaWNvZGUsIEFyaWFsLCBTYW5zLXNlcmlmIiBmaWxsPSIjMDAwMDAwIj5mcm9tIHRoZSBOb3VuIFByb2plY3Q8L3RleHQ+PC9zdmc+">

Answer 1

由于您没有澄清是否无法修改原始文件或必须在客户端进行,我建议一个

以编程方式:

1. 查找 <img>
2. 从img.srcstrip开始"data:image...",提取Base64编码的SVG.
3. 使用atob解码它
4. 创建一个元素,只是为了找到 <path>
5. 设置填写路径.
6. 附加新图像或替换当前图像.

例:

// Lookup the <img> by Id
var img = document.getElementById("target");

// Strip "data:image/svg+xml;base64," to get encoded SVG
var encoded = img.src.substring(26);

// Decode base64
var decoded = atob(encoded);

// Create an HTML element from decoded SVG
var wrapper = document.createElement('div');
wrapper.innerHTML = decoded;
var newSvg = wrapper.firstChild;

// Lookup the <path> and get a ref
var innerPath = newSvg.getElementsByTagName('path')[0];

// Set up new color
innerPath.setAttribute("fill", "#FF0000");

// Show modified image
document.body.appendChild(newSvg);

<img id="target" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iNS4wIC0xMC4wIDEwMC4wIDEzNS4wIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIiBoZWlnaHQ9IjEwMHB4IiB3aWR0aD0iMTAwcHgiPgo8cGF0aCBpZD0icGF0aDE5ODNfM18iIGQ9Ik01MC4xLDQuOXY3LjRjMCwwLDAsMC0wLjIsMGMtMC4xLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNS4xLDAsNS4zYzAsMC4yLTAuMiwwLjItMC4yLDAuNCAgYzAsMC4yLDAsNC42LDAsNC44cy0wLjIsMC4yLTAuMiwwLjRjMCwwLjIsMCwxLjcsMCwxLjdsLTEuMywzLjZjMCwwLTAuNSwwLTAuNywwYy0wLjIsMC0wLjQsMC4yLTAuNCwwLjRjMCwwLjIsMCwwLjksMCwwLjkgIHMtMC40LDAtMC41LDBzLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDUuMSwwLDUuMXMtMC40LDAtMC41LDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDYsMCw2LjJjMCwwLjMtMC42LDAuNC0wLjYsMC42ICBjMCwwLjIsMCwzMCwwLDMwcy0wLjcsMC0wLjksMGMtMC4yLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNi42LDAsNi42cy0xLjgsMC0yLDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDkuOSwwLDkuOSAgcy0yLjYsMC0yLjgsMHMtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNC41LDAsNC41aDI1LjljMCwwLDAtNC4zLDAtNC41YzAtMC4yLTAuMi0wLjQtMC40LTAuNGMtMC4yLDAtMi44LDAtMi44LDBzMC05LjcsMC05LjkgIGMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTIsMC0yLDBzMC02LjQsMC02LjZjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjksMC0wLjksMHMwLTI5LjgsMC0zMGMwLTAuMi0wLjYtMC4zLTAuNi0wLjYgIGMwLTAuMywwLTYuMSwwLTYuMmMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNSwwLTAuNSwwczAtNSwwLTUuMWMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNiwwLTAuNiwwczAtMC43LDAtMC45ICBjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjcsMC0wLjcsMGwtMS4zLTMuNmMwLDAsMC0xLjUsMC0xLjdjMC0wLjItMC4yLTAuMi0wLjItMC40czAtNC42LDAtNC44YzAtMC4yLTAuMi0wLjItMC4yLTAuNCAgYzAtMC4yLDAtNS4xLDAtNS4zYzAtMC4yLTAuMi0wLjQtMC40LTAuNHMtMC4yLDAtMC4yLDBWNC45aC0wLjRoLTAuMUg1MC4xeiIvPgo8dGV4dCB4PSIwLjAiIHk9IjExNy41IiBmb250LXNpemU9IjUuMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EgTmV1ZSwgSGVsdmV0aWNhLCBBcmlhbC1Vbmljb2RlLCBBcmlhbCwgU2Fucy1zZXJpZiIgZmlsbD0iIzAwMDAwMCI+Q3JlYXRlZCBieSBMYXphciBOaWtvbGljPC90ZXh0Pjx0ZXh0IHg9IjAuMCIgeT0iMTIyLjUiIGZvbnQtc2l6ZT0iNS4wIiBmb250LXdlaWdodD0iYm9sZCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSBOZXVlLCBIZWx2ZXRpY2EsIEFyaWFsLVVuaWNvZGUsIEFyaWFsLCBTYW5zLXNlcmlmIiBmaWxsPSIjMDAwMDAwIj5mcm9tIHRoZSBOb3VuIFByb2plY3Q8L3RleHQ+PC9zdmc+">

注意:

IE <10有一些限制

我可以使用atob吗？

编辑:Muplipath方法

var paths = newSvg.getElementsByTagName('path');
[].forEach.call(paths, function(path) {
    path.setAttribute("fill", "#FF0000");
});