在 HTML5 画布上使用 CSS 样式绘制 SVG答案

【问题标题】：Draw SVG with CSS styling on HTML5 canvas在 HTML5 画布上使用 CSS 样式绘制 SVG
【发布时间】：2017-04-28 15:47:52
【问题描述】：

我正在使用 NVD3 在 Web 应用程序中生成图表。所有图表都是 SVG。

我想通过在画布对象上绘制这些图表来将它们转换为图像。但是，由于图表的外观取决于 CSS 样式（包含在 NVD3 中），因此生成的图像看起来不像应用程序中呈现的图表。

在将 SVG 绘制到画布上时，有什么方法可以保留 CSS 样式？

【问题讨论】：

也许将其绘制到隐藏的画布上，并使用 HTML2Image？ html2canvas.hertzen.com - 我不知道一个简单的解决方案，但可能有一个。
如果您有多个来源并且取决于您的 CSS 规则的设置方式，这会有点复杂。例如，您可以将样式的 cssText 复制到 svg 元素中，然后再将其渲染到画布上，但如果您有 body>svg 之类的规则，那么该规则将不再匹配到需要的 img 元素在画布上绘制。而且我什至不谈论你甚至无法解析的外部 CSS 样式表（来自其他服务器）......所以另一种解决方案是内联每个非默认 getComputedStyle(svgElement) 你有的每个 svg 节点.可以吃记忆。
该评论假设您确实使用 drawImage 在画布上绘制了 svg。否则，你也可以试试 canvg 之类的东西，但我不知道他们现在在 CSS 规则方面有多好，我记得他们有一些问题。
@Kaiido 内联样式似乎很有希望，因为它们相当琐碎并且直接作用于 SVG 节点本身。假设我将它们作为字符串提供，我应该在 SVG 树本身的哪个位置包含它们？
通常位于 defs 节点中 svg 根目录的顶部。前段时间我写了一些可能对你有帮助的东西，但我在这个确切的问题上苦苦挣扎，从来没有花时间去解决它。但在您的特定情况下，它可能会有所帮助：github.com/Kaiido/SVG2Bitmap

标签： css html canvas svg nvd3.js

【解决方案1】：

这可以通过在 SVG 定义本身中提供带有 CDATA 标签的 CSS 文件来完成。例如：

<svg xmlns="http://www.w3.org/2000/svg">

  <style type="text/css">
    <![CDATA[
        .some-class {
            opacity: 1;
        }
    ]]>
  </style>

</svg>

【讨论】：