我有两个<；使用>；我的<；svg>；元素。一个出现，一个不出现'；T_Svg

我有两个<；使用>；我的<；svg>；元素。一个出现，一个不出现'；T

svg

我有两个<；使用>；我的<；svg>；元素。一个出现，一个不出现'；T,svg,Svg,其中一个use元素是动态创建的，另一个是静态创建的。我写了一本JSFIDLE var svgElt=document.getElementById（'svg_-box'）； var newUse=document.createElements（“http://www.w3.org/2000/svg“，‘使用’”； setAttribute（'x'，'150px'）； setAttribute（'y'，'10px'）； setAttribute（'xlink:href'，'#b'）； svgE

其中一个use元素是动态创建的，另一个是静态创建的。我写了一本JSFIDLE


var svgElt=document.getElementById（'svg_-box'）；
var newUse=document.createElements（“http://www.w3.org/2000/svg“，‘使用’”；
setAttribute（'x'，'150px'）；
setAttribute（'y'，'10px'）；
setAttribute（'xlink:href'，'#b'）；
svgElt.appendChild（新用途）；

两个在Chrome的调试器中显示相同。为什么只有一个出现

谢谢，Rick

您不能使用setAttribute设置xlink:href属性，您需要使用setAttributes

var svgElt=document.getElementById（'svg_-box'）；
var newUse=document.createElements（“http://www.w3.org/2000/svg“，‘使用’”；
setAttribute（'x'，'150px'）；
setAttribute（'y'，'10px'）；
newUse.setAttributeNS（'http://www.w3.org/1999/xlink'、'xlink:href'、'#b'）；
svgElt.appendChild（新用途）

Aha！作品祝福你，罗伯特！它们在Chrome调试器中显示相同的原因是什么？或者，有没有一种方法可以使差异变得明显？html通常不太关心名称空间，因此浏览器工具也不关心名称空间，但SVG内容确实需要正确的名称空间。如果您编写了几十亿个SVG页面，并且这些页面变得非常流行，那么浏览器将花费更多时间检查SVG内容是否与他们的工具配合良好。
<!doctype html>
<body>
    <svg
     id="svg_box"
     width="200px"
     height="100px"
     viewBox="0 0 200 100"
     style="background-color:pink"
    >
        <defs>
            <g id="b">
                <path d="m 4.23,7.7400001 0,-7.14000002 C 4.23,0.18000008 3.96,7.6293944e-8 3.39,7.6293944e-8 l -2.22,0 C 0.39000002,7.6293944e-8 1.9073486e-8,0.36000008 1.9073486e-8,1.0500001 c 0,0.75 0.420000000926514,1.02 1.349999980926514,1.02 0.21,0 0.45,0.03 0.66,0.03 L 2.01,17.1 c -0.12,0 -0.21,0 -0.3,0 C 0.51000002,17.1 1.9073486e-8,17.28 1.9073486e-8,18.12 1.9073486e-8,18.81 0.39000002,19.17 1.17,19.17 l 2.67,0 c 0.45,0 0.6,-0.24 0.6,-0.75 l 0,-1.17 c 0.99,1.47 2.52,2.19 4.56,2.19 3.93,0 6.93,-3.09 6.93,-6.9 0,-3.8699999 -2.94,-6.8999999 -6.87,-6.8999999 -2.07,0 -3.72,0.72 -4.83,2.1 z M 8.79,17.13 c -2.73,0 -4.62,-1.98 -4.62,-4.68 0,-2.7299999 1.92,-4.6799999 4.62,-4.6799999 2.73,0 4.62,2.01 4.62,4.6799999 0,2.79 -1.89,4.68 -4.62,4.68 z" />
            </g>
        </defs>
        <use x="130px" y="10px" xlink:href="#b" /> 
    </svg>
    <script>
        var svgElt = document.getElementById('svg_box');
            var newUse = document.createElementNS("http://www.w3.org/2000/svg", 'use');
            newUse.setAttribute('x', '150px');
            newUse.setAttribute('y', '10px');
            newUse.setAttribute('xlink:href', '#b');
            svgElt.appendChild(newUse);
    </script>
</body>