HTML5キャンバスにCSSスタイルでSVGを描く

Webアプリケーションでチャートを生成するのにNVD3を使用しています。すべてのチャートはSVGです。HTML5キャンバスにCSSスタイルでSVGを描く

私はこれらのチャートをキャンバスオブジェクトに描画してイメージに変換したいと考えています。ただし、チャートのルックアンドフィールはCSSスタイル（NVD3に含まれています）に依存するため、結果の画像はアプリでレンダリングされたチャートのようには見えません。

SVGをキャンバスに描画するときにCSSスタイリングを保持できる方法はありますか？

出典

2016-12-13 csvan

HTML2Imageを隠しキャンバスに描画しますか？ https://html2canvas.hertzen.com/ - 簡単な解決策はわかりませんが、あるかもしれません。 – nycynik

複数のソースがあり、CSSルールの設定方法によっては、少し複雑です。たとえば、あなたのスタイルのcssTextをsvg要素の中にキャンバスにレンダリングする前にコピーすることはできますが、 'body> svg'のような規則があれば、その規則はもう' img'要素の内部では一度も一致しませんキャンバスに描画する必要があります。そして、私はあなたが解析することさえできない外部のCSSスタイルシートについても言及しません...他の解決策は、すべてのsvgノードのデフォルト以外の 'getComputedStyle（svgElement）'をインライン化することです持ってきた。メモリを食べることができます。 – Kaiido

このコメントは、 'drawImage'を使ってキャンバス上でsvgを描画すると仮定していました。さもなければ、canvgのようなものを試してみることもできますが、今はCSSのルールがどれほど優れているか分かりません。 – Kaiido

これは、CDATAというタグを付けたCSSファイルをSVG定義自体に提供することで実現できます。例：

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

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

</svg>

出典

2016-12-20 07:48:03 csvan

HTML5キャンバスにCSSスタイルでSVGを描く

答えて

関連する問題