生成した SVG グラフを印刷可能な画像に変換しようとしています。私の調査から、SVG から何らかの方法でキャンバスを作成し、それからイメージを作成する必要があると想定しました。ただし、私が見つけたすべての例は、svg 内でイメージ タグを使用しているか、変更されない静的ファイルです。これは、印刷しようとしている生成されたグラフの 1 つです。
<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