あけおめ企画 – 画像を一切使用せず SVG で鏡餅年賀状を描いてみた
元旦に投稿したエントリー『アケオメー!! 画像を使わずに HTML5 Canvas, CSS, SVG それぞれで年賀状を作ってみた.』の個別解説です.
今回解説するのは SVG Version についてです. SVG を触ったのは『SVG で遊んでみました』で国旗書いた以来なので色々と忘れててちょっと焦った.
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> <!--[if IE]> <style> .msg { font-family: "標楷體", "@MS 明朝"; writing-mode:tb-rl; } </style> <![endif]--> </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 について書きます.
02. 元旦に書いたやつをそれぞれ解説.
手を抜いた感の否めない…
『あけおめ企画 – 画像を一切使用せず SVG で鏡餅年賀状を描いてみた』
https://t.co/jTlvTfBd
http://t.co/vhMv4ZuP
#web #html5 #svg