【初心者向け】HTML5 SVGでポリライン（折れ線）を描画する方法
SVGとは？
SVG（Scalable Vector Graphics／スケーラブル・ベクター・グラフィックス）は、XMLを使って2Dグラフィックスや図形アプリケーションを記述するための言語です。記述されたXMLコードは、SVGビューアによって画面に描画されます。現在では、主要なWebブラウザのほとんどが、PNG・GIF・JPGなどの画像形式と同じようにSVGを表示できるようになっています。
<polyline>要素でポリラインを描く
HTML5のSVGでポリライン（折れ線）を描画するには、<polyline>要素を使用します。この要素は、複数の直線を連結して1つの図形を作成するために使われます。各頂点の位置はpoints属性に「x座標,y座標」のペアとして指定し、複数の頂点は半角スペースで区切って並べます。
サンプルコード
以下のコードを実行すると、HTML5 SVGでポリラインを描画する方法を実際に確認できます。
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 20%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG Polyline</title>
</head>
<body>
<h2>HTML5 SVG Polyline</h2>
<svg id="svgelem" width="300" height="300" xmlns="https://www.w3.org/2000/svg">
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
</svg>
</body>
</html>実行結果
このコードをブラウザで開くと、赤色で塗りつぶされた階段状のポリラインが表示されます。points属性の座標値を変更すれば、思い通りの形状の折れ線を簡単に描くことが可能です。
-
HTML5でSVG画像を使用する方法｜img・object・embedタグの使い分けを解説
HTML5でSVG画像を表示する基本 HTML5でSVG（Scalable Vector Graphics）画像を利用するには、<img>要素または<svg>要素を使用します。SVGファイルをWebページに組み込む方法は主に3つあり、それぞれ特徴が異なるため、用途に応じて適切なものを選択することが重要です。 SVGを読み込む3つの方法 <img>タグ：最もシンプルな方法。JPEGやPNGなどの通常の画像と同じ感覚で扱えます。 <object>タグ：外部リソースとしてSVGを読み込みます。フォールバックコンテンツを指定できるのが特徴です。 &l
-
HTML5のstrokeText()メソッドでキャンバスにテキストを描画する方法
HTML5のCanvas（キャンバス）上にテキストを描画するには、strokeText()メソッドを使用します。このメソッドは、指定されたx座標・y座標の位置に、テキストの輪郭線（ストローク）を描画します。デフォルトの色は黒です。strokeText()メソッドの構文strokeText(text, x, y [, maxWidth ])パラメータの説明strokeText()メソッドに渡す各パラメータは以下のとおりです。番号パラメータ説明1text描画するテキスト文字列2x描画を開始する位置のx座標3y描画を開始する位置のy座標4maxWidth許容される最大幅（ピクセル単位）。省略可能です