SVGでトランプらしきものを描画する(ダイヤ)

SVGの基本的な描画方法を調べました。
SVGで線、円、矩形を描画する
SVGで楕円、polyline、文字を描画する

ここからがやりたかったことなのですが、トランプのそれっぽい画像を
SVGで描画してみようと思います。
※ちなみに、絵心ゼロです。

まずは、一番図形が簡単そうなダイヤから。



svgでtext-align



数字の表示を右寄せで表示したかったのですが、
指定方法がわからずちょっとはまりました。

http://www.marenijr.net/p/svg/006/01.html
こちらを参考に、text-anchor="end"を指定しました。


ダイヤのA(のつもり)のSVGデータを以下のように定義しました。


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="150" height="200"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- 外枠 -->
    <rect x="0" y="0" width="150" height="200" stroke="bluck" stroke-width="5" fill="none" />

    <!-- ダイヤの図形 -->
    <polyline fill="red" points="50,10 10,60 50,110 90,60" />

    <!-- トランプの数字 -->
    <text x="135" y="180" font-size="90" text-anchor="end">A</text>

</svg>





Chromeでの表示は以下の通り。

03_001_20100719154246.png


なんとかダイヤのAとして認識できるかと。




関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ