Я не знаком с теми объектами, чьими методами вы пользуетесь для добавления, поэтому сразу к делу — у каждого языка разметки есть идентификатор
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;
}
