Если вы делаете это в контексте браузера, вы можете создать одноразовый DOM-узел, содержащий XML, и просто пройтись по нему, чтобы заменить значения атрибута.
Эта функция будет вызывать обратный вызов на каждом дочернем узле:
const walkDOM = (node, callback) => {
callback(node);
[...node.children].forEach(child => {
walkDOM(child, callback)
});
}
Затем вы можете использовать это, чтобы обновить любые атрибуты, соответствующие условиям, которые вы хотите (здесь, заменяя любые, при условии, что у вас есть строка XML с именем svgXml
:
const containerEl = document.createElement('div');
containerEl.innerHTML = svgXml;
walkDOM(containerEl, el => {
const attributes = [...el.attributes];
attributes.forEach(attr => {
if (attr.name === 'foo' && attr.value === 'this is a long value']) {
attr.value = 'yet another long value';
}
});
});
const outputSvgXml = containerEl.innerHTML;
Конечно, вы можете дополнительно оптимизировать это, используя querySelectorAll (property
), чтобы обходить только <property>
узлы и т. Д.
Я нашел это полезным для обновления SVG, используя преимущества надежности браузера.