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

  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 に答える