創建SVG元素通過JavaScript

Question

我需要創建一個使用只有JavaScript這樣的結構：

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

但我有創造xmlns:xlink屬性的麻煩。這裏是我的js代碼：

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); 

如果我評論字符串設置xmlns:xlink所有工作良好，使SVG上面一樣，但沒有xmlns:xlink。

我看到很多類似於我的問題，但他們沒有解決我的問題。

Answer 1

關於

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

你並不需要這一行，實際上它是無效的。

如果要在XML文檔中創建元素/屬性，並且在HTML中創建元素時不需要，則使用createElementNS創建元素或使用setAttributeNS創建屬性時會自動設置xml屬性文件。

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);