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文档中创建元素/属性，则在使用createElementNS创建元素时自动设置xmlns：xlink属性，如果您在＆＃39;中创建元素/属性，则自动设置xmlns：xlink属性。在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);

通过javascript创建SVG元素

2 个答案: