line

この文書は翻訳中です。他国語のままの部分などがあるのはその為です。
是非お気軽に MDN に登録して翻訳に参加し、私たちの手助けをして下さい!

概要

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

使用可能な場所

カテゴリ 基本図形要素, グラフィックス要素, 図形要素
許可された内容 任意の数、任意の順で以下の要素を配置可能。
アニメーション要素
説明的要素
標準文書 SVG 1.1 (2nd Edition)

ソースコード 出力結果
<?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

You can also apply transformation to get the same result. Beginning with a normal line,

ソースコード 出力結果
<?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 に基づく。

関連情報

添付ファイル

ファイル サイズ 日時 添付者:
line.svg
256 バイト 2011-02-09 22:54:51 Jeremie
line1.svg
149 バイト 2011-06-18 14:54:15 syssgx
line2.svg
182 バイト 2011-06-18 15:03:05 syssgx

Document Tags and Contributors

Contributors to this page: manzyun
最終更新者: manzyun,