SVGで絵を描く(2011/11/6)

SVG(Scalable Vector Graphics)要素でも描画できるようなので挑戦。
(IEは9以上のブラウザでなければSVGには対応してません。)

SVG要素で描画サンプル 1

半透明の丸を 3 つ重ねています。

ソース

<svg width="550" height="200" viewBox="0 0 550 200" style="margin:0"> <circle cx="120" cy="100" r="80" style="fill:rgba(8, 124, 238, 0.3)" /> <circle cx="250" cy="100" r="80" style="fill:rgba(0, 191, 255, 0.4)" /> <circle cx="380" cy="100" r="80" style="fill:rgba(65, 105, 225, 0.3)" /> </svg>

属性

<circle cx="中心X座標" cy="中心Y座標" r="半径" style="fill:rgba(r, g, b, alpha)" />

参考リンク

SVG要素で描画サンプル 2

こちらのページを参考にして丸を星に変更して試してみました。

GIF Animation & Flash Animation

ソース

<svg width="550" height="300" viewBox="0 0 550 300" style="margin:0"> <defs> <radialGradient id="star" cx="50%" cy="50%" fx="30%" fy="30%"> <stop offset="0%" stop-color="#00ccff" /> <stop offset="50%" stop-color="#0099ff" /> <stop offset="100%" stop-color="#0066ff" /> </radialGradient> <path id="curve" d="M30,200 C210,50 360,300 520,100" fill="none"/> </defs> <polygon style="fill:url(#star);" points="250,40 226,114 151,116 210,161 190,236 250,192 310,236 290,161 349,116 274,114"/> <text font-family="Comic Sans MS" font-size="33" fill="#000033"> <textPath xlink:href="#curve" method="stretch" style="visibility: visible;">GIF Animation &amp; Flash Animation</textPath></text> </svg>

属性

<svg viewBox="x y 幅 高さ"> <radialGradient id="名前" cx="終点円中心X座標" cy="終点円中心Y座標" fx="開始X座標" fy="開始Y座標"> <stop offset="位置" stop-color="色" />

参考リンク

星の座標

Windows付属のペイントで、星の座標を求める。
(Photoshop CS5ではできなかった。)

星の座標の求め方サンプル画像 1

星の頂点にカーソルを合わせると左下に座標が表示。

星の座標の求め方サンプル画像 2

全ての角の座標を調べてソースに挿入。

<polygon style="fill:url(#star);" points="250,40 226,114 151,116 210,161 190,236 250,192 310,236 290,161 349,116 274,114"/>

座標の求め方ですけど、もっと簡単な方法があれば 教えていただけると大変助かります。(計算はしたくないです。笑。)

上に戻る