栅格化动态生成的 SVG

Question

我正在尝试将生成的 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>

有可能以某种方式打印这个东西吗？此外，我需要在所有客户端都执行此操作，如果可能，请不要从服务器获得帮助。

另外，我尝试过使用 canvg，但我得到的只是一个黑匣子。这是这段代码：

svg = $('.full-graph').html()
canvg 'canvas', svg, renderCallback: ->
  image = document.getElementById('canvas').toDataURL 'image/png'
  window.open image

Answer 1

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

Answer 2

根据浏览器 (http://caniuse.com/#feat=svg)，您可以在单独的窗口/选项卡中加载 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 (http://caniuse.com/#feat=datauri)，并将数据 url 用作 img src 或锚点 href。