https://www.jkawamoto.info/tags/ja-html5/ Recent content in ja-HTML5 on Junpei Kawamoto Hugo -- gohugo.io en-us junpei.kawamoto@acm.org (Junpei Kawamoto) junpei.kawamoto@acm.org (Junpei Kawamoto) © 2016-2017 Junpei Kawamoto Wed, 10 Dec 2014 00:00:00 +0000 https://www.jkawamoto.info/blog-ja/convert-svg-to-png/ Wed, 10 Dec 2014 00:00:00 +0000 junpei.kawamoto@acm.org (Junpei Kawamoto) https://www.jkawamoto.info/blog-ja/convert-svg-to-png/ 本稿は Qiita 投稿記事 のバックアップです． はじめに D3.js で作成した svg 要素を png 形式の画像に変換する方法． 注意事項として，svg 要素の大きさ (width と height) が絶対値で指定されてないといけない （つまり 100% などでは駄目）． また、テキスト要素にフォントを指定する必要がある． フォントの指定の例 obj.attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("fill", "black") 実際の変換 方針は，svg 要素の中身をデータ URI スキームで表し，canvas 要素に読み込ませる． // #svg1: ターゲットの svg 要素 var width = $("#svg1").width() var height = $("#svg1").height() $("body").append("<canvas id='canvas1' class='hidden' width=" + width + " height=" + height +"></canvas>") var canvas = $("#canvas1")[0] var ctx = canvas.