Директива Angular.js и SVG

Question

У меня есть директива, которая ссылается на шаблон, содержащий простой круг SVG, который он добавляет к элементу SVG. Выходной сигнал выглядит так:

<svg version="1.1" baseProfile="full" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg"> 
    <circle r="50" stroke="#000" stroke-width="2" cx="100" cy="100" fill="#0ff" cursor="pointer" booth=""></circle> 
</svg> 

Проблема заключается в том, что на самом деле круг не отображается в браузере; это как если бы я никогда не добавлял SVG вообще. Если я поместил этот же HTML-код на страницу по умолчанию, круг будет выглядеть так, как ожидалось.

Это происходит во всех браузерах, в которых я тестировал функциональность (Chrome, Firefox, Safari).

Кто-нибудь знает, в чем проблема?

Answer 1

Проблема заключается в том, что директива Angular добавляет ваш элемент окружения как XHTML (с пространством имен «http://www.w3.org/1999/xhtml»), где он должен находиться в пространстве имен SVG («http://www.w3.org/2000/svg»).

Вы можете создать свой cirlce в своей функции ссылок вашей директивы svg с правильным пространством имен и добавить его.

template: '<svg></svg>', 
link: function(scope, element, attrs) { 
    var myCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); 
    angular.element(myCircle).attr('r', 50); 
    angular.element(myCircle).attr('cx', 100); 
    angular.element(myCircle).attr('cy', 100); 
    element.append(myCircle); 
} 

Или вы можете использовать библиотеку D3, чтобы манипулировать SVG элементов в пределах ваших угловых директив, как описано в этом видео: https://www.youtube.com/watch?v=vmJ0501WzU0