SVGでトランプらしきものを描画する(ハート)

SVGでトランプらしき画像を描画してみています。
SVGでトランプらしきものを描画する(ダイヤ)
SVGでトランプらしきものを描画する(クローバー)


ハートに挑戦してみます。



svgで半円を描画



ハートマークを描画する上で、半円の描画が必要になったのですが
この方法がよくわからず・・・

以下のサイトを参考に、
http://www.asahi-net.or.jp/~uf4k-nkjm/SVG/contents/content3.html
http://dhr.at.infoseek.co.jp/svgpath.htm

・pathというタグを書けばよいっぽい。
・指定するパラメータは、「M[開始X] [開始Y] A[半径] [半径] 0 1 1 [終了X] [終了Y]」

こんな感じで理解しました。

X:10、Y50から半径40の半円を描画してみます。
上記の条件だと、終点の座標はX:90、Y:50になるので、
指定する値は「M10 50 A40 40 0 1 1 90 50」となります。

ソースはこんな感じ。


<!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">

    <path d="M10 50 A40 40 0 1 1 90 50" fill="none" stroke="black"/>

</svg>




Chromeで見るとこんな感じになります。

05_001_20100719154506.png


これを参考にハートのソースは、以下のようになりました。


<!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" />

    <!-- ハート型 -->
    <path d="M20 70 A20 25 0 1 1 50 40
             A20 25 0 1 1 80 70
             L50,110 Z" fill="red" />

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





Chromeで見た状態はこんな感じ。

05_002_20100719154506.png


それっぽくみえてるんじゃないでしょうか?






関連記事

コメント

非公開コメント

プロフィール

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

PR




検索フォーム

月別アーカイブ