Блог

Главная - Вопросы по программированию - Динамическая вставка изображения в SVG не отображается

Динамическая вставка изображения в SVG не отображается

#javascript #svg

#javascript #svg

Вопрос:

Я использую Chrome, и у меня есть пример со следующим кодом:

 <svg width="2000" height="800" id="canvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="icons/remove.svg" height="200" width="200" x="0" y="0"></image>
</svg>

Это отображается правильно.

Когда я создаю тот же самый тег изображения с помощью Javascript, изображение не отображается. Глядя на вкладку сеть, кажется, что она не извлекается с сервера.

Редактировать следующие комментарии

Код, используемый для добавления изображения svg:

   let svg = document.getElementById('canvas');

  let boxSide = 200;
  const svgns = 'http://www.w3.org/2000/svg';
  let x = 0;
  let y = 0;
  let element = document.createElementNS(svgns, 'image');
  element.setAttribute("xlink:href", "icons/remove.svg");
  element.setAttribute("width", boxSide.toString());
  element.setAttribute("height", boxSide.toString());
  element.setAttribute("x", "0");
  element.setAttribute("y", "0");
  svg.appendChild(element);

Позвольте мне еще раз подчеркнуть, что DOM выглядит точно так же, как созданный статически, который отображается правильно

Комментарии:

1. Я подозреваю, что вы можете использовать createElement вместо createElementNS и / или setAttribute вместо setAttributeNS . Если это не поможет, пожалуйста, добавьте свой код javascript в вопрос.

2. @enxaneta сделано, но, пожалуйста, обратите внимание, что DOM выглядит одинаково при динамическом или статическом создании

3. @FedericoTomassetti xlink:href необходимо создать с помощью setAttributeNS

4. @RobertLongson вы правы, это исправлено

Ответ №1:

Поскольку вы создаете элемент с пространством createElementNS имен, вам нужно использовать element.setAttributeNS вместо element.setAttribute .

Попробуйте это:

 let svg = document.getElementById('canvas');

let boxSide = 200;

const svgns = 'http://www.w3.org/2000/svg';
let element = document.createElementNS(svgns, 'image');

element.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'icons/remove.svg');
element.setAttributeNS(null, 'width', boxSide.toString());
element.setAttributeNS(null, 'height', boxSide.toString());
element.setAttributeNS(null, 'x', '0');
element.setAttributeNS(null, 'y', '0');
svg.appendChild(element);