mozilla
Your Search Results

    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 に基づく。

    関連情報

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

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