Почему не отображаются пути SVG?

Question

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

Вот самая странная часть ... Они показывают, только если я загляну внутрь элемента проверки, немного отредактируйте HTML и снова сделаю его.

Вот GIF:

Вот код, который генерирует пути:

var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); 
path.setAttributeNS(null, 'id', 'path' + index); 
path.setAttributeNS(null, 'd', 'M0 0'); 
path.setAttributeNS(null, 'stroke', '#484848'); 
path.setAttributeNS(null, 'fill', 'none'); 
path.setAttributeNS(null, 'stroke-width', '4px'); 

Это лучше, если вы на самом деле смотреть на конкретном примере, так что я имею получил ручку здесь: http://codepen.io/anon/pen/OWaEdd

Пожалуйста, помогите нуждающемуся человеку. Я хотел бы узнать (и исправить), почему мои пути не отображаются при создании путей. Я буду очень признателен!

Answer 1

Вам кажется, что вам необходимо создать элементы в пространстве имен SVG при создании <path> с помощью createElementNS. Ваша проблема в том, что вы не создаете элемент <svg> с той же функцией.

Следующий вызов setAttribute для «xmlns» неверен и может быть удален, пространство имен является побочным эффектом создания элемента, это не то, что вы можете установить после факта с помощью setAttribute.