Solución:
Para SVG en línea, necesitará:
- Convierta la cadena SVG en un
Blob - Obtenga una URL para el Blob
- Cree un elemento de imagen y establezca la URL como
src - Cuando se carga (
onload) puede dibujar el SVG como una imagen en el lienzo - Utilizar
toDataURL()para obtener el archivo PNG del lienzo.
Por ejemplo:
function drawInlineSVG(ctx, rawSVG, callback) {
var svg = new Blob([rawSVG], {type:"image/svg+xml;charset=utf-8"}),
domURL = self.URL || self.webkitURL || self,
url = domURL.createObjectURL(svg),
img = new Image;
img.onload = function () {
ctx.drawImage(this, 0, 0);
domURL.revokeObjectURL(url);
callback(this);
};
img.src = url;
}
// usage:
drawInlineSVG(ctxt, svgText, function() {
console.log(canvas.toDataURL()); // -> PNG data-uri
});
Por supuesto, console.log aquí es solo por ejemplo. Almacene / transfiera la cadena en su lugar aquí. (También recomendaría agregar un onerror manejador dentro del método).
También recuerde establecer el tamaño del lienzo usando el width y height atributos, o de JavaScript usando propiedades.
Vengo mucho después desde que surgió alguna otra pregunta de esta porque la respuesta aceptada puede producir un comportamiento indeseable.
La solución @ K3N es casi correcta, pero iría en contra del uso de svgElement.outerHTML.
En cambio, uno debería preferir new XMLSerializer().serializeToString(svgElement).
Además, el uso de blob y de la API de URL no es necesario y un dataURI simple tiene más compatibilidad entre los navegadores.
Entonces, una versión completa de esto sería:
function drawInlineSVG(svgElement, ctx, callback) {
var svgURL = new XMLSerializer().serializeToString(svgElement);
var img = new Image();
img.onload = function() {
ctx.drawImage(this, 0, 0);
callback();
}
img.src="data:image/svg+xml; charset=utf8, " + encodeURIComponent(svgURL);
}
// usage:
drawInlineSVG(document.querySelector('svg'), ctxt, function() {
console.log(canvas.toDataURL())
});