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

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


スペードに挑戦してみます。




作戦



図形としては、ハートを上下反転させて、茎をつければOK・・・のはず。




<!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="M15 50 A20 20 0 1 0 50 70
             A20 20 0 1 0 85 50
             L50,10 Z" fill="bluck" />
    <!-- 茎の部分 -->
    <polyline fill="bluck" points="50,60 40,100 60,100" />

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




Chromeで見るとこんな感じ。

06_001_20100719154631.png



微妙ですが、テキストエディタだけでこういう画像が
作成できるのはすばらしい。






関連記事

コメント

非公開コメント

プロフィール

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

PR




検索フォーム

月別アーカイブ