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

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


クローバーに挑戦してみます。



図形の構造



葉っぱの部分はcircle、茎の部分はpolylineで描画することにしました。
試行錯誤しながら作った図形がこれ。




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

    <!-- ダイヤの図形 -->
    <!-- 一番上の円 -->
    <circle fill="bluck" cx="50" cy="30" r="17" />
    <!-- 左の円 -->
    <circle fill="bluck" cx="30" cy="60" r="17" />
    <!-- 右の円 -->
    <circle fill="bluck" cx="70" cy="60" r="17" />
    <!-- 茎の部分 -->
    <polyline fill="bluck" points="50,40 40,100 60,100" />

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

</svg>




Chromeだとこう見えます。

04_001_20100719154354.png



・・・それっぽく見えるのでは?





関連記事

コメント

非公開コメント

プロフィール

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

PR




検索フォーム

月別アーカイブ