JavaScriptでSVGを描画する(Raphael使用)

SVGでトランプらしき画像を描画してみました。
SVGでトランプらしきものを描画する（ダイヤ）
SVGでトランプらしきものを描画する（クローバー）
SVGでトランプらしきものを描画する（ハート）
SVGでトランプらしきものを描画する（スペード）

これらをJavaScriptを使用して動的に生成してみたいと思います。

Raphael

SVGを描画するJavaScriptのライブラリに「Raphael」というものがあるようです。

スタートアップ SVG 第2回　SVG実習
Raphael

これを使用してみることにしました。

RaphaelのサイトのDownloadから、Raphael 1.4.7をダウンロードします。
すると、raphael-min.jsというファイルがダウンロードできると思います。

ダウンロードしたファイルを、これから作成するhtmlと
同じ階層に保存しておきます。

ダイアのカードを生成するサンプル

サンプルはこんな感じ。
※若干微調整してあります。

<html>
<head>
    <title>js sample</title>
    <script type="text/javascript" src="raphael-min.js"></script>
    <script type="text/javascript">

    function drawImage() {
        var root = document.getElementById('image_base');
        card = Raphael(root, 150, 200);

        //枠線の描画
        var rect = card.rect(0, 0, 150, 200);
        //塗りつぶし色をなし
        rect.attr("fill", "none");
        //枠線を黒
        rect.attr("stroke", "bluck");
        //枠線の太さを指定
        rect.attr("stroke-width", "5");

        //ダイヤの描画
        //polylineが使用できないようなので、Pathに変更
        var dyer = card.path("M50 10 L10 60 L50 110 L90 60");
        dyer.attr("fill", "red");
        dyer.attr("stroke", "none");

        var number = card.text(135, 150, "A");
        number.attr("font-size", "90");
        number.attr("text-anchor", "end");

    }

    </script>
</head>
<body>
</body>
<input type="button" value="描画" onClick="drawImage();"><br/>
<div id="image_base"><div>
</html>

実行してみると、こんな感じで表示されました。

いい感じです。

関連記事

Symfoware