Почему при добавлении тега appendChild'oм, контент не отображается?

Question

[Артём Щурин]

Всем привет
Есть потребность в создании на странице множества однотипных фрагментов

Ниже фрагмент кода, который вставляет use в разметку

group = svg.find('g')[1];
use = iDte.Helper.createSvgElement('rect', {
'xlink:href': '#' + group.id
});
$(self.getController().getSvg()).find('defs')[0].appendChild(group);
self.getDomElement()[0].appendChild(use);

Элемент добавлен, но его фактические размеры на странице 1x1 px, проблемма только со вставкой, ибо на уже отрисованном древе создаёш копию , отображется

Буду рад любой помощи, мб есть другой способ из js наокпировать svg разметки в уже отрисованное дерево

Answer 1

[Евгений Петров]

Я не знаком с теми объектами, чьими методами вы пользуетесь для добавления, поэтому сразу к делу — у каждого языка разметки есть идентификатор Namespase. Более того, для ряда атрибутов (например, xlink:href) также есть своё пространство имён.

Для создания элементов и таких атрибутов существуют специальные методы createElementNS(), setAttributeNS().

В привычных createElement() и setAttribute() используется пространство имён xHTML — www.w3.org/1999/xhtml. К тому же, setAttributeNS() можно использовать и вместо привычного setAttribute() с указанием null для пространства имён. В этом случае будет использовано то пространство имён, в котором создан сам элемент.

Набросал пример для создания объектов с описанием в виде JSON.

Структура и указание пространств имён

var NS = 'http://www.w3.org/2000/svg',
	NSL = 'http://www.w3.org/1999/xlink',
	elements = [
		{
			name: 'svg',
			attr: {
				'class': 'main'
			},
			children: [
				{
					name: 'symbol',
					attr: {
						id: 'square',
						viewBox: '0 0 100 100'
					},
					children: [
						{
							name: 'rect',
							attr: {
								x: 0,
								y: 0,
								width: 100,
								height: 100,
								fill: 'rgba(51,102,204,1)'
							}
						}
					]
				},
				{
					name: 'symbol',
					attr: {
						id: 'circle',
						viewBox: '0 0 100 100'
					},
					children: [
						{
							name: 'circle',
							attr: {
								cx: 50,
								cy: 50,
								r: 50,
								fill: 'rgba(51,204,102,1)'
							}
						}
					]
				}
			]
		},
		{
			name: 'svg',
			attr: {
				'class': 'icon'
			},
			children: [
				{
					name: 'use',
					attr: {
						'xlink:href': '#square'
					}
				}
			]
		}
	],
	newElement = {
		name: 'svg',
		attr: {
			'class': 'icon'
		},
		children: [
			{
				name: 'use',
				attr: {
					'xlink:href': '#circle'
				}
			}
		]
	};

Создание элемента

function createSVG (elem) {
	var svgElement = document.createElementNS(NS, elem.name);

	if (elem.attr) {
		Object.keys(elem.attr).forEach(function (value) {
			if (value.indexOf('xlink') < 0) {
				svgElement.setAttribute(value, elem.attr[value]);
			} else {
				svgElement.setAttributeNS(NSL, value, elem.attr[value]);
			}
		});
	}

	if (elem.children) {
		elem.children.forEach(function (value) {
			svgElement.appendChild(createSVG(value));
		});
	}

	return svgElement;
}

Использование

elements.forEach(function (element) {
	document.body.appendChild(createSVG(element));
});
document.body.appendChild(createSVG(newElement));

Стили

.main {
	display: none;
}
.icon {
	width: 100px;
	height: 100px;
}

Answer 2

[Артём Щурин]

Спасибо за подробное пояснние)
у меня проблема была с неймспейсами, вызывая setAttributeNS первым параметром передавал null, вместо 'www.w3.org/1999/xlink'

Comments

[Евгений Петров]

Да, я понял:) Просто решил написать ответ не только вам, но любому, кто динамически создаёт SVG.