1

При загрузке страницы не видна картинка (image = document.createElementNS("http://www.w3.org/2000/svg", 'image');) Но Если в инспекторе объектов, в Google Devs, скопировать html код картинки и вставить - то картинка отобразится

var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
var el = document.getElementById('container')
el.appendChild(svg)
var image = document.createElementNS("http://www.w3.org/2000/svg", 'image');
image.setAttribute('width' , '400px')
image.setAttribute('height' , '400px')
image.setAttribute('x' , '0')
image.setAttribute('y' , '0')
image.setAttribute('xlink:href' , 'http://picfun.ru/wp-content/uploads/HTxyUcwXfw.jpg')

svg.appendChild(image)


http://codepen.io/anon/pen/rLROpB?editors=1010
1

2 ответа 2

2

Вам нужно завернуть ваш код в DOMContentLoaded и вместо setAttribute использовать setAttributeNS.

document.addEventListener("DOMContentLoaded", function(event) {
  var svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
  var el = document.getElementById('container');
  el.appendChild(svg);
  var image = document.createElementNS("http://www.w3.org/2000/svg", 'image');
  image.setAttributeNS(null,'width' , '463');
  image.setAttributeNS(null,'height' , '412');
  image.setAttributeNS(null,'x' , '0');
  image.setAttributeNS(null,'y' , '0');
  image.setAttributeNS('http://www.w3.org/1999/xlink','href', 'http://picfun.ru/wp-content/uploads/HTxyUcwXfw.jpg');
  image.setAttributeNS(null, 'visibility', 'visible');
  svg.appendChild(image);

  svg.setAttribute('width' , '400px');
  svg.setAttribute('height' , '400px');
});

Вот ссылка на рабочий код https://jsfiddle.net/3k8wka88/

2
  • Прошу ссылку на такое работающее решение
    – Den Rash
    16 авг 2016 в 11:34
  • Исправил код и поставил ссылку. 16 авг 2016 в 12:01
0

Все из за "SVG native attributes (not including xlink:href) do not share the SVG namespace; you can either use just setAttribute instead of setAttributeNS, or use"

Работает тут : https://stackoverflow.com/questions/6701705/programmatically-creating-an-svg-image-element-with-javascript

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.