javascript - 使用 JavaScript 在 SVG 中嵌入 JPEG

Question

我想知道如何在 SVG 中包含 jpg 图像!

var ns = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(ns, 'svg');
svg.setAttribute('width', 800);
svg.setAttribute('height', 450);

var image = document.createElementNS(ns, 'image');
image.setAttribute('href', 'http://placehold.it/300x300');
image.setAttribute('x', 0);
image.setAttribute('y', 0);
image.setAttribute('width', 800);
image.setAttribute('height', 450);

svg.appendChild(image);
document.body.appendChild(svg);

我的错误在哪里？

Answer 1

对于 Safari，您需要进行更改

image.setAttribute('href', 'http://placehold.it/300x300');

至

image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'http://placehold.it/300x300');

第二种方式也兼容 Chrome/Firefox。

Safari 将来可能会支持您的方式，因为它是即将推出的 SVG 2 规范的一部分，第二种方式是 SVG 1.1 的处理方式。