JavaScript を使用して SVG 要素を生成する

Question

JavaScript を使用して SVG 要素を作成するにはどうすればよいですか?次のコードを試してみました:

var svg = document.createElement('SVG');
    svg.setAttribute('style', 'border: 1px 単色黒');
    svg.setAttribute('幅', '600');
    svg.setAttribute('高さ', '250');
    svg.setAttribute('バージョン', '1.1');
    svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
document.body.appendChild(svg);

ただし、幅と高さがゼロの SVG 要素が作成されます。

Answer 1

.createElementNS は、svg 要素と path 要素に必要なメソッドです。以下に例を示します。

リーリー

Answer 2

svg 要素の 名前空間 URI 属性と xmlns 属性を忘れています。

さらに、version 属性はすべてのブラウザで無視されます。

リーリー