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

Question

Я использую 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 выглядит точно так же, как и статически созданный, которые отображаются правильно

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