Question

我尝试使用javascript创建一个“使用”节点，但结果无法在屏幕上看到，有没有人有任何想法？顺便说一下，创建其他类型的工作正常，例如创建椭圆。

以下是代码。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
//this can work
function onEllipse(){
    var ellipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
    ellipse.setAttribute("cx", "20");
    ellipse.setAttribute("cy", "40");
    ellipse.setAttribute("rx", "20");
    ellipse.setAttribute("ry", "10");
    ellipse.setAttributeNS(null,'style','visibility:visible;fill:green');
    svg.appendChild(ellipse);
}

//this **WON"T** work, the referenced node "#circle1" is alredy in the "defs"
function onUse(){
    var xmlns = "http://www.w3.org/2000/svg";   
    var svgns = 'http://www.w3.org/2000/xlink/namespace/';
    var Node = document.createElementNS(xmlns,'use');
    Node.setAttributeNS(null,'id','abcd');
    Node.setAttributeNS(null,'x','200');
    Node.setAttributeNS(null,'y','200');
    Node.setAttributeNS(null,'style','visibility:visible;fill:green');
    Node.setAttributeNS(svgns,'xlink:href','#circle1');
    svg.appendChild(Node);
}


var svg;
$(document).ready(function(){
    svg = document.getElementsByTagName('svg')[0];
});
</script>
</head>

<body>
    <div id="left-toolbar" style="float:left;border:1px solid #DDDDDD;overflow:auto">
        <input type='button' onclick='onEllipse()' value='ellipse' /><br />
        <input type='button' onclick='onUse()' value='use' /><br />
    </div>

    <div id="workarea" style="float:left;border:1px solid #DDDDDD;margin:0px 20px 0px 20px;overflow:auto">
        <svg width="1280px" height="720px" viewBox="0 0 1280 720" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <circle id="circle1" cx="35" cy="20" r="20" style="stroke: black; fill: none;" />
            </defs>
            <!--use x="100" y="100" xlink:href = "#circle1"/-->
        </svg>
    </div>
</body>
</html>

Answer 1

xlink命名空间为http://www.w3.org/1999/xlink，因此您需要

var svgns = 'http://www.w3.org/1999/xlink';

尽管在我看来调用xlink命名空间svgns会引起混淆。

Answer 2

使用：

var xlink = 'http://www.w3.org/1999/xlink';
Node.setAttributeNS(xlink,'href','#circle1');

而不是：

var svgns = 'http://www.w3.org/2000/xlink/namespace/';
Node.setAttributeNS(svgns,'xlink:href','#circle1');

javascript创建使用元素

2 个答案: