我有一个节点是SVG元素。 它是由 D3 生成的。
在我的 Angular 2 应用程序中，我需要获取该元素并使用 dom-to-image 将其转换为 png。
我的问题是当我获取 SVG 元素并将其设置为 img 元素的 src 时，SVG 代码被编码。
如何将实际字符串放入 src？
这是我的代码。基本上我正在创建一个div，然后创建一个img，并将img src设置为节点中的内容。
var divelem = document.createElement('div');
var imgelem = document.createElement('img');
imgelem.height = 400;
imgelem.width = 300;
imgelem.src = node.outerHTML;
//imgelem.src = decodeURI(imgelem.src)
这是node.outerHTML的值：
<svg width="166" height="195"><g trantsform="translate(86,[object Window])"><g class="layer" id="annual-stacked-bar" height="NaN" style="stroke-dasharray: 3, 3; fill: rgb(193, 191, 193);"><rect y="36.29999999999998" x="12" height="158.70000000000002" width="77.4"><text y="182.9" x="25.8" style="fill: rgb(255, 255, 255);">NaNundefined%</text></rect></g><g class="layer" id="annual-stacked-bar" height="NaN" style="stroke-dasharray: 3, 3; fill: rgb(142, 86, 158);"><rect y="15.669000000000011" x="12" height="20.630999999999972" width="77.4"><text y="31.07699999999998" x="25.8" style="fill: rgb(255, 255, 255);">NaNundefined%</text></rect></g><g><text dy=".9em" y="28.299999999999983" height="36.29999999999998">---------------------</text></g><g><text dy=".9em" x="100" y="26.299999999999983" height="36.29999999999998" style="fill: rgb(128, 128, 132);">Expected</text></g></g></svg>
imgelem.src是
2277.4%22%3E%3Ctext%20y=%22182.9%22%20x=%2225.8%22%20style=%22fill：%20rgb(255，%20255，%20255);%22%3ENaNundefined%%3C/text%3E%3C/rect%3E%3C/g%3E%3Cg%20class=%22layer%22%20id=%22annual-stacked-bar%22%20height=%22NaN%22%20style=%22stroke-dasharray： %203，%203;%20填充：%20RGB(142，%2086，%20158);%22%3E%3Crect%20y=%2215.6690000000000011%22%20x=%2212%22%20height=%2220.630999999999972%22%20width=%2277.4%22%3E%3Ctext%20y=%2231.076999999999998%22%20x=%2225.8%22%20style=%22fill：%20rgb(255，%20255，%20255);%22%3ENaNundefined%%3C/text%3E%3C/rect%3E%3C/g%3E%3Cg%3E%3Ctext%20dy=%22.9em%22%20y=%2228.299999999999983%22%20高度=%2236.29999999999998%22%3E---------------------%3C/text%3E%3C/g%3E%3Cg%3E%3Ctext%20dy=%22.9em%22%20x=%22100%22%20y=%2226.299999999999983%22%20height=%2236.29999999999998%22%20style=%22fill：%20RGB(128，%20128，%20132);%22%3EExpected%3C/text%3E%3C/g%3E%3C/g%3E%3C/svg%3E">
解码它没有帮助，因为它不是一个有效的URL，所以我不确定如何在imgelem.src中获取node.outerHTML中的值。
更新：
我试图这样做，但无论我做什么，一旦它被放入src它就会被编码。
imgelem.src =
'<svg width="166" height="195"><g trantsform="translate(86,[object Window])"><g class="layer" id="annual-stacked-bar" height="NaN" style="stroke-dasharray: 3, 3; fill: rgb(193, 191, 193);"><rect y="36.29999999999998" x="12" height="158.70000000000002" width="77.4"><text y="182.9" x="25.8" style="fill: rgb(255, 255, 255);">NaNundefined%</text></rect></g><g class="layer" id="annual-stacked-bar" height="NaN" style="stroke-dasharray: 3, 3; fill: rgb(142, 86, 158);"><rect y="15.669000000000011" x="12" height="20.630999999999972" width="77.4"><text y="31.07699999999998" x="25.8" style="fill: rgb(255, 255, 255);">NaNundefined%</text></rect></g><g><text dy=".9em" y="28.299999999999983" height="36.29999999999998">---------------------</text></g><g><text dy=".9em" x="100" y="26.299999999999983" height="36.29999999999998" style="fill: rgb(128, 128, 132);">Expected</text></g></g></svg>';
为此，您必须在图像的src属性中放置一个字符串，不可能放置标记(或 SVG 在您的情况下)
src:是一个反映 src HTML 属性的 DOMString，包含 图像的完整 URL，包括基本 URI。
在此处查看Image()文档
那么，您最好的选择是使用数据 url 语法，
这是一个工作示例：
var svg = '<svg width="166" height="195"><g trantsform="translate(86, ...></svg>'
var serializer = new XMLSerializer()
var data = serializer.serializeToString(svg)
yourImageElement.src = "data:image/svg+xml;charset=utf-8," + data
希望对您有所帮助！