Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

line要素はSVGの基本図形であり、2つの座標を繋いた直線を描画します。

使用可能な場所

カテゴリ基本シェイプ要素 、 グラフィックス要素 、 図形要素
許可された内容任意の数、任意の順で以下の要素を配置可能:
アニメーション要素
説明的要素

ソースコード 出力結果
<?xml version="1.0"?>
<svg width="120" height="120" 
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <line x1="20" y1="100" 
          x2="100" y2="20" 
          stroke="black" 
          stroke-width="2"/>

</svg>

line.svg

次のようにしても、同じ効果を得ることができます。

ソースコード 出力結果
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"/>
</svg>

line1.svg

tranceform 属性を追加して、線の向きを変えることもできます:

ソースコード 出力結果
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="20" y1="100" x2="100" y2="100" stroke-width="2" 
	stroke="black" transform="rotate(-45 20 100)"/>
</svg>

line2.svg

属性

グローバル属性

専用属性

DOM インターフェイス

この要素は SVGLineElement インターフェイスを提供します。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) IE Opera Safari
基本サポート 1.0 1.5 (1.8) 9.0 8.0 3.0.4
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 3.0 1.0 (1.8) 未サポート (有) 3.0.4

Compatibility sources に基づく。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: nandenjin, Sebastianz, teoli, manzyun
 最終更新者: nandenjin,