w3.unpo<code>todo

La interfaz XMLSerializer utiliza el método serializeToString() para construir una cadena de texto de una estructura (árbol) DOM.

El método encodeURIComponent() codifica un componente URI ( Uniform Resource Identifier ) reemplazando algunos caracteres con sus equivalentes UTF-8. Por ejemplo reemplaza < con %3C, > con %3E, # con %23 etc. . .

Suponiendo que hay un elemento SVG en el documento que queremos dibujar en el canvas, tenemos que:

- Transformar la estructura DOM del elemento SVG en una cadena de texto:

var svgURL = new XMLSerializer().serializeToString(svgElement); 

- Codificar esta cadena de texto utilizando encodeURIComponent()

- Agregar 'data:image/svg+xml; charset=utf8, ' delante de la cadena de texto codificada. Esto crea un código data URI que podemos utilizar como valor del atributo src de una imagen.

- Cuando la imagen esté cargada la podemos dibujar en el canvas  utilizando el método drawImage  del contexto del canvas

let ctx = canvas.getContext("2d")

function svg_en_canvas(svgElement, ctx, callback){
  var svgURL = new XMLSerializer().serializeToString(svgElement);
  //pinta la imágen en el canvas
  var img  = new Image();
  img.onload = function(){
    ctx.drawImage(this, 0,0);
    callback();
    }
  img.src = "data:image/svg+xml; charset=utf8, "+encodeURIComponent(svgURL);
  }

//llama la función svg_en_canvas
svg_en_canvas(document.querySelector("svg"), ctx, ()=>{console.log(canvas.toDataURL() )})

Vea este ejemplo en Codepen:

See the Pen Copy SVG element to canvas by Gabi (@enxaneta) on CodePen.