java svgbase64转byte,SVG转换成的base64

SVG which was created programmatically does not convert into base64 correctly.

In my application I've got a service which get a response with g-element and then put into created svg-element and convert it into base64, but if I try to open a link I find that svg does not render on the page.

var xmlns = 'http://www.w3.org/2000/svg',

IMAGE_TEMPLATE = document.createElementNS(xmlns, 'svg');

IMAGE_TEMPLATE.appendChild(document.body.querySelector('#ico-appliance-thermostat-128'));

IMAGE_TEMPLATE.setAttribute('id', 'svg');

IMAGE_TEMPLATE.setAttributeNS(null, 'width', 128);

IMAGE_TEMPLATE.setAttributeNS(null, 'height', 128);

IMAGE_TEMPLATE.setAttributeNS(null, 'viewBox', '0 0 128 128');

document.body.querySelector('#test').appendChild(IMAGE_TEMPLATE);

test = function(){

var s = new XMLSerializer().serializeToString(document.getElementById("svg"))

var encodedData = window.btoa(s);

console.log('data:image/svg+xml;base64,' + encodedData);

}

解决方案Difference between @guest271314 and my answer:

@guest271314 his answer:

Wrap the g element inside a svg element to make sure that the browser renders the g element onload.

My answer:

Forces the svg element inside #test to render the g element since the g element wasn't rendered onload.

Best answer in this case: @guest271314

Reason: A g element should be inside a svg element in valid html.

When should my answer be used?

In the case that the g element is not an element in the html document.

You didn't close test() with a }.

Code below returns a base64 encoded svg:

https://jsfiddle.net/seahorsepip/6sra5c5L/1/

Edit:

svg render issue is something I ran into myself before, here's the fix with a line of jquery:

https://jsfiddle.net/seahorsepip/6sra5c5L/3/

//Force refresh svg

$("#test").html($("#test").html());

Here's the original SO thread about the issue: jquery's append not working with svg element?

I don't know the javascript equivalent for the jQuery code I added, I tried to write it but it didn't work :/

Edit 2:

Here's the pure js equivalent:

//Force refresh svg

var svg = document.body.querySelector('#test').innerHTML;

document.body.querySelector('#test').innerHTML = "";

document.body.querySelector('#test').innerHTML = svg;