Cómo incluir estilo CSS al convertir svg a png

He creado un elemento simple SVG que se dowbloaded a png al hacer clic en un botón, mi solución es similar a aquí

La idea básica es:
1.svg al canvas
2. puede acceder a dataUrl
Descarga 3.trigger de dataUrl

el problema es que al descargar el archivo png no incluye el estilo css aplicado en el resultado svg my solution

AVISO: sé que hay una solución alternativa moviendo los estilos “en línea” en los elementos como aquí o en la solución recursiva, excavando el árbol DOM y usando getComputedStyle (element, null);

Preguntas:
1. cuál es el verdadero motivo y la solución para este problema.
(¿La aceleración de la GPU está relacionada de todos modos?)
2. Cómo aún supero este problema cuando uso una fuente personalizada con Fontface

   Hen's SVG Image   

mi CSS:

  /*adding exo2 font*/ @font-face { font-family: 'exo_2black'; src: url('./exo2font/Exo2-Black-webfont.eot'); src: url('./exo2font/Exo2-Black-webfont.eot?#iefix') format('embedded-opentype'), url('./exo2font/Exo2-Black-webfont.woff') format('woff'), url('./exo2font/Exo2-Black-webfont.ttf') format('truetype'), url('./exo2font/Exo2-Black-webfont.svg#exo_2black') format('svg'); font-weight: normal; font-style: normal; } /*change circle color depends on window size*/ @media screen and (min-width: 480px) { svg circle { fill: lightgreen; } } /*style on the svg text*/ .svgTxt{ font-family: 'exo_2black'; font-size: 30px; fill: red; } 

mi código:

  //reference to elements var btn = document.querySelector('#btn'); var svg = document.getElementById('svg'); var svgTexts = svg.getElementsByTagName('text'); var canvas = document.getElementById('canvas'); //Style definitions for svg elements defined in stylesheets are not applied to the generated canvas. This can be patched by adding style definitions to the svg elements before calling canvg. //3.trigger download from dataUrl function triggerDownload(imgURI) { var evt = new MouseEvent('click', { view: window, bubbles: false, cancelable: true }); var a = document.createElement('a'); a.setAttribute('download', 'hen_saved_image.png'); a.setAttribute('href', imgURI); a.setAttribute('target', '_blank'); a.dispatchEvent(evt); } //btn click event btn.addEventListener('click', function () { // 1.svg to canvas var ctx = canvas.getContext('2d'); var data = (new XMLSerializer()).serializeToString(svg);//serialize the svg element to string var DOMURL = window.URL || window.webkitURL || window; var img = new Image(); var svgBlob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });//A blob object represents a chuck of bytes that holds data of a file. var url = DOMURL.createObjectURL(svgBlob);//creates a DOMString containing an URL representing the object given in paramete $('svg').append(deletedSVGText); img.onload = function () { ctx.drawImage(img, 0, 0); DOMURL.revokeObjectURL(url); // 2.canvas to dataUrl var imgURI = canvas .toDataURL('image/png') .replace('image/png', 'image/octet-stream');// returns a data URI containing a representation of the image in the format specified by the type parameter triggerDownload(imgURI); }; img.src = url; }); 

Pregunta 1 (primera mitad): ¿cuál es la verdadera razón (es la aceleración de la GPU relacionada de todos modos?)

No, la aceleración de la GPU no tiene nada que ver con eso.
La razón más amplia es la privacidad .

Para dibujar su svg con drawImage , debe cargar su svg como un documento externo dentro de una etiqueta . SVG puede ser un formato de imagen bastante complejo para la carga de recursos (literalmente puede requerir cualquier tipo de recurso que pueda requerir cualquier documento HTML). Por lo tanto, se ha indicado en las especificaciones que la misma seguridad que la de los elementos u o similares debe aplicarse al contenido e incluso más estricta:

contenido no puede requerir ningún recurso externo, ni acceso al documento principal.

Pregunta 1 (segunda mitad) : y la solución para este problema

Señaló algunas de las preguntas que ya lo estaban respondiendo, también podría incluir todas las hojas de estilo del documento principal dentro de una etiqueta

dentro de su nodo SVG analizado, antes de crear el Blob a partir de él. implementación tonta aquí

Pregunta 2: "cómo aún puedo superar este problema cuando uso una fuente personalizada con Fontface"

Para recursos externos, debe codificarlo como dataURI, e incluirlo en su nodo SVG antes de crear el Blob. Para la fuente en particular, establecería una propiedad font-face en un elemento

.

Así que al final, tu svg tendría algo así como

    

en sí mismo antes de extraer su marcado.