Img src wird codiert, wenn es als SVG eingestellt wird

Question

Ich habe einen Knoten, der ein SVG-Element ist. Es wurde von D3 generiert.

In meiner Angular 2 App muss ich dieses Element nehmen und es in ein Png mit Dom-zu-Bild konvertieren.

Mein Problem ist, wenn ich das SVG-Element nehme und es auf die Quelle des img-Elements setze, ist der SVG-Code codiert.

Wie kann ich nur die tatsächliche Zeichenfolge in die Src setzen?

Dies ist mein Code. Im Grunde erstelle ich ein div, dann erstelle ich ein img und setze das img src so, dass es im Knoten ist.

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) 

Dies ist der Wert von 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 ist

"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"

Decodierung es nicht helfen, da es sich nicht um eine gültige URL, so bin ich nicht sicher, wie man den Wert in Nr. erhält de.outerHTML in imgelem.src zu sein.

UPDATE:

Ich habe versucht, dies zu tun, aber egal was ich tue, sobald es in src gesetzt wird dann wird es codiert.

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

Dafür Sie zu arbeiten, um eine Zeichenfolge in das src Attribut des Bildes setzen müssen, ist es nicht möglich Markup (oder SVG in Ihrem Fall) zu setzen

src: ist ein DOM-String, reflektiert Das src-HTML-Attribut, das die vollständige URL des Bilds einschließlich Basis-URI enthält.

Siehe die Image() Dokumentation here

Ihre beste Option dann die data url syntax,
dies ist ein funktionierendes Beispiel wäre die Verwendung:

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 

ich es Ihnen helfen, hoffen!