87

次のコードに似た HTML 構造があります。

<div id='intro'>
<svg>
//draw some svg elements
<svg>
</div>

javascript と DOM を使用して、上記で定義した SVG にいくつかの要素を追加できるようにしたいと考えています。どうすればそれを達成できますか？考えていた

var svg1=document.getElementById('intro').getElementsByTagName('svg');
svg1[0].appendChild(element);//element like <line>, <circle>

私はDOMの使用、またはappendChildに渡される要素の作成方法にあまり慣れていないので、これを手伝ってくれるか、この問題を解決するために必要な他の選択肢を教えてください。どうもありがとう。

4

2 に答える 2

203

HTML 要素を作成する場合は、document.createElement関数を使用します。SVG は名前空間を使用するため、document.createElementNS関数を使用する必要があります。

var svg = document.getElementsByTagName('svg')[0]; //Get svg element
var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespace
newElement.setAttribute("d","M 0 0 L 10 10"); //Set path's data
newElement.style.stroke = "#000"; //Set stroke colour
newElement.style.strokeWidth = "5px"; //Set stroke width
svg.appendChild(newElement);

このコードは、次のようなものを生成します。

<svg>
 <path d="M 0 0 L 10 10" style="stroke: #000; stroke-width: 5px;" />
</svg>



createElement: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

createElementNS: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

于 2013-05-10T19:51:35.303 に答える
13

JS を使用して svg を扱うことが多い場合は、d3.js を使用することをお勧めします。それをページに含めて、次のようにします。

d3.select("#svg1").append("circle");
于 2013-05-10T18:56:05.607 に答える