Добавление растровых изображений в HTML5 SVG программно

Question

У меня есть веб-приложение, использующее SVG для рисования холста. Выполняется рисование каракулей и написание текста. Теперь я хочу иметь возможность добавлять растровые изображения на холст. Это не работает вообще.

Я пытаюсь добавить изображение в SVG с помощью тега <image>. Если я пишу статический HTML, который работает так, как вы ожидали. Тем не менее, я создаю только документ SVG в HTML-коде, все остальные элементы создаются динамически с помощью JavaScript. Хотя это работает для путей и текстовых элементов, оно, похоже, не работает для изображений. Я хотел бы знать, почему.

Я создал JSFiddle, чтобы продемонстрировать проблему: http://jsfiddle.net/cc4PH/1/. Как вы можете видеть в инструментах разработчика, код тот же, что и в статическом случае и в динамическом случае. Но только в статическом случае изображение отображается. Это не проблема, связанная с браузером. Я мог бы воспроизвести его с помощью Chrome, Firefox, Safari и Opera.

Должен ли я как-то сказать SVG загрузить изображение?

Заранее благодарен!

Answer 1

Похоже, что проблема связана с атрибутом xlink:href. Кажется, что для этого нужно использовать setAttributeNS(), поскольку динамически созданное изображение не знает, чтобы получить ссылку на пространство имен xlink от элемента svg. Исправление заключается в следующем:

var $img = $(document.createElementNS('http://www.w3.org/2000/svg', 'image')).attr({width: 200, height: 200}); 
$img.get(0).setAttributeNS('http://www.w3.org/1999/xlink', 'href', url); 

http://jsfiddle.net/cc4PH/6/

Интересно, что также означает, что атрибут xmlns:xlink является не необходимости в создании svg элемента, если связанные изображения будут добавлены только динамически, так как Показан здесь: http://jsfiddle.net/cc4PH/8/