將 SVG 字符串轉換為 base64

Question

我希望將 SVG 字符串轉換為其 base64 格式，同時嘗試避免創建元素節點。

這樣做的目的是使用<a>標簽創建一個可下載的鏈接

這是 SVG（示例）：

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1500" height="1500" viewBox="0 0 1500 1500" xml:space="preserve"> <desc>Created with Fabric.js 3.6.3</desc> <defs> </defs> <g transform="matrix(1 0 0 1 25.5 300.5)" > <rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;" x="-25" y="-150" rx="0" ry="0" width="50" height="300" /> </g> <g transform="matrix(1 0 0 1 50.5 50.5)" > <rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;" x="-50" y="-50" rx="0" ry="0" width="100" height="100" /> </g> <g transform="matrix(1 0 0 1 950.5 25.5)" > <rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;" x="-550" y="-25" rx="0" ry="0" width="1100" height="50" /> </g> <g transform="matrix(1 0 0 1 350.5 250.5)" > <circle style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;" cx="0" cy="0" r="50" /> </g> <g transform="matrix(1 0 0 1 700.5 1050.5)" > <rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;" x="-50" y="-50" rx="0" ry="0" width="100" height="100" /> </g> </svg>

Answer 1

您可以使用URL.createObjectURL()

 var svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1500" height="1500" viewBox="0 0 1500 1500" xml:space="preserve"><desc>Created with Fabric.js 3.6.3</desc><defs></defs><g transform="matrix(1 0 0 1 25.5 300.5)" ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;" x="-25" y="-150" rx="0" ry="0" width="50" height="300" /></g><g transform="matrix(1 0 0 1 50.5 50.5)" ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;" x="-50" y="-50" rx="0" ry="0" width="100" height="100" /></g><g transform="matrix(1 0 0 1 950.5 25.5)" ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;" x="-550" y="-25" rx="0" ry="0" width="1100" height="50" /></g><g transform="matrix(1 0 0 1 350.5 250.5)" ><circle style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;" cx="0" cy="0" r="50" /></g><g transform="matrix(1 0 0 1 700.5 1050.5)" ><rect style="stroke: rgb(0,0,0); stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,91,109); fill-rule: nonzero; opacity: 1;" x="-50" y="-50" rx="0" ry="0" width="100" height="100" /></g></svg>`; // convert svg to blob url var url = URL.createObjectURL(new Blob([svg], {type:"image/svg+xml;charset=utf-8"})); // add the url to the a.href document.querySelector('#download').href = url;

 <a id="download" download="mysvg.svg">download svg</a>