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 

我希望它會幫助你的！