将svg转换为png时如何包含CSS样式

将svg转换为png时如何包含CSS样式

问题1（上半部分）： 真正的原因 是什么（无论如何，GPU加速是否相关？）

不，GPU加速与它无关。
最广泛的原因是 隐私 。

要绘制svg，

drawImage

您必须将svg作为外部文档加载到

<img>

标签内。SVG可能是用于加载资源的非常复杂的图像格式（它实际上可能需要任何HTML文档可能需要的任何类型的资源）。因此，已在规范中指出，与

<iframe>

元素

<object>

或类似元素相同的安全性应适用于

<img>

内容，甚至更为严格：

<img>

内容可以不需要任何外部资源，也不需要访问主文档。

问题1（下半部分） ： 以及此问题的解决方案

您指出了一些已经回答过的SO问题，也可以在从中

<style>

创建Blob之前，仅将主文档中的所有样式表包括在已解析的svg Node内的标签内

问题2： “在Fontface中使用自定义字体时，如何仍能解决此问题”

对于外部资源，您必须将其编码为dataURI，并在创建Blob之前将其包括在svg节点中。特别是对于字体，您需要

font-face

在一个

<style>

元素中设置一个属性。

因此，最后，您的svg会有类似

<defs>  <style>        @font-face {     font-family: foo;     src: url('data:application/font-woff;charset=utf-8;base64,...')    }  </style></defs>

本身，然后再提取其标记。