Tengo elementos SVG en la página. Intento cambiar uno y luego revocar los cambios:
const button1 = document.getElementById('button1'); const button2 = document.getElementById('button2'); var elements = new Map(); var copy; button1.addEventListener('click', event => { var svgns = "http://www.w3.org/2000/svg", container = document.getElementById( 'cont' ); for (var x = 0; x < 500; x += 50) { var circle = document.createElementNS(svgns, 'circle'); circle.setAttributeNS(null, 'cx', x); circle.setAttributeNS(null, 'cy', x); circle.setAttributeNS(null, 'r', 50); circle.setAttributeNS(null, 'style', 'fill: none; stroke: blue; stroke-width: 1px;' ); elements.set(x, circle); container.appendChild(circle); } }); button2.addEventListener('click', event => { let element = elements.get(50); copy = element.cloneNode(true); element.style.fill = "red"; }); button3.addEventListener('click', event => { let element = elements.get(50); element = copy; //console.log(element); }); <button id="button1">Build</button> <button id="button2">Change</button> <button id="button3">Revert</button> <svg id="cont" height="1000" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg>element = copy solo va a cambiar una referencia al elemento DOM, pero no al DOM en sí. Para eso necesitas usar la API DOM.
Así que reemplace esa asignación con:
element.replaceWith(copy); const button1 = document.getElementById('button1'); const button2 = document.getElementById('button2'); var elements = new Map(); var copy; button1.addEventListener('click', event => { var svgns = "http://www.w3.org/2000/svg", container = document.getElementById( 'cont' ); for (var x = 0; x < 500; x += 50) { var circle = document.createElementNS(svgns, 'circle'); circle.setAttributeNS(null, 'cx', x); circle.setAttributeNS(null, 'cy', x); circle.setAttributeNS(null, 'r', 50); circle.setAttributeNS(null, 'style', 'fill: none; stroke: blue; stroke-width: 1px;' ); elements.set(x, circle); container.appendChild(circle); } }); button2.addEventListener('click', event => { let element = elements.get(50); copy = element.cloneNode(true); element.style.fill = "red"; }); button3.addEventListener('click', event => { let element = elements.get(50); element.replaceWith(copy); }); <button id="button1">Build</button> <button id="button2">Change</button> <button id="button3">Revert</button> <svg id="cont" height="1000" width="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg>