Question

我正在尝试构建以下SVG：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="render" height="200px" width="100%" viewBox="0 0 100 50">
  <image x="0" y="-25" width="100" height="50" xlink:href="https://environmentaldashboard.org/cv_slides/categorybars/nature_photos.png"></image>
</svg>

当<image>静态地成为SVG的一部分时，它可以正常加载。但是，无法使用JavaScript动态加载图片：

var image = makeSVG('image', {
  x: 0,
  y: -25,
  width: 100,
  height: 50,
  'xlink:href': 'https://environmentaldashboard.org/cv_slides/categorybars/nature_photos.png'
});
document.getElementById('render').appendChild(image);
var circle = makeSVG('circle', {
  cx: 100,
  cy: 50,
  r: 40,
  stroke: 'black',
  'stroke-width': 2,
  fill: 'red'
});
document.getElementById('render').appendChild(circle);

function makeSVG(tag, attrs) { // https://stackoverflow.com/a/3642265/2624391
  var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (var k in attrs) {
    el.setAttribute(k, attrs[k]);
  }
  return el;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="render" height="200px" width="100%" viewBox="0 0 100 50"></svg>

为确保makeSVG()函数正常工作，我还要附加一个<circle>，它可以正确呈现。为什么不能以相同的方式加载<image>？当我在浏览器中检查元素时，可以看到突出显示的元素，但是它是空白的。

Answer 1

使用 setAttributeNS 方法添加与名称空间相关的属性xlink

for (var k in attrs) {
    if (k == 'xlink:href') {
        el.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', attrs[k]);
    } else {
        el.setAttribute(k, attrs[k]);
    }
}

动态加载的<img/>未在SVG中渲染

1 个答案: