1.遇到需要將svg下載的需求，網上找了一些代碼，地址是這個https://github.com/exupero/saveSvgAsPng，但是不太好用，莫名的把網頁所有的svg都下載了，于是在源碼的基礎上做了一些小的修改；代碼如下所示
var doctype = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [<!ENTITY nbsp " ">]>'; function convertToPng(src, w, h) { var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = w; canvas.height = h; context.drawImage(src, 0, 0); var png; try { png = canvas.toDataURL("image/png"); } catch (e) { if ((typeof SecurityError !== 'undefined' && e instanceof SecurityError) || e.name == "SecurityError") { console.error("Rendered SVG images cannot be downloaded in this browser."); return; } else { throw e; } } return png; } function isElement(obj) { return obj instanceof HTMLElement || obj instanceof SVGElement; } function reEncode(data) { data = encodeURIComponent(data); data = data.replace(/%([0-9A-F]{2})/g, function (match, p1) { var c = String.fromCharCode('0x' + p1); return c === '%' ? '%25' : c; }); return decodeURIComponent(data); } function uriToBlob(uri) { var byteString = window.atob(uri.split(',')[1]); var mimeString = uri.split(',')[0].split(':')[1].split(';')[0] var buffer = new ArrayBuffer(byteString.length); var intArray = new Uint8Array(buffer); for (var i = 0; i < byteString.length; i++) { intArray[i] = byteString.charCodeAt(i); } return new Blob([buffer], {type: mimeString}); } function downLoad(el, name) { if (!isElement(el)) { throw new Error('an HTMLElement or SVGElement is required; got ' + el); } if (!name) { console.error("文件名為空!"); return; } var xmlns = "http://www.w3.org/2000/xmlns/"; var clone = el.cloneNode(true); clone.setAttribute("version", "1.1"); if (!clone.getAttribute('xmlns')) { clone.setAttributeNS(xmlns, "xmlns", "http://www.w3.org/2000/svg"); } if (!clone.getAttribute('xmlns:xlink')) { clone.setAttributeNS(xmlns, "xmlns:xlink", "http://www.w3.org/1999/xlink"); } var svg = clone.outerHTML; var uri = 'data:image/svg+xml;base64,' + window.btoa(reEncode(doctype + svg)); var image = new Image(); image.onload = function () { var png = convertToPng(image, image.width, image.height); var saveLink = document.createElement('a'); var downloadSupported = 'download' in saveLink; if (downloadSupported) { saveLink.download = name + ".png"; saveLink.style.display = 'none'; document.body.appendChild(saveLink); try { var blob = uriToBlob(png); var url = URL.createObjectURL(blob); saveLink.href = url; saveLink.onclick = function () { requestAnimationFrame(function () { URL.revokeObjectURL(url); }) }; } catch (e) { saveLink.href = uri; } saveLink.click(); document.body.removeChild(saveLink); } }; image.src = uri; } 這里使用的時候只需要調用download方法就可以了，建議封裝成一個單獨的下載服務；download方法的第一個參數el指的是dom元素，就是svg元素，具體的獲取方法通過js或者d3的選擇器都可以；例如
<div id="svg-parent-div"><svg>...</svg></div>
一般通過獲取svg的父元素來找到它，比如
var el = d3.select("#svg-parent-div").node().children[0]; download(el,"下載圖片"); 這樣就可以了；
代碼對于svg的沒設置命名空間的情況做了處理，通過如下代碼，如果svg 元素沒有 設置命名空間，則添加；
el.setAttributeNS(xmlns, "xmlns", "http://www.w3.org/2000/svg"); el.setAttributeNS(xmlns, "xmlns:xlink", "http://www.w3.org/1999/xlink");
同時，添加的命名空間作用在clone的元素上，不會影響原來的svg元素；
總結
以上所述是小編給大家介紹的JavaScript 下載svg圖片為png格式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
