SVG の実験１

SVG の要素の追加・削除を試してみた

動的に変化するグラフを SVG を使って作りたいと思っている。手始めにjavascript で SVG の要素を 表示/消去 する実験をしてみた

<script type="text/javascript">
  function rmv(){
    var svg = document.getElementsByTagName('svg')[0];
    svg.removeChild(svg.childNodes[0]);
  }

  function add(){
    var svg = document.getElementsByTagName('svg')[0];
    var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'circle');
    newElement.setAttribute("cx", "150px");
    newElement.setAttribute("cy", "150px");
    newElement.setAttribute("r", "50px");
    newElement.setAttribute("fill", "#FF6666");
    svg.appendChild(newElement);
  }
</script>

<svg width="300px" height="300px" xmlns="http://www.w3.org/2000/svg"> </svg>

<p>
<input type="button" value="円を表示" onclick="add();" />
<input type="button" value="円を消去" onclick="rmv();" />
</p>