Установка xlink:href в локальный файл для создания элемента <image> в SVG не отображается

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

Источник

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>

Рекомендации

Источник
Другие вопросы по тегам