HTML5 CanvasとSVGで作る世界地図：Raphael.jsの基本を解説

SVGで世界地図を作成する方法

SVGを使用すれば、世界地図を作成し、Raphael.jsを活用してインタラクティブな操作を実現できます。Raphael.jsは、SVGやVMLを扱うためのJavaScriptライブラリで、ブラウザ間の互換性を保ちながらベクターグラフィックスを描画できるのが大きな特徴です。

Raphael.jsの基本：円を描画してみよう

まずは、Raphael.jsをHTMLに読み込む方法と、基本的な図形（円）を描画する方法を学びましょう。以下のコードは、描画領域を生成して赤い円を描くシンプルな例です。

var paper = Raphael(10, 50, 320, 200);

// 円を描画する
var circle = paper.circle(50, 40, 10);

circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");

コードの解説

上記のコードでは、まず Raphael(10, 50, 320, 200) で描画領域（ペーパー）を作成しています。引数は順に、X座標、Y座標、幅、高さを表します。次に paper.circle(50, 40, 10) で、中心座標(50, 40)、半径10の円を描画します。最後に attr() メソッドを使って、塗りつぶし色（#f00＝赤）と線の色（#fff＝白）を設定しています。

世界地図の作成へステップアップ

基本的な図形の描画方法を理解したら、次のステップとして、以下の資料を参考に世界地図の作成に挑戦してみてください。各国のパスデータを組み合わせることで、クリックやホバーに対応したインタラクティブな世界地図を構築できます。