カテゴリー

キーワード

 
> SVG要素で図形を描画【HTML5 ...

SVG要素で図形を描画【HTML5 実践編】


2015 年 3 月 12 日 投稿    view: 6151
タグ:
このエントリーをはてなブックマークに追加

svgで図形を描画

こんにちは、WEBマーケティング部の杉尾です。


前回に引き続き、HTML5のsvg要素についてお話しさせていただきます。

今日は基本的な図形の描画の紹介です。


前回はコチラ ⇒ svg要素を紹介します。IE8にも対応【HTML5 実践編】


SVGで描画できる図形

図形名 要素名
circle
楕円 ellipse
四角形 rect
直線 line
連続直線 polyline
多角形 polygon
テキスト text

では、具体的に見て行きましょう。


①円、楕円

SVG要素で描いた円と楕円


参考ソース

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <circle cx="100" cy="50" r="50" fill="#e74c3c" stroke="#333333" />
    <ellipse cx="100" cy="170" rx="20" ry="40" fill="#f1c40f" stroke="#333333" />
    <ellipse cx="100" cy="270" rx="60" ry="20" fill="#3498db" stroke="#333333" />
</svg>

わかりやすいようにするため、ソースはSVGタグとその中身のみ記しています。(以下、同じく)


解説

属性 意味
cx 円の中心のx座標
cy 円の中心のy座標
r 円の半径(circle要素)
rx 楕円のx軸方向の径(ellipse要素)
ry 楕円のy軸方向の径(ellipse要素)
fill 塗りつぶしの色
stroke 線の色

※SVGでは単位を省略すると、pxが指定されたものとみなされます。

他にpt,pc,mm,cm,in,ex,em,% を指定することができます。


円は前回紹介しましたので、説明は省きます。


楕円(ellipse)の場合、x軸にrxを、y軸にryで大きさを指定してください。


②四角形

SVG要素で描いた四角形


参考ソース

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <rect x="20" y="20" width="250" height="80" fill="#e74c3c" stroke="#333333" />
    <rect x="20" y="120" width="250" height="80" rx="10" ry="10" fill="#f1c40f" stroke="#333333" />
    <rect x="20" y="220" width="250" height="80" rx="50" ry="5" fill="#3498db" stroke="#333333" />
</svg>

解説


属性 意味
x 左上のx座標
y 左上のy座標
width
height 高さ
rx 角を丸めるときの楕円のx軸方向の径
ry 角を丸めるときの楕円のy軸方向の径
fill 塗りつぶしの色
stroke 線の色

黄色と青の四角形では、角を縦横均等に丸めるか、そうでないかの違いです。

青の方は横長に丸めています。


③直線

SVG要素で描いた直線


参考ソース

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <line x1="10" y1="10" x2="200" y2="200" stroke="#333333" />
    <line x1="60" y1="10" x2="250" y2="200" stroke="#e74c3c" stroke-width="10" />
    <line x1="110" y1="10" x2="300" y2="200" stroke="#333333" stroke-width="5" stroke-dasharray="5 10" />
</svg>

解説

属性 意味
x1 始点のx座標
y1 始点のy座標
x2 終点のx座標
y2 終点のy座標
stroke 線の色
stroke-width 線の太さ
stroke-dasharray 点線を描画

stroke-width属性で線の太さを変えることができます。

これは他の図形にも属性として用いることができます。


stroke-dasharray属性で点線を描くことができます。
2つ数字が並んでいます。
1つ目は『線を描画する区間の長さ』です。2つ目は『線を描画しない区間の長さ』です。
上記ソースの場合ですと、『5 10』なので、最初に5px直線を描き、次の10pxは描かないということになります。
それを繰り返すことで、点線が描画できるわけです。


④連続直線、多角形

SVG要素で描いた連続直線と多角形


参考ソース

    <polyline points="20,80 70,20 120,20 170,80 120,140 70,140" fill="none" stroke="#e74c3c" stroke-width="5" />
    <polygon points="20,240 70,180 120,180 170,240 120,300 70,300" fill="none" stroke="#f1c40f" stroke-width="5" />
    <polyline points="20,400 70,340 120,340 170,400 120,460 70,460 20,400" fill="#A8D2F0" stroke="#3498db" stroke-width="5" />
</svg>

解説

属性 意味
points 点のx座標、y座標をカンマ区切りで記述 点と点の間は半角空白
fill 塗りつぶしの色
stroke 線の色
stroke-width 線の太さ

まず、polyline(連続直線)とpolygon(多角形)の違いは始点と終点を自動的に結ぶかどうかです。


上図の赤枠と黄枠の図形を見てください。

ソースでは同じ6点を指定していますが、赤枠のpolyline は最後に閉じられていません。

黄色のpolygonは最後に閉じられています。


polylineで同じように描く場合は青枠の六角形のように、終点を最後に始点と重ねあわせるような記述をしてください。

x座標、y座標の書き方がわかりにくいかもしれませんので、下の画像を参考にしてください。

SVGによる連続直線、多角形の書き方


⑤テキスト

SVGによるテキストの描画


参考ソース

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
    <text x="50" y="50" fill="none" font-size="50" stroke="#e74c3c" font-family="meiryo">SceneLive</text>
    <text x="50" y="100" fill="none" font-size="50" stroke="#e74c3c" font-family="meiryo" stroke-opacity="0.2">SceneLive</text>
    <text x="50" y="150" fill="#000000" font-size="50" stroke="#e74c3c" font-family="meiryo" fill-opacity=0.2>SceneLive</text>
    <text x="50" y="200" fill="none" font-size="50" stroke="#e74c3c" font-family="meiryo" stroke-width="3">SceneLive</text>
    <text x="10" y="10" writing-mode="tb" font-size="40" fill="none" stroke="#f1c40f">シーンライブ</text>
    <text x="50 75 100 180 250 300 340" y="235" font-size="40" fill="#999999" stroke="#3498db">SceneLive</text>
</svg>

解説

属性 意味
x 文字開始位置のx座標。半角空白を挟むと各文字個別の指定も可能
y 文字開始位置のx座標。半角空白を挟むと各文字個別の指定も可能
fill 塗りつぶしの色
font-family フォント名
font-size フォントサイズ
writing-mode テキスト表示方向(lrが左から右、rlが右から左、tbで縦書き)
stroke 文字外枠の色
stroke-width 文字外枠の幅
stroke-opacity 文字の透明度(0.1~1.0で指定)

図とソース表をご覧いただくと大体おわかりになると思います。

文字位置を指定して、上図一番下のようにできるのは面白いですね。


まとめ

2回に渡ってSVG要素について見ていただきました。

SVGはマルチデバイスに対応できるので、これから需要が増えてくると思います。


ドローイングツールで描いた絵をSVG形式でエクスポートするのにも挑戦してみてください。


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事