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看起来与静态创建的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);

动态显示图像到SVG中不会显示

编辑以下评论

1 个答案: