あけおめ企画 – 画像を一切使用せず SVG で鏡餅年賀状を描いてみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

元旦に投稿したエントリー『アケオメー!! 画像を使わずに HTML5 Canvas, CSS, SVG それぞれで年賀状を作ってみた.』の個別解説です.

今回解説するのは SVG Version についてです. SVG を触ったのは『SVG で遊んでみました』で国旗書いた以来なので色々と忘れててちょっと焦った.

nengazyou

Sample

今回解説するサンプルはこちら.

お餅もテキストも全て SVG で描いています. 3つのサンプルの中で一番コードは少ないです.

Code

今回のサンプルの全体コードです.

<!DOCTYPE html>

<html>
    
    <head>
        <meta charset="UTF-8">
        <title>SVG で鏡餅ハガキ</title>
        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
            }
            
            body {
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
            }
            
            .kagamimochi-hagaki {
                position: absolute;
                width: 500px;
                height: 740px;
                margin: auto;
                left: 0px;
                right: 0px;
                top: 0px;
                bottom: 0px;
                box-shadow: 2px 2px 8px 0px black;
                
                background-color: white;
            }
        </style>
        <!--&#91;if IE&#93;>
        <style>
            .msg {
                font-family: "標楷體", "@MS 明朝";
                writing-mode:tb-rl;
            }
        </style>
        <!&#91;endif&#93;-->
    </head>
    <body>
        <h1>SVG で鏡餅ハガキ</h1>
        <div class="kagamimochi-hagaki">
            <svg width="500" height="740">
                <defs>
                    <g id="kagamimochi">
                        <ellipse cx="250" cy="230" rx="130" ry="60" fill="#ffc" stroke="black" />
                        <ellipse cx="250" cy="155" rx="90" ry="40" fill="#ffc" stroke="black" />
                        <ellipse cx="250" cy="110" rx="35" ry="30" fill="orange" stroke="black" />
                        <path d="M240,90 C265,100 250,100 265,70" fill="green" stroke="black" />
                        <rect fill="hsl(40, 60%, 60%)" stroke="black" x=150 y=300 width=200 height=160 />
                        <rect fill="hsl(40, 60%, 60%)" stroke="black" x=100 y=250 width=300 height=50 />
                        <circle fill="black" cx=250 cy=380 r=50 />
                        <polygon fill="white" stroke="black" points="130 250, 250 370, 370 250" />
                        <polygon fill="red"   points="150 250, 250 350, 350 250" />
                        <polygon fill="white" points="170 250, 250 330, 330 250" />
                    </g>
                </defs>
                <use xlink:href="#kagamimochi" y="200" />
                <text x="40" y="83" font-size="50" font-family='"Meiryo", Arial, Helvetica, sans-serif' font-style="italic" fill="yellow">Happy New Year!</text>
                <text x="35" y="80" font-size="50" font-family='"Meiryo", Arial, Helvetica, sans-serif' font-style="italic">Happy New Year!</text>
                <text x="220" y="140" font-size="20" font-family='"Meiryo", Arial, Helvetica, sans-serif' font-style="italic">コトヨロ♪ 2012/01/01</text>
            </svg>
        </div>
    </body>
    
</html>

Tips

CSS で円(台), 楕円(おもち)を描画

SVG ではタグ名に描画したい図形を書き, 属性で位置や塗りつぶし, ストロークなどを指定して描画します.

circle タグで円を描画することができます.

<circle fill="black" cx=250 cy=380 r=50 />

楕円は ellipse タグで描画することができます.

<ellipse cx="250" cy="110" rx="35" ry="30" fill="orange" stroke="black" />

CSS で三角形(紙)を描画

多角形の描画は polygon タグで points でパスを設定し描画します. パス用の点はコンマ区切りで指定します.

<polygon fill="red"   points="150 250, 250 350, 350 250" />

正月の浮かれ気分はこの辺にして次回からはまた enchant.js について書きます.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT