小编Laz*_*eep的帖子

我已经创建了一个简单的SVG元素,当点击一个按钮时可以下载到png,我的解决方案类似于此处

基本思想是:
1.svg to canvas
2.canvas to dataUrl
3.trigger从dataUrl下载

问题是,当下载png文件时,它不包括应用于svg my solution结果的css样式

注意-我知道有一个workingaround解决方案通过在移动元素的样式"内联"像这里或通过下挖DOM树,并使用递归解决方案的getComputedStyle(元素,NULL);

问题:
1.这个问题的真正原因和解决方案是什么.
(无论如何,GPU加速度是相关的吗？)
2.在使用Fontface的自定义字体时,我仍然可以解决这个问题

 <button id="btn">svg to png</button>

  <svg id="svg" width="200" height="200">
    <circle cx="50" cy="50" r="30" />
    <text class="svgTxt" x="0" y="100">Hen's SVG Image</text>
  </svg>
  <canvas id="canvas"  width="200" height="200"></canvas>

我的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 …