我在我的<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>元素。一個出現，一個不是

回答

相關問題