あけおめ企画 – 画像を一切使用せず SVG で鏡餅年賀状を描いてみた
元旦に投稿したエントリー『アケオメー!! 画像を使わずに HTML5 Canvas, CSS, SVG それぞれで年賀状を作ってみた.』の個別解説です.
今回解説するのは SVG Version についてです. SVG を触ったのは『SVG で遊んでみました』で国旗書いた以来なので色々と忘れててちょっと焦った.
Sample
今回解説するサンプルはこちら.
お餅もテキストも全て SVG で描いています. ３つのサンプルの中で一番コードは少ないです.
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: "標楷體", "@ＭＳ 明朝";
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