使用JavaScript將JPEG嵌入到SVG中

Question

我想知道如何將JPG圖像包含在SVG中！

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'); 

這第二種方式是鉻/火狐兼容了。

由於它是即將到來的SVG 2規範的一部分，Safari可能會支持您的未來發展方向，第二種方法是SVG 1.1做事情的方式。