Не отображается image в SVG

235

24 мая 2018, 05:40

Нужно с помощью JavaScript засунуть картинку внутрь SVG, при помещении тега image в SVG содержимое xlink:href игнорируется и не отображается. Ради интереса засунул image в body, все прекрасно работает, но картинку нужно использовать именно в SVG. Мой способ:

var svg = document.createElementNS(xmlns, "svg");
svg.setAttribute("width",200);
svg.setAttribute("height",200);
svg.setAttribute("id","svg");
document.getElementById('body').appendChild(svg);
var img = document.createElementNS(xmlns, "image");
img.setAttribute("width", 200);
img.setAttribute("height", 200);
img.setAttribute("x", 0);
img.setAttribute("y", 0);
img.setAttribute("xlink:href", https://image.jpeg);

Answer 1

Нужно добавить xlink:

var xmlns = "http://www.w3.org/2000/svg"; 
var xlink = "http://www.w3.org/1999/xlink"; 
var svg = document.createElementNS(xmlns, "svg"); 
svg.setAttribute("width", 200); 
svg.setAttribute("height", 200); 
svg.style.border = "1px solid red"; 
 
document.body.appendChild(svg); 
 
var img = document.createElementNS(xmlns, "image"); 
img.setAttributeNS(xlink, 'xlink:href', "https://via.placeholder.com/200x200"); 
 
svg.appendChild(img);