私はJavaScriptを使用して、この構造を作成する必要がjavascriptの

Question

を経由してSVG要素を作成します。

<svg> 
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#circle"></use> 
</svg> 

しかし、私は xmlns:xlink属性を作成して問題があります。私はしかし xmlns:xlinkせず、上記と同じ設定 xmlns:xlinkすべての作業を善となり、SVGで文字列をコメントする場合

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); 
var use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); 
// throws error here 
use.setAttributeNS('http://www.w3.org/2000/xmlns', 'xmlns:xlink', 'http://www.w3.org/1999/xlink'); 
use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#circle'); 
svg.appendChild(use); 

：ここに私のJSコードです。

私は似たような質問を多く見ましたが、私の問題は解決しませんでした。ここで

Answer 1

use.setAttributeNS('http://www.w3.org/2000/xmlns', 'xmlns:xlink', 'http://www.w3.org/1999/xlink'); 

についてあなたはその行を必要としないし、実際にそれが有効ではありません。

xmlns：xlink属性は、XMLドキュメントに要素/属性を作成する場合はcreateElementNSまたはsetAttributeNS属性を持つ要素を作成するときに自動的に設定され、HTMLで要素を作成する場合は不要です資料。

Answer 2

私達は行く：

// "circle" may be any tag name 
var shape = document.createElementNS("http://www.w3.org/2000/svg", "circle"); 

// Set any attributes as desired 
shape.setAttribute("cx", 25); 
shape.setAttribute("cy", 25); 
shape.setAttribute("r", 20); 
shape.setAttribute("fill", "green"); 

// Add to a parent node; document.documentElement should be the root svg element. 
// Acquiring a parent element with document.getElementById() would be safest. 
document.documentElement.appendChild(shape);