line

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

html
<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

使用上のメモ

カテゴリー基本シェイプ要素、グラフィック要素、図形要素
許可されている内容任意の数、任意の順序の以下の要素。
アニメーション要素
説明的要素

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# LineElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
line
systemLanguage
x1
x2
y1
y2

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報