設置的XLink：HREF到本地文件創建在SVG的<image>元素沒有顯示

<div id="vmap" style="width: 800px; height: 600px; position: relative; overflow: hidden; background-color: rgb(255, 255, 255);"> 
 
    <svg height="600" width="800"> 
 
    <image xlink:href="file://deutschland_hr_relief.png" width="800" height="600" y="0" x="0"></image> 
 
    <g transform="scale(0.7490636704119851) translate(237.99999999999997, 0)"> 
 
    <path> 
 
//pathdata 
 
</path></g></svg></div>

的HTML代碼與一個jQuery腳本創建的。我想要包含的圖像在同一個目錄中是本地的。我試圖給xlink：href絕對路徑（以file：///爲前綴），並且有和沒有，它不起作用。我非常確定路徑和文件名是正確的。在Xubunutu 14.04 + Firefox（最新）上運行。

可能是什麼原因？

解決感謝羅伯特·隆森。

創建的映像與

document.createElementNS('http://www.w3.org/2000/svg','image'); 
 
this.bg_image.setAttributeNS(null,'x','0'); 
 
    this.bg_image.setAttributeNS(null,'y','0'); 
 
    this.bg_image.setAttributeNS(null,'height',this.height); 
 
    this.bg_image.setAttributeNS(null,'width',this.width); 
 

 
    this.bg_image.setAttributeNS("http://www.w3.org/1999/xlink",'xlink:href','deutschland_hr_relief.png');

來源

2015-10-14 Wojtek

您是否嘗試將路徑設置爲'/ deutschland_hr_relief.png'？ – taxicala

是的。那是與斜線和沒有。 – Wojtek

我有些懷疑svg可能會簡單地覆蓋背景，但我在svg中使用了不透明度設置，並且它不顯示。 – Wojtek

使用createAttributeNS創建xlink:href屬性，setAttributeNode來設置。例如：

var anchor = document.getElementById('anchor'); 
 
    var attr = document.createAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href'); 
 
    attr.value = 'http://example.com'; 
 
    anchor.setAttributeNode(attr);

 <svg:svg xmlns:svg="http://www.w3.org/2000/svg" id="logo" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="60"> 
 
     <svg:g style="fill:#3399cc; font-size:36pt; font-weight: bold"> 
 
     <svg:a id="anchor"> 
 
      <svg:text x="50%" y="65%" text-anchor="middle">example.com</svg:text> 
 
     </svg:a> 
 
     </svg:g> 
 
    </svg:svg>

參考

來源

2016-09-19 21:26:41

設置的XLink：HREF到本地文件創建在SVG的<image>元素沒有顯示

回答

相關問題