SVG namespace & preview bug



SVG namespace & preview bug

error

This XML file does not appear to have any style information associated with it. The document tree is shown below.

SVG namespace & preview bug_preview bug

bad xml close tag

SVG namespace & preview bug_XML_02

Ok

SVG namespace & preview bug_SVG namespace_03



solution & svg namespace

<?xml version="1.0" encoding="UTF-8"?>
<svg width="976px" height="471px" viewBox="0 0 976 471" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>


responsive viewbox

    svgAutoConvert(svgStr) {
const viewport = `<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`;
// const viewport = `<svg width="100%" height="100%" viewBox="0 0 1000 1000">`;
const xml = /<\?xml[\s\S]*\?>/i;
let result = ``;
result = svgStr.replace(xml,``);
let index = result.indexOf(`>`);
result = result.substr(index + 1);
result = viewport + result;
// log(`new result`, result);
return result;
},
svgAutoScale(svgStr) {
let result = ``;
// 匹配任意字符 (\s*\S\s*)* 或 [\s\S]* ???
const reg = /[\s\S]*^<svg(\s*\S\s*)*>$/i;
result = svgStr.replace(reg, `<svg width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`);
log(`result`, result);
return result;
},


auto Svg Download

const autoSvgDownload = (filename = `live-map.svg`) =>{
const svg = document.querySelector(`svg`);
const html = svg.parentElement.innerHTML;
// xml namespace, support browser open preview
const xml = `<?xml version="1.0" encoding="UTF-8"?>\n${html}`;
console.log(`xml`, xml);
console.log(`encodeURIComponent(xml)`, encodeURIComponent(xml));
const element = document.createElement('a');
element.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(xml));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}



demos

 ​

SVG namespace & preview bug_SVG namespace_04

  ​

SVG namespace & preview bug_SVG_05



xgqfrms