不要显示通过javascript创建的使用元素

Question

我有一个svg文件。 JavaScript在'window.onload'上创建'use'标签。 但使用中的图像不会显示在浏览器中。

可能是什么问题？

PS。对不起我的英语不好。

<?xml version="1.0" standalone="no"?> 
<svg width="100" height="100" version="1.1" 
    baseProfile="full" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:mpc="http://www.crtc.com/mpclogic" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
<defs> 
    <g id="elem"> 
     <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAARCAYAAAA/mJfHAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH2QgYDDQJl9RhwQAAAshJREFUOMutlN9LU2EYx98zj85hZKZN1zRxvzQRiuE/MIh+MQKv1A2J3aRSNwZDvAhMlF0Iw19DXYJeKHSXbsokXZAcvRDnnDY9K5fr7EzP5kwRbfOc82xdFWkuKfrevc/74cPD8z68CKXIWkuLwN/UJEB/Efy84gelEpOrVBqcZZMIoXfoX7Mhk2XGR0Yegs8XBJdrKBXHOhwZURzHUoqWy8sF7NRUFXi9bnC5xmJ6veossy8QYJzdngvz80ZwOJTnitbl8kx2bu4++HxB2NyM8SsrL4/r6vLOclxNzU2gqNeJaPQrhEJv2drawt86jA8NPQCvdwkoagzW19uAJAP87GxbVCIRIoRQFMexk5oaMQSDExAOe4EgnsHOzgJQ1Ajf21t2egaDg3dhcbErJBbnekpLMziCeAEk+YV3Op8f63S5nE5XBhQ1Cnt7R+B0tm/IZDhvsdwGhvFAKDT9rbr62k9ZSCxOD+bnZ/04b0mlVzmn8ylEIgHeZjMBTduAYdaApichHPbFh4fveBWKdBgYuAfBoP2wtbUC+9PLbtXXC28YDJ1IoahDicR+cny8GVjWjWu1zUm//yhgMLRL5fIDXibLWyDJ3ZQiJjsb48xmCdC0AyKRT7C7S/M2m4mSSEQxq1UckUiKV0tLTy11ys74vj4FptW2IKGwImm3dyC5vBKTSh8nlpc7+cPDUVFDw8GFS7uTk4Nx3d3XgaYngWE8nF5fGddo0j4XFl45sVgagSS3gCBMVEGB6EIZ19VVAoHAK2CYJbBaH/16t6pSiXiC6ACfj+InJhpPpqcvpxSd9PTkAU1PAcN4eItFHddo0s4y/qKibHZ4+AmQZICfmTERanXaubL4wIAKtrffg9VatSWVppznmlIp4mdmTOB2vyHU6vRzoWBBARbr77/Emc0Xfj0bJSUZH4uLs04VjUbjLaPRKET/Id8BDhJvjlXXvRYAAAAASUVORK5CYII=" width="19" height="17"/> 
    </g> 
</defs> 
<text x='10' y='10'>12332</text> 
<script type="text/javascript"> 
    var linkNS = "http://www.w3.org/1999/xlink"; 
    window.onload= function(){ 
     var elemUse = document.createElementNS(linkNS, 'use'); 
     elemUse.setAttributeNS(linkNS, 'xlink:href', 'elem'); 
     elemUse.setAttributeNS(null, 'x', '53'); 
     elemUse.setAttributeNS(null, 'y', '21'); 
     elemUse.setAttributeNS(null, 'id', 'up_201_trackworking1'); 
     document.getElementsByTagName('svg')[0].appendChild(elemUse);    
    } 
</script> 
</svg> 

Answer 1

您正在创建XLink命名空间，而不是SVG命名空间中的使用元素，以便正确的代码会是这个样子......

var svgNS = "http://www.w3.org/2000/svg"; 
var linkNS = "http://www.w3.org/1999/xlink"; 
window.onload= function(){ 
    var elemUse = document.createElementNS(svgNS, 'use'); 
    elemUse.setAttributeNS(linkNS, 'xlink:href', 'elem');