javascript 如何在 svg 中动态创建 ag 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4013657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to dynamically create a g element in svg
提问by Zain
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<object id="oo" data="Dynamic_grouping.svg" style="position:fixed;width: 900px;height:750px;bottom: -220px;right: 180px;">
</object>
</body>
<script type="text/javascript">
var far=document.getElementById("oo")
far.addEventListener("load", function (){
var svgDoc=far.contentDocument;
var svgRoot=svgDoc.documentElement;
document.getElementById("bar").onclick=function(){
var g = svgDoc.createElementNS("http://www.w3.org/2000/svg", "g");
g.setAttribute('id', 'group');
g.setAttribute('shape-rendering', 'inherit');
g.setAttribute('pointer-events', 'all');
var use = svgDoc.createElementNS("http://www.w3.org/2000/svg", "use")
use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#g1")
use.setAttributeNS(null,"id", "u")
svgRoot.appendChild(use)
var create_bar=svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect")
create_bar.setAttribute("id", "r_bar")
create_bar.setAttribute("fill", "cream")
create_bar.setAttribute("x", "300px")
create_bar.setAttribute("y", "50px")
create_bar.setAttribute("width", "100px")
create_bar.setAttribute("height", "30px")
create_bar.setAttribute("pointer-events", "inherit")
g.appendChild(create_bar)
var cir = svgDoc.createElementNS("http://www.w3.org/2000/svg", "circle");
cir.setAttribute( "id","cir")
cir.setAttribute( "cx","320px")
cir.setAttribute( "cy","65px")
cir.setAttribute( "r","10px")
cir.setAttribute('fill', 'red')
cir.setAttribute('pointer-events', 'inherit')
g.appendChild(cir)
svgRoot.appendChild(g)
}
var btn_id=document.getElementById('bar2')
btn_id.onclick=function()
{
var a=svgDoc.getElementById('r_bar')
var b=svgDoc.getElementById('group')
var c=svgDoc.getElementById('cir')
var d=svgDoc.getElementById('u')
alert(a.id+".."+b.id+".."+c.id+".."+d.id)
}
},false)
</script>
<input type="button" id="bar" value="Ribbon_Bar">
<input type="button" id="bar2" value="ID">
</html>
回答by Erik Dahlstr?m
I think this is the cause of the error:
我认为这是错误的原因：
use.setAttribute('xlink:href','g1')
use.setAttribute('xlink:href','g1')
The proper syntax is:
正确的语法是：
use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#g1")
Basically you're missing a hashmark for the link, and you should use the namespace-aware setAttributeNS.
基本上，您缺少链接的哈希标记，您应该使用命名空间感知 setAttributeNS。
Regarding setAttribute, you should be aware that using prefixes there is not recommended. From DOM 3 Core(the last paragraph in that section):
关于 setAttribute，您应该知道不建议使用前缀。来自DOM 3 Core（该部分的最后一段）：
DOM Level 1 methods are namespace ignorant. Therefore, while it is safe to use these methods when not dealing with namespaces, using them and the new ones at the same time should be avoided.
DOM Level 1 方法不知道命名空间。因此，虽然在不处理名称空间时使用这些方法是安全的，但应避免同时使用它们和新方法。
