我在我的<svg>元素中有两个<use>元素。一个出现，一个不是

其中一个使用元素是动态创建的，一个是静态创建的。我写了一个jsfiddle。我在我的<svg>元素中有两个<use>元素。一个出现，一个不是

<!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>

两人双双出现在Chrome浏览器的调试器相同。为什么只有一个出现？

谢谢，里克

来源

2017-05-07 user2171796

你不能设置一个XLink：通过使用setAttribute href属性，则需要使用setAttributeNS

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.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#b'); 
 
svgElt.appendChild(newUse);

<!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> 
 

 
</body>

来源

2017-05-07 07:34:09

啊哈！作品！祝福你，罗伯特！ – user2171796

是否有一个原因，他们为什么在Chrome调试器中显示相同？或者，有没有办法让差异变得可见？ – user2171796

html通常不会太担心命名空间，所以浏览器工具不会，但SVG内容确实需要命名空间才是正确的。如果您编写了几十亿个SVG页面，并且他们变得非常流行，浏览器会花费更多时间检查SVG内容是否适用于他们的工具。 –

我在我的<svg>元素中有两个<use>元素。一个出现，一个不是

回答

相关问题