Javascript 光栅化动态生成的SVG

我正在尝试将生成的SVG图形转换为可打印的图像。根据我的研究，我假设我必须以某种方式用SVG制作画布，然后用它制作图像。但是，我发现的每个示例都在svg中使用了一个图像标记，或者它是一个不变的静态文件。这是我试图打印出来的一张生成的图表

<svg width="603" height="250">
  <g>
    <path d="M0,250Q9.380000000000003,235.10638297872342,20.1,234.04255319148936C36.18,232.4468085106383,134.67000000000002,257.4468085106383,160.8,234.04255319148936S267.33,7.978723404255318,281.4,0S297.48,131.38297872340425,301.5,154.25531914893617S307.53000000000003,221.80851063829786,321.6,228.72340425531914S428.13000000000005,227.12765957446808,442.20000000000005,223.40425531914894S450.24,190.95744680851064,462.3,191.48936170212767S550.74,223.40425531914892,562.8,228.72340425531914S578.88,242.5531914893617,582.9,244.68085106382978Q585.5799999999999,246.09929078014184,603,250L603,250Q585.5799999999999,250,582.9,250C578.88,250,574.8599999999999,250,562.8,250S474.36,250,462.3,250S456.27000000000004,250,442.20000000000005,250S335.67,250,321.6,250S305.52,250,301.5,250S295.46999999999997,250,281.4,250S186.93,250,160.8,250S36.18,250,20.1,250Q9.380000000000003,250,0,250Z" class="area" fill="rgba(55,173,223,0.25)"></path>
  </g>

  <g class="y_grid">
    <g style="opacity: 1;" transform="translate(0,250)">
      <line class="tick" x2="603" y2="0"></line>
      <text x="-3" y="0" dy=".32em" text-anchor="end">0</text>
    </g>
    <g style="opacity: 1;" transform="translate(0,143.61702127659575)">
      <line class="tick" x2="603" y2="0"></line>
      <text x="-3" y="0" dy=".32em" text-anchor="end">20</text>
    </g>
    <g style="opacity: 1;" transform="translate(0,37.2340425531915)">
      <line class="tick" x2="603" y2="0"></line>
      <text x="-3" y="0" dy=".32em" text-anchor="end">40</text>
    </g>
    <path class="domain" d="M603,0H0V250H603"></path>
  </g>

  <g class="x_grid_d3">
    <g style="opacity: 1;" transform="translate(0.37222222222222223,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">Apr 15</text>
    </g>
    <g style="opacity: 1;" transform="translate(116.69166666666668,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">Apr 20</text>
    </g>
    <g style="opacity: 1;" transform="translate(233.0111111111111,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">Apr 26</text>
    </g>
    <g style="opacity: 1;" transform="translate(349.3305555555556,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">May 02</text>
    </g>
    <g style="opacity: 1;" transform="translate(465.65000000000003,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">May 08</text>
    </g>
    <g style="opacity: 1;" transform="translate(581.9694444444444,0)">
      <line class="tick" x2="0" y2="250"></line>
      <text x="0" y="253" dy=".71em" text-anchor="middle">May 13</text>
    </g>
    <path class="domain" d="M0,250V0H603V250"></path>
  </g>
</svg>

---

您可以使用Apache batik将svg转换为jpg/png。

根据浏览器（）的不同，您可以在单独的窗口/选项卡中加载svg，或将其用作img标记的src。无论哪种情况，浏览器都应该像打印其他图像一样打印它

确保在svg标记中包含版本和其他必需属性

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
    xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" width="640px" height="640px">

---

如果要在客户端上生成svg，可以尝试将其编码为数据url（），并将数据url用作img src或锚href。

您可以查看另一个问题。你可以找到你要找的东西。已经尝试使用canvg。我得到的只是一个大黑匣子。我将把这段代码放在上面，svg是一个大黑匣子。试着移除除第一个G块以外的所有块以查看一些内容。我移除了除第一个G标记以外的所有块，其他所有部分都正常工作。知道为什么其他的没有通过吗？如果我删除所有的路径元素，就会显示一个蓝色的图形。您可能希望查看path元素以确定问题。这假设我有一些可以编码为数据uri的图像。这是否适用于不断变化的svg信息？是的，我正在客户机上生成svg。每次更改svg时，都必须对其进行编码并再次将其分配给img src。因为您正在打印，所以我假设您没有使用动画svg。使用canvg或其他库可能更好，但在必要时这会起作用。伙计们，需要在客户端这样做。没有服务器。

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
    xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" width="640px" height="640px">