xmlns attribute missing | Adding a download button
SamuelMarks opened this issue · 0 comments
SamuelMarks commented
I wanted users to be able to easily down the map as an SVG, so I added this:
<button onclick="downloadSVG()">Download SVG</button>
function downloadSVG() {
const container = document.getElementById('container');
// Remove `div`s so we don't get an:
// `error on line 2 at column 377566: Extra content at the end of the document`
for (const item of container.getElementsByTagName('div'))
item.remove();
// Add `xmlns` attribute to resolve this error:
// `This XML file does not appear to have any style information associated with it.
// The document tree is shown below.`
container.getElementsByTagName('svg')[0]
.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
const blob = new Blob([`
<!--?xml version="1.0" encoding="utf-8"?-->\n${container.innerHTML}`
]);
const element = document.createElement('a');
element.href = window.URL.createObjectURL(blob);
element.download = 'map.svg';
element.id = 'downloader';
element.click();
element.remove();
}
Might be worth having a convenience function for this. At the very least I see no disadvantage in you adding the xmlns
attribute.