Como include o estilo CSS ao converter svg para png

Eu criei um simples SVG elment que é baixado para png ao clicar em um botão, minha solução é semelhante a aqui

A ideia básica é:
1.svg para canvas
2.canvas para dataUrl
Download 3.trigger de dataUrl

o problema é que ao baixar o arquivo png ele não inclui o estilo css aplicado no resultado da solução svg my

AVISO – Eu sei que há uma solução alternativa movendo os estilos “inline” nos elementos como aqui ou a solução recursiva cavando a tree DOM e usando getComputedStyle (element, null);

Questões:
1. qual é o verdadeiro motivo e a solução para este problema.
(a aceleração da GPU está relacionada de alguma forma?)
2. como eu ainda superar este problema ao usar uma fonte personalizada com Fontface

   Hen's SVG Image   

meu 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; } 

meu 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; }); 

Pergunta 1 (primeiro semestre): qual é a razão real (a aceleração da GPU está relacionada de alguma forma?)

Não, a aceleração da GPU não tem nada a ver com isso.
A razão mais ampla é a privacidade .

Para desenhar seu svg com drawImage você tem que carregar seu svg como um documento externo dentro de uma tag . O SVG pode ser um formato de imagem bastante complexo para o carregamento de resources (pode exigir literalmente qualquer tipo de recurso que possa ser exigido por qualquer documento HTML). Assim, foi declarado nas especificações que a mesma segurança para os elementos ou ou similares deve ser aplicada ao conteúdo de e ainda mais restrita:

conteúdo não pode exigir resources externos nem access ao documento principal.

Questão 1 (segunda parte) : e a solução para este problema

Você apontou para algumas perguntas do SO que já estavam respondendo, você também pode include todas as folhas de estilo do documento principal dentro de uma tag

dentro do seu nó svg analisado, antes de criar o Blob a partir dele. implementação burra aqui

Pergunta 2: "como ainda supero esse problema ao usar uma fonte personalizada com o Fontface"

Para resources externos, você precisa codificá-lo como dataURI e incluí-lo em seu nó svg antes de criar o Blob. Para fonte em particular, você definiria uma propriedade font-face em um elemento

.

Então, no final, o seu svg teria algo parecido

    

em si mesmo antes de extrair sua marcação.