代码之家 › 专栏 › 技术社区 › Federico Tomassetti

在SVG中动态插入图像不会显示

svg javascript

Federico Tomassetti · 技术社区 · 5 年前

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

0 回复 | 直到 5 年前

Todd Chaffee 5 年前

因为创建的命名空间元素 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);