JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5 SVGで線を引く方法を解説！line要素の基本とサンプルコード

SVG（Scalable Vector Graphics／スケーラブル・ベクター・グラフィックス）は、XML形式で2Dグラフィックスや図形を記述するための言語です。記述されたXMLは、SVGビューアによって描画（レンダリング）されます。現在、主要なWebブラウザの多くは、PNGやGIF、JPGといった画像形式を表示できるのと同じように、SVGも問題なく表示できます。

HTML5 SVGで線を描くには「<line>」要素を使用する

HTML5のSVGで直線を引く場合は、SVGの<line>要素を使います。<line>要素では、線の始点と終点の座標を指定し、スタイル属性によって色や太さを自由に設定できます。

<line>要素でよく使われる主な属性は以下の通りです。

  • x1・y1：線の始点となるX座標とY座標
  • x2・y2：線の終点となるX座標とY座標
  • stroke：線の色
  • stroke-width：線の太さ

サンプルコード

以下のコードを実行すると、HTML5 SVGで線を描画する方法を実際に確認できます。この例では、SVG領域の左上（0,0）から右下（100,100）へ向かって、幅2pxの赤い直線を引いています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 10%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG Line</title>
   </head>
   <body>
      <h2>HTML5 SVG Line</h2>
      <svg id = "svgelem" width = "300" height = "200" xmlns = "https://www.w3.org/2000/svg">
         <line x1 = "0" y1 = "0" x2 = "100" y2 = "100" style = "stroke:red;stroke-width:2"/>
      </svg>
   </body>
</html>

実行結果（出力）

上記のコードをブラウザで開くと、300×200のSVG領域内に、左上から右下へ斜めに伸びる赤い直線が表示されます。

HTML5 SVGで線を引く方法を解説！line要素の基本とサンプルコード

  1. HTML5のlineTo()メソッドで線を描画する方法

    HTML5のlineTo()メソッドで線を描画する方法HTMLで線を描画するには、canvas要素を使用します。canvas上に線を引く際に活躍するのがlineTo()メソッドです。このメソッドはx座標とy座標の2つのパラメータを受け取り、指定した位置までの直線を定義します。lineTo()メソッドは単独では機能せず、以下のメソッドと組み合わせて使用するのが基本の流れです。beginPath(): 新しいパスの作成を開始するmoveTo(): 線の始点となる座標を指定するlineTo(): 線の終点となる座標を指定するstroke(): 定義したパスを実際に画面へ描画するサンプルコード以下のコ

  2. Tkinterのキャンバスに線を描画する方法【create_lineメソッドの使い方】

    TkinterのCanvas（キャンバス）ウィジェットは、図形やオブジェクトの描画、グラフィックや画像の作成など、さまざまな用途に活用できる便利なウィジェットです。キャンバス上に線を引きたい場合は、create_line(x, y, x1, y1, **options) メソッドを使用します。このメソッドでは、始点の座標 (x, y) と終点の座標 (x1, y1) を指定することで、自由に線を描くことができます。線の種類：実線と破線Tkinterで描ける線には、主に「実線」と「破線」の2種類があります。どちらのスタイルにするかは、dash プロパティを使って指定できます。また、fill オプ