将 xlink:href 设置为本地文件以在 SVG 中创建 <image> 元素不显示答案

【问题标题】：Setting xlink:href to a local file to create an <image> element in SVG not showing将 xlink:href 设置为本地文件以在 SVG 中创建 <image> 元素不显示
【发布时间】：2015-10-14 19:30:55
【问题描述】：

<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（最新）上运行。

可能是什么原因？

感谢 Robert Longson。

用

创建的图像

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');

【问题讨论】：

您是否尝试将路径设置为/deutschland_hr_relief.png？
是的。那个，有斜线和没有。
我有点怀疑 svg 可能只是过度绘制背景，但我在 svg 中尝试了不透明度设置，但它没有显示出来。
图片在作为 src 的普通 IMG 标记内正常显示。
jquery 无法正确创建 link:href 属性。您需要使用 setAttributeNS。

标签： jquery svg xml-namespaces setattribute xlink

【解决方案1】：

使用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>

参考文献

【讨论】：