0

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

4

1 回答 1

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

参考

于 2016-09-19T21:26:41.270 回答