JavaScriptによるSVG図形の追加サンプル

icon 項目のみ表示/展開表示の切り替え

概要

JavascriptでSVG図形を追加するには、追加する図形の親になるSVGのオブジェクトをdocument.getElementById('id名')で取得します。
親のSVGにはidで名前を定義しておく必要があります。
次に、document.createElementNS('http://www.w3.org/2000/svg','オブジェクト名');により新規にオブジェクトを作成します。
オブジェクト名はSVGで使用するline,circle,path,text等のことです。
座標等のプロパティは基本的にオブジェクト.setAttribute('属性名',値)を使用します。
テキストの文字列を指定する場合はオブジェクト.textContent='文字列'、useで図形を参照する場合はオブジェクト.href.baseVal='#参照名'を使用しないとうまくいきません。
最後に親オブジェクト.appendChild(オブジェクト);で親に追加します。

フォームよりパラメータを入力して追加をクリックすると図形が追加されます

SVGの描画エリアは左上(-100,-100)-右下(100,100)ですので範囲に収まるように指定してください

(0,0) (0,-100) (0,100) (-100,0) (100,0) (0,0)

円

円
中心x=
中心y=
半径R=

テキスト

テキスト
ベースラインx=
ベースラインy=
文字列S=
文字の大きさH=
角度A=度


直線

直線
x1=
y1=
x2=
y2=

ベージェ曲線

ベージェ曲線
始点 x= 始点 y=
制御点x= 制御点y=
終点 x= 終点 y=


四角

四角
x1=
y1=
width=
height=

直線0,0-100,100をJavaScriptで追加する例

html

<svg id="svg1" width="200" height="200"  viewBox="-120 -120 240 240" xmlns="http://www.w3.org/2000/svg"> 
</svg>

Javascript

svg1=document.getElementById('svg1');
line1=document.createElementNS('http://www.w3.org/2000/svg','line');
line1.setAttribute('x1',0);
line1.setAttribute('y1',0);
line1.setAttribute('x2',100);
line1.setAttribute('y2',100);
line1.setAttribute('stroke','black');
svg1.appendChild(line1);

子オブジェクト全部を削除

html

<svg width="200" height="200"  viewBox="-120 -120 240 240" xmlns="http://www.w3.org/2000/svg"> 
 <circle cx="0" cy="0" r="90" stroke="black" fill="none" />
 <g id="remove_svg">
  <circle cx="0" cy="-45" r="45" stroke="red" fill="none" />
  <circle cx="38.97" cy="22.5" r="45" stroke="blue" fill="none" />
  <circle cx="-38.97" cy="22.5" r="45" stroke="green" fill="none" />
 </g>
</svg>

Javascript

  var svg=document.getElementById('remove_svg');
  while (svg.firstChild)
    svg.removeChild(svg.firstChild);