<svg>要素


<svg>要素は、SVGの要素であることを示します。
<svg>要素をネストする(入れ子にする)ことができません。つまり、<svg>要素の中に別の<svg>要素を記述することはできません。

次の例は長方形と円の線を描く<svg>要素の例です。


  <svg width="300" height="120" stroke="red" stroke-width="3" fill="none" >
    <rect x="20" y="20" width="80" height="80" />
    <circle cx="160" cy="60" r="30" stroke="blue" />
  </svg>
  

この例では、widthは<svg>要素の幅、heightは<svg>要素の高さを示します。

これで、ブラウザには次のように表示されます。

<svg>要素の属性としてよく記述されるのは以下の通りです。

属性 解説
fill 閉じた図形を塗り潰す色 fill="none"、fill="blue"
height 矩形ビューポートで表示される高さ height="100"
stroke 描画ペンの色 stroke="red"
stroke-width 描画ペンの幅 stroke-width="3"
width 矩形ビューポートで表示される幅 widtht="100"
viewBox <svg>要素のビューポートの位置(x,y座標)と大きさ(幅と高さ) viewBox="0 0 300 100"


SVG目次 inserted by FC2 system