mas-lab.blog: SVGで画像内のデータをJavaScriptから操作する

最近、後輩の仕事に関する相談をプライベートで解決するようになってきた…。

今回相談受けたのは、Webサイトに回路図のような画像を載せて、かつ図の中のデータをサーバ内のデータに応じて可変にしたいというもの。元々は、それをHTMLでやりたい！と言っていたんだけど、さすがにその解決策は思いつかなくて、持ち帰り宿題化。

結局、解決策として提示したのがタイトルにもあるSVGを使ったアプローチ。別の解決策として、HTML 5のCanvasタグを使って、画像を描くってのもあったけど、 Canvasタグが良く分かってなかった＋SVGの方が目的には簡単だったので却下。

やったことは、InkscapeでSVGファイルを作って、それをJavaScriptで操作すること。 SVGファイルを作るのにInkscapeを使ったのは、SVGの規格標準なファイルが作れることと、 Illustratorとは違ってフリーで使えたから。

InkscapeはX11アプリなので、単純にダウンロードしてインストールじゃ動かない。まずは、X11のインストールが必要。と言っても、昔はMac OS XにX11も含まれてたと思うけど、今は含まれていないのでXQuartzをインストール。

Xquartzは、XQuartzのWebサイトからダウンロードしてきてインストール。

続いてInkscapeのインストールだけど、手順は公式サイトが詳しく書いているので割愛。

画像のように、ごくごく簡単な画像をInkscapeで描く。今回は、「80w」の部分を可変にするイメージ。

で、可変にしたい部分は、プロパティでIDを付与する。これは自動的にも付与されるんだけど、自分で付けた方がわかりやすいと思う。

画像を描いたら、SVGファイルとして保存する。

SVGファイルはXMLになっているので、テキストエディタで開いてHTMLへコピペする。

今回は、以下のようなHTMLを用意した。テキストボックスに値を入れて、「書き換え」ボタンを押すと画像が変わる。


  
  画像マッピングテスト
  


  
    
  
  
    ワット数を書き換える：

JavaScriptでこれを操作するのは、こんなコード。jQuery使ってる。

$(document).on("click", "#wButton", function() {
  console.log($("#textW01").text());
  $("#textW01").text($("#textW01edit").val());
});

こんな感じで、結構簡単に画像とJavaScriptのコラボレーションができた。

と、感動して後輩に伝えたら、上司に良くわからないものを使うな、と言われたらしい。自分が知らないものを「良くわからないもの」で片付けるのは老害というのでは…。

mas-lab.blog