无法动态插入SVG中的图像

Posted 2021-03-28

我正在使用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看起来与静态创建的DOM完全相同，正确显示

答案

由于您使用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);