MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    svg

    svg 要素は、ルート要素でない場合、スタンドアローンな SVG の断片を現在のドキュメント(例えば HTML ドキュメント)の中にネストするために使われます。このスタンドアローンな断片は独自のビューポートと座標系を持ちます。

    使用可能な場所

    カテゴリ コンテナ要素、構造的要素
    許可された内容 任意の数、任意の順で以下の要素を配置可能:
    アニメーション要素 »
    説明的要素 »
    図形要素 »
    構造的要素 »
    グラデーション要素 »
    <a><altglyphdef><clippath><color-profile><cursor><filter><font><font-face><foreignobject><image><marker><mask><pattern><script><style><switch><text><view>
    標準文書 SVG 1.1 (2nd Edition)

    次の SVG 画像を考えてみましょう(イタリアの国旗を表しています):

    <?xml version="1.0"?>
    <svg xmlns="http://www.w3.org/2000/svg" 
         width="150" height="100" viewBox="0 0 3 2">
    
      <rect width="1" height="2" x="0" fill="#008d46" />
      <rect width="1" height="2" x="1" fill="#ffffff" />
      <rect width="1" height="2" x="2" fill="#d2232c" />
    </svg>

    これは次のように HTML5 文書に含めることができます:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8" />
      <title>HTML/SVG Example</title>
    </head>
    
    <body>
    
      <svg width="150" height="100" viewBox="0 0 3 2">
        <rect width="1" height="2" x="0" fill="#008d46" />
        <rect width="1" height="2" x="1" fill="#ffffff" />
        <rect width="1" height="2" x="2" fill="#d2232c" />
      </svg>
    
    </body>
    </html>

    属性

    グローバル属性

    専用属性

    DOM インタフェース

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

    ブラウザ実装状況

    機能 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: teoli, twe
    最終更新者: teoli,