Img src在设置为SVG时被编码

Question

我有一个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是

“http://localhost:4208/%3Csvg%20width=%22166%22%20height=%22195%22%3E%3Cg%20trantsform=%22translate(86,[object%20Window])%22%3E%3Cg%20class=%22layer%22%20id=%22annual-stacked-bar%22%20height=%22NaN%22%20style=%22stroke-dasharray:%203,%203;%20fill:%20rgb(193,%20191,%20193);%22%3E%3Crect%20y=%2236.29999999999998%22%20x=%2212%22%20height=%22158.70000000000002%22%20width=%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;%20fill:%20rgb(142,%2086,%20158);%22%3E%3Crect%20y=%2215.669000000000011%22%20x=%2212%22%20height=%2220.630999999999972%22%20width=%2277.4%22%3E%3Ctext%20y=%2231.07699999999998%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%20height=%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”

解码它并没有帮助，因为它不是一个有效的网址，所以我不确定如何获得价值没有de.outerHTML在imgelem.src中。

UPDATE：

我试图做到这一点，但无论我做什么，一旦投入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>'; 

Answer 1

对于工作，你必须把字符串在图像的src属性，它是不可能把标记（或SVG你的情况）

src:是反映DOMString src HTML属性，其中包含 包含基本URI的图像的完整URL。

见Image()文档here

你最好的选择的话，会是使用data url syntax，
这是一个工作示例：

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 

我希望它会帮助你的！