line

<line> 要素は SVG の基本図形であり、2つの点をつなぐ直線を作成するために使用します。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />

  <!-- If you do not specify the stroke
       color the line will not be visible -->
</svg>

属性

x1
線の始点の X 座標を定義します。
値の型: <length>|<percentage>|<number> ; 既定値: 0; アニメーション:
x2
線の終点の X 座標を定義します。
値の型: <length>|<percentage>|<number> ; 既定値: 0; アニメーション:
y1
線の始点の Y 座標を定義します。
Value type: <length>|<percentage>|<number> ; 既定値: 0; アニメーション:
y2
線の終点の Y 座標を定義します。
Value type: <length>|<percentage>|<number> ; 既定値: 0; アニメーション:
pathLength
パス全体の長さをユーザーの単位で定義します。
Value type: <number> ; 既定値: none; アニメーション:

グローバル属性

コア属性
主なもの: id, tabindex
スタイル属性
class, style
条件付き処理属性
主なもの: requiredExtensions, systemLanguage
イベント属性
グローバルイベント属性, グラフィックイベント属性
プレゼンテーション属性
主なもの: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
ARIA 属性
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role

使用上のメモ

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

仕様書

仕様書 状態 備考
Scalable Vector Graphics (SVG) 2
<line> の定義
勧告候補 x1、y1、x2、y2 属性に<length><percentage><number>を指定できるように変更
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<line> の定義
勧告 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
lineChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
x1Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
x2Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
y1Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり
y2Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 9Opera 完全対応 8Safari 完全対応 3WebView Android 完全対応 3Chrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 3Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応

関連情報