data:image 仅在我单击 URL 栏并按 Enter 时解码
data:image only decodes when I click in the URL bar and press Enter
我正在使用 mini-svg-data-uri 将 SVG 塞入 link。我的代码如下所示：
var argMap = response.svg;
// remove linebreaks and comments from inside the SVG, as these tend to break it
argMap = argMap.replace(/\r?\n|\r/g,""); // remove linebreaks
argMap = argMap.replace(/<!--[\s\S]*?-->/g, ""); // remove comments
argMap = svgToMiniDataURI(argMap);
const mapIcon = '<span class="wikiglyph wikiglyph-map" aria-hidden="true"></span>';
const mapButton = `<a href="${argMap}" target="_blank">` + mapIcon + '</a>';
当我单击 link 时，我会在新选项卡中看到此 URL。该选项卡显示灰色屏幕。
data:image/svg+xml,%3csvg width='458pt' height='229pt' viewBox='0.00 0.00 458.00 228.80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='graph0' class='graph' transform='scale(1 1) rotate(0) translate(4 224.8)'%3e%3ctitle%3eArgument Map%3c/title%3e%3cg id='clust1' class='cluster'%3e%3ctitle%3ecluster_1%3c/title%3e%3cpolygon fill='%23cccccc' stroke='%23cccccc' points='8%2c-8 8%2c-172.8 442%2c-172.8 442%2c-8 8%2c-8'/%3e%3ctext text-anchor='start' x='191.32' y='-158' font-family='arial' font-size='12.00' fill='black'%3eI am a group%3c/text%3e%3c/g%3e%3cg id='clust2' class='cluster'%3e%3ctitle%3ecluster_2%3c/title%3e%3cpolygon fill='%23cccccc' stroke='%23cccccc' points='16%2c-16 16%2c-94.4 228%2c-94.4 228%2c-16 16%2c-16'/%3e%3ctext text-anchor='start' x='78.65' y='-79.6' font-family='arial' font-size='12.00' fill='black'%3eI am a subgroup%3c/text%3e%3c/g%3e%3cg id='node1' class='node'%3e%3ctitle%3en1%3c/title%3e%3cpath fill='%2363aef2' stroke='black' d='M422%2c-64C422%2c-64 250%2c-64 250%2c-64 244%2c-64 238%2c-58 238%2c-52 238%2c-52 238%2c-36 238%2c-36 238%2c-30 244%2c-24 250%2c-24 250%2c-24 422%2c-24 422%2c-24 428%2c-24 434%2c-30 434%2c-36 434%2c-36 434%2c-52 434%2c-52 434%2c-58 428%2c-64 422%2c-64'/%3e%3ctext text-anchor='start' x='310.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3eargument 1%3c/text%3e%3ctext text-anchor='start' x='260.14' y='-33' font-family='arial' font-size='10.00' fill='black'%3eI am an attacking argument. %23tag2%3c/text%3e%3c/g%3e%3cg id='node4' class='node'%3e%3ctitle%3en0%3c/title%3e%3cpath fill='white' stroke='%2363aef2' stroke-width='2' d='M315%2c-220.8C315%2c-220.8 143%2c-220.8 143%2c-220.8 137%2c-220.8 131%2c-214.8 131%2c-208.8 131%2c-208.8 131%2c-192.8 131%2c-192.8 131%2c-186.8 137%2c-180.8 143%2c-180.8 143%2c-180.8 315%2c-180.8 315%2c-180.8 321%2c-180.8 327%2c-186.8 327%2c-192.8 327%2c-192.8 327%2c-208.8 327%2c-208.8 327%2c-214.8 321%2c-220.8 315%2c-220.8'/%3e%3ctext text-anchor='start' x='207.05' y='-206.8' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3estatement%3c/text%3e%3ctext text-anchor='start' x='176.48' y='-189.8' font-family='arial' font-size='10.00' fill='black'%3eI am a statement. %23tag1%3c/text%3e%3c/g%3e%3cg id='edge1' class='edge'%3e%3ctitle%3en1%26%2345%3b%26gt%3bn0%3c/title%3e%3cpath fill='none' stroke='black' d='M324.17%2c-64.01C309.2%2c-87.79 282.2%2c-129.78 251.14%2c-172.29'/%3e%3cpolygon fill='black' stroke='black' points='248.2%2c-170.38 245.09%2c-180.51 253.84%2c-174.53 248.2%2c-170.38'/%3e%3c/g%3e%3cg id='node2' class='node'%3e%3ctitle%3en2%3c/title%3e%3cpath fill='%2363aef2' stroke='black' d='M230%2c-142.4C230%2c-142.4 58%2c-142.4 58%2c-142.4 52%2c-142.4 46%2c-136.4 46%2c-130.4 46%2c-130.4 46%2c-114.4 46%2c-114.4 46%2c-108.4 52%2c-102.4 58%2c-102.4 58%2c-102.4 230%2c-102.4 230%2c-102.4 236%2c-102.4 242%2c-108.4 242%2c-114.4 242%2c-114.4 242%2c-130.4 242%2c-130.4 242%2c-136.4 236%2c-142.4 230%2c-142.4'/%3e%3ctext text-anchor='start' x='118.72' y='-128.4' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3eargument 2%3c/text%3e%3ctext text-anchor='start' x='67.59' y='-111.4' font-family='arial' font-size='10.00' fill='black'%3eI am a supporting argument. %23tag3%3c/text%3e%3c/g%3e%3cg id='edge3' class='edge'%3e%3ctitle%3en2%26%2345%3b%26gt%3bn0%3c/title%3e%3cpath fill='none' stroke='black' d='M165.45%2c-142.68C176%2c-152.16 188.86%2c-163.72 200.25%2c-173.96'/%3e%3cpolygon fill='black' stroke='black' points='198.08%2c-176.71 207.85%2c-180.79 202.75%2c-171.5 198.08%2c-176.71'/%3e%3c/g%3e%3cg id='node3' class='node'%3e%3ctitle%3en3%3c/title%3e%3cpath fill='%2363aef2' stroke='black' d='M208%2c-64C208%2c-64 36%2c-64 36%2c-64 30%2c-64 24%2c-58 24%2c-52 24%2c-52 24%2c-36 24%2c-36 24%2c-30 30%2c-24 36%2c-24 36%2c-24 208%2c-24 208%2c-24 214%2c-24 220%2c-30 220%2c-36 220%2c-36 220%2c-52 220%2c-52 220%2c-58 214%2c-64 208%2c-64'/%3e%3ctext text-anchor='start' x='96.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3eargument 3%3c/text%3e%3ctext text-anchor='start' x='46.7' y='-33' font-family='arial' font-size='10.00' fill='black'%3eI am an undercut argument. %23tag4%3c/text%3e%3c/g%3e%3cg id='edge2' class='edge'%3e%3ctitle%3en3%26%2345%3b%26gt%3bn2%3c/title%3e%3cpath fill='none' stroke='black' d='M127.55%2c-64.28C130.02%2c-72.85 132.98%2c-83.12 135.7%2c-92.57'/%3e%3cpolygon fill='black' stroke='black' points='132.4%2c-93.75 138.53%2c-102.39 139.12%2c-91.81 132.4%2c-93.75'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e
当我点击URL并回车时，它转换成这样，出现图像：
data:image/svg+xml,<svg width='458pt' height='229pt' viewBox='0.00 0.00 458.00 228.80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='graph0' class='graph' transform='scale(1 1) rotate(0) translate(4 224.8)'><title>Argument Map</title><g id='clust1' class='cluster'><title>cluster_1</title><polygon fill='%23cccccc' stroke='%23cccccc' points='8%2c-8 8%2c-172.8 442%2c-172.8 442%2c-8 8%2c-8'/><text text-anchor='start' x='191.32' y='-158' font-family='arial' font-size='12.00' fill='black'>I am a group</text></g><g id='clust2' class='cluster'><title>cluster_2</title><polygon fill='%23cccccc' stroke='%23cccccc' points='16%2c-16 16%2c-94.4 228%2c-94.4 228%2c-16 16%2c-16'/><text text-anchor='start' x='78.65' y='-79.6' font-family='arial' font-size='12.00' fill='black'>I am a subgroup</text></g><g id='node1' class='node'><title>n1</title><path fill='%2363aef2' stroke='black' d='M422%2c-64C422%2c-64 250%2c-64 250%2c-64 244%2c-64 238%2c-58 238%2c-52 238%2c-52 238%2c-36 238%2c-36 238%2c-30 244%2c-24 250%2c-24 250%2c-24 422%2c-24 422%2c-24 428%2c-24 434%2c-30 434%2c-36 434%2c-36 434%2c-52 434%2c-52 434%2c-58 428%2c-64 422%2c-64'/><text text-anchor='start' x='310.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>argument 1</text><text text-anchor='start' x='260.14' y='-33' font-family='arial' font-size='10.00' fill='black'>I am an attacking argument. %23tag2</text></g><g id='node4' class='node'><title>n0</title><path fill='white' stroke='%2363aef2' stroke-width='2' d='M315%2c-220.8C315%2c-220.8 143%2c-220.8 143%2c-220.8 137%2c-220.8 131%2c-214.8 131%2c-208.8 131%2c-208.8 131%2c-192.8 131%2c-192.8 131%2c-186.8 137%2c-180.8 143%2c-180.8 143%2c-180.8 315%2c-180.8 315%2c-180.8 321%2c-180.8 327%2c-186.8 327%2c-192.8 327%2c-192.8 327%2c-208.8 327%2c-208.8 327%2c-214.8 321%2c-220.8 315%2c-220.8'/><text text-anchor='start' x='207.05' y='-206.8' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>statement</text><text text-anchor='start' x='176.48' y='-189.8' font-family='arial' font-size='10.00' fill='black'>I am a statement. %23tag1</text></g><g id='edge1' class='edge'><title>n1%26%2345%3b%26gt%3bn0</title><path fill='none' stroke='black' d='M324.17%2c-64.01C309.2%2c-87.79 282.2%2c-129.78 251.14%2c-172.29'/><polygon fill='black' stroke='black' points='248.2%2c-170.38 245.09%2c-180.51 253.84%2c-174.53 248.2%2c-170.38'/></g><g id='node2' class='node'><title>n2</title><path fill='%2363aef2' stroke='black' d='M230%2c-142.4C230%2c-142.4 58%2c-142.4 58%2c-142.4 52%2c-142.4 46%2c-136.4 46%2c-130.4 46%2c-130.4 46%2c-114.4 46%2c-114.4 46%2c-108.4 52%2c-102.4 58%2c-102.4 58%2c-102.4 230%2c-102.4 230%2c-102.4 236%2c-102.4 242%2c-108.4 242%2c-114.4 242%2c-114.4 242%2c-130.4 242%2c-130.4 242%2c-136.4 236%2c-142.4 230%2c-142.4'/><text text-anchor='start' x='118.72' y='-128.4' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>argument 2</text><text text-anchor='start' x='67.59' y='-111.4' font-family='arial' font-size='10.00' fill='black'>I am a supporting argument. %23tag3</text></g><g id='edge3' class='edge'><title>n2%26%2345%3b%26gt%3bn0</title><path fill='none' stroke='black' d='M165.45%2c-142.68C176%2c-152.16 188.86%2c-163.72 200.25%2c-173.96'/><polygon fill='black' stroke='black' points='198.08%2c-176.71 207.85%2c-180.79 202.75%2c-171.5 198.08%2c-176.71'/></g><g id='node3' class='node'><title>n3</title><path fill='%2363aef2' stroke='black' d='M208%2c-64C208%2c-64 36%2c-64 36%2c-64 30%2c-64 24%2c-58 24%2c-52 24%2c-52 24%2c-36 24%2c-36 24%2c-30 30%2c-24 36%2c-24 36%2c-24 208%2c-24 208%2c-24 214%2c-24 220%2c-30 220%2c-36 220%2c-36 220%2c-52 220%2c-52 220%2c-58 214%2c-64 208%2c-64'/><text text-anchor='start' x='96.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>argument 3</text><text text-anchor='start' x='46.7' y='-33' font-family='arial' font-size='10.00' fill='black'>I am an undercut argument. %23tag4</text></g><g id='edge2' class='edge'><title>n3%26%2345%3b%26gt%3bn2</title><path fill='none' stroke='black' d='M127.55%2c-64.28C130.02%2c-72.85 132.98%2c-83.12 135.7%2c-92.57'/><polygon fill='black' stroke='black' points='132.4%2c-93.75 138.53%2c-102.39 139.12%2c-91.81 132.4%2c-93.75'/></g></g></svg>
这是为什么？如何在不按 URL 栏中的 Enter 键的情况下完成这项工作？
出于安全原因，浏览器不再允许链接导航到数据 URLs:
- https://developers.google.com/web/updates/2017/06/chrome-60-deprecations#remove_content-initiated_top_frame_navigations_to_data_urls
- https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-59/
因此，虽然 mini-svg-data-uri 非常适合在 CSS 等中包含 SVG，但我们需要另一种解决方案来链接到 SVG 文档。例如，我们可以使用 window.URL.createObjectURL() 为我们的 SVG 创建一个临时的 URL：
var argMap = response.svg;
var blob = new Blob([argMap], { type: "image/svg+xml" }),
url = window.URL.createObjectURL(blob);
const mapIcon = '<span class="wikiglyph wikiglyph-map" aria-hidden="true"></span>';
const mapButton = `<a href="${url}" target="_blank">` + mapIcon + '</a>';
其他解决方案：
我正在使用 mini-svg-data-uri 将 SVG 塞入 link。我的代码如下所示：
var argMap = response.svg;
// remove linebreaks and comments from inside the SVG, as these tend to break it
argMap = argMap.replace(/\r?\n|\r/g,""); // remove linebreaks
argMap = argMap.replace(/<!--[\s\S]*?-->/g, ""); // remove comments
argMap = svgToMiniDataURI(argMap);
const mapIcon = '<span class="wikiglyph wikiglyph-map" aria-hidden="true"></span>';
const mapButton = `<a href="${argMap}" target="_blank">` + mapIcon + '</a>';
当我单击 link 时，我会在新选项卡中看到此 URL。该选项卡显示灰色屏幕。
data:image/svg+xml,%3csvg width='458pt' height='229pt' viewBox='0.00 0.00 458.00 228.80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg id='graph0' class='graph' transform='scale(1 1) rotate(0) translate(4 224.8)'%3e%3ctitle%3eArgument Map%3c/title%3e%3cg id='clust1' class='cluster'%3e%3ctitle%3ecluster_1%3c/title%3e%3cpolygon fill='%23cccccc' stroke='%23cccccc' points='8%2c-8 8%2c-172.8 442%2c-172.8 442%2c-8 8%2c-8'/%3e%3ctext text-anchor='start' x='191.32' y='-158' font-family='arial' font-size='12.00' fill='black'%3eI am a group%3c/text%3e%3c/g%3e%3cg id='clust2' class='cluster'%3e%3ctitle%3ecluster_2%3c/title%3e%3cpolygon fill='%23cccccc' stroke='%23cccccc' points='16%2c-16 16%2c-94.4 228%2c-94.4 228%2c-16 16%2c-16'/%3e%3ctext text-anchor='start' x='78.65' y='-79.6' font-family='arial' font-size='12.00' fill='black'%3eI am a subgroup%3c/text%3e%3c/g%3e%3cg id='node1' class='node'%3e%3ctitle%3en1%3c/title%3e%3cpath fill='%2363aef2' stroke='black' d='M422%2c-64C422%2c-64 250%2c-64 250%2c-64 244%2c-64 238%2c-58 238%2c-52 238%2c-52 238%2c-36 238%2c-36 238%2c-30 244%2c-24 250%2c-24 250%2c-24 422%2c-24 422%2c-24 428%2c-24 434%2c-30 434%2c-36 434%2c-36 434%2c-52 434%2c-52 434%2c-58 428%2c-64 422%2c-64'/%3e%3ctext text-anchor='start' x='310.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3eargument 1%3c/text%3e%3ctext text-anchor='start' x='260.14' y='-33' font-family='arial' font-size='10.00' fill='black'%3eI am an attacking argument. %23tag2%3c/text%3e%3c/g%3e%3cg id='node4' class='node'%3e%3ctitle%3en0%3c/title%3e%3cpath fill='white' stroke='%2363aef2' stroke-width='2' d='M315%2c-220.8C315%2c-220.8 143%2c-220.8 143%2c-220.8 137%2c-220.8 131%2c-214.8 131%2c-208.8 131%2c-208.8 131%2c-192.8 131%2c-192.8 131%2c-186.8 137%2c-180.8 143%2c-180.8 143%2c-180.8 315%2c-180.8 315%2c-180.8 321%2c-180.8 327%2c-186.8 327%2c-192.8 327%2c-192.8 327%2c-208.8 327%2c-208.8 327%2c-214.8 321%2c-220.8 315%2c-220.8'/%3e%3ctext text-anchor='start' x='207.05' y='-206.8' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3estatement%3c/text%3e%3ctext text-anchor='start' x='176.48' y='-189.8' font-family='arial' font-size='10.00' fill='black'%3eI am a statement. %23tag1%3c/text%3e%3c/g%3e%3cg id='edge1' class='edge'%3e%3ctitle%3en1%26%2345%3b%26gt%3bn0%3c/title%3e%3cpath fill='none' stroke='black' d='M324.17%2c-64.01C309.2%2c-87.79 282.2%2c-129.78 251.14%2c-172.29'/%3e%3cpolygon fill='black' stroke='black' points='248.2%2c-170.38 245.09%2c-180.51 253.84%2c-174.53 248.2%2c-170.38'/%3e%3c/g%3e%3cg id='node2' class='node'%3e%3ctitle%3en2%3c/title%3e%3cpath fill='%2363aef2' stroke='black' d='M230%2c-142.4C230%2c-142.4 58%2c-142.4 58%2c-142.4 52%2c-142.4 46%2c-136.4 46%2c-130.4 46%2c-130.4 46%2c-114.4 46%2c-114.4 46%2c-108.4 52%2c-102.4 58%2c-102.4 58%2c-102.4 230%2c-102.4 230%2c-102.4 236%2c-102.4 242%2c-108.4 242%2c-114.4 242%2c-114.4 242%2c-130.4 242%2c-130.4 242%2c-136.4 236%2c-142.4 230%2c-142.4'/%3e%3ctext text-anchor='start' x='118.72' y='-128.4' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3eargument 2%3c/text%3e%3ctext text-anchor='start' x='67.59' y='-111.4' font-family='arial' font-size='10.00' fill='black'%3eI am a supporting argument. %23tag3%3c/text%3e%3c/g%3e%3cg id='edge3' class='edge'%3e%3ctitle%3en2%26%2345%3b%26gt%3bn0%3c/title%3e%3cpath fill='none' stroke='black' d='M165.45%2c-142.68C176%2c-152.16 188.86%2c-163.72 200.25%2c-173.96'/%3e%3cpolygon fill='black' stroke='black' points='198.08%2c-176.71 207.85%2c-180.79 202.75%2c-171.5 198.08%2c-176.71'/%3e%3c/g%3e%3cg id='node3' class='node'%3e%3ctitle%3en3%3c/title%3e%3cpath fill='%2363aef2' stroke='black' d='M208%2c-64C208%2c-64 36%2c-64 36%2c-64 30%2c-64 24%2c-58 24%2c-52 24%2c-52 24%2c-36 24%2c-36 24%2c-30 30%2c-24 36%2c-24 36%2c-24 208%2c-24 208%2c-24 214%2c-24 220%2c-30 220%2c-36 220%2c-36 220%2c-52 220%2c-52 220%2c-58 214%2c-64 208%2c-64'/%3e%3ctext text-anchor='start' x='96.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'%3eargument 3%3c/text%3e%3ctext text-anchor='start' x='46.7' y='-33' font-family='arial' font-size='10.00' fill='black'%3eI am an undercut argument. %23tag4%3c/text%3e%3c/g%3e%3cg id='edge2' class='edge'%3e%3ctitle%3en3%26%2345%3b%26gt%3bn2%3c/title%3e%3cpath fill='none' stroke='black' d='M127.55%2c-64.28C130.02%2c-72.85 132.98%2c-83.12 135.7%2c-92.57'/%3e%3cpolygon fill='black' stroke='black' points='132.4%2c-93.75 138.53%2c-102.39 139.12%2c-91.81 132.4%2c-93.75'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e
当我点击URL并回车时，它转换成这样，出现图像：
data:image/svg+xml,<svg width='458pt' height='229pt' viewBox='0.00 0.00 458.00 228.80' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='graph0' class='graph' transform='scale(1 1) rotate(0) translate(4 224.8)'><title>Argument Map</title><g id='clust1' class='cluster'><title>cluster_1</title><polygon fill='%23cccccc' stroke='%23cccccc' points='8%2c-8 8%2c-172.8 442%2c-172.8 442%2c-8 8%2c-8'/><text text-anchor='start' x='191.32' y='-158' font-family='arial' font-size='12.00' fill='black'>I am a group</text></g><g id='clust2' class='cluster'><title>cluster_2</title><polygon fill='%23cccccc' stroke='%23cccccc' points='16%2c-16 16%2c-94.4 228%2c-94.4 228%2c-16 16%2c-16'/><text text-anchor='start' x='78.65' y='-79.6' font-family='arial' font-size='12.00' fill='black'>I am a subgroup</text></g><g id='node1' class='node'><title>n1</title><path fill='%2363aef2' stroke='black' d='M422%2c-64C422%2c-64 250%2c-64 250%2c-64 244%2c-64 238%2c-58 238%2c-52 238%2c-52 238%2c-36 238%2c-36 238%2c-30 244%2c-24 250%2c-24 250%2c-24 422%2c-24 422%2c-24 428%2c-24 434%2c-30 434%2c-36 434%2c-36 434%2c-52 434%2c-52 434%2c-58 428%2c-64 422%2c-64'/><text text-anchor='start' x='310.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>argument 1</text><text text-anchor='start' x='260.14' y='-33' font-family='arial' font-size='10.00' fill='black'>I am an attacking argument. %23tag2</text></g><g id='node4' class='node'><title>n0</title><path fill='white' stroke='%2363aef2' stroke-width='2' d='M315%2c-220.8C315%2c-220.8 143%2c-220.8 143%2c-220.8 137%2c-220.8 131%2c-214.8 131%2c-208.8 131%2c-208.8 131%2c-192.8 131%2c-192.8 131%2c-186.8 137%2c-180.8 143%2c-180.8 143%2c-180.8 315%2c-180.8 315%2c-180.8 321%2c-180.8 327%2c-186.8 327%2c-192.8 327%2c-192.8 327%2c-208.8 327%2c-208.8 327%2c-214.8 321%2c-220.8 315%2c-220.8'/><text text-anchor='start' x='207.05' y='-206.8' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>statement</text><text text-anchor='start' x='176.48' y='-189.8' font-family='arial' font-size='10.00' fill='black'>I am a statement. %23tag1</text></g><g id='edge1' class='edge'><title>n1%26%2345%3b%26gt%3bn0</title><path fill='none' stroke='black' d='M324.17%2c-64.01C309.2%2c-87.79 282.2%2c-129.78 251.14%2c-172.29'/><polygon fill='black' stroke='black' points='248.2%2c-170.38 245.09%2c-180.51 253.84%2c-174.53 248.2%2c-170.38'/></g><g id='node2' class='node'><title>n2</title><path fill='%2363aef2' stroke='black' d='M230%2c-142.4C230%2c-142.4 58%2c-142.4 58%2c-142.4 52%2c-142.4 46%2c-136.4 46%2c-130.4 46%2c-130.4 46%2c-114.4 46%2c-114.4 46%2c-108.4 52%2c-102.4 58%2c-102.4 58%2c-102.4 230%2c-102.4 230%2c-102.4 236%2c-102.4 242%2c-108.4 242%2c-114.4 242%2c-114.4 242%2c-130.4 242%2c-130.4 242%2c-136.4 236%2c-142.4 230%2c-142.4'/><text text-anchor='start' x='118.72' y='-128.4' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>argument 2</text><text text-anchor='start' x='67.59' y='-111.4' font-family='arial' font-size='10.00' fill='black'>I am a supporting argument. %23tag3</text></g><g id='edge3' class='edge'><title>n2%26%2345%3b%26gt%3bn0</title><path fill='none' stroke='black' d='M165.45%2c-142.68C176%2c-152.16 188.86%2c-163.72 200.25%2c-173.96'/><polygon fill='black' stroke='black' points='198.08%2c-176.71 207.85%2c-180.79 202.75%2c-171.5 198.08%2c-176.71'/></g><g id='node3' class='node'><title>n3</title><path fill='%2363aef2' stroke='black' d='M208%2c-64C208%2c-64 36%2c-64 36%2c-64 30%2c-64 24%2c-58 24%2c-52 24%2c-52 24%2c-36 24%2c-36 24%2c-30 30%2c-24 36%2c-24 36%2c-24 208%2c-24 208%2c-24 214%2c-24 220%2c-30 220%2c-36 220%2c-36 220%2c-52 220%2c-52 220%2c-58 214%2c-64 208%2c-64'/><text text-anchor='start' x='96.72' y='-50' font-family='arial' font-weight='bold' font-size='10.00' fill='black'>argument 3</text><text text-anchor='start' x='46.7' y='-33' font-family='arial' font-size='10.00' fill='black'>I am an undercut argument. %23tag4</text></g><g id='edge2' class='edge'><title>n3%26%2345%3b%26gt%3bn2</title><path fill='none' stroke='black' d='M127.55%2c-64.28C130.02%2c-72.85 132.98%2c-83.12 135.7%2c-92.57'/><polygon fill='black' stroke='black' points='132.4%2c-93.75 138.53%2c-102.39 139.12%2c-91.81 132.4%2c-93.75'/></g></g></svg>
这是为什么？如何在不按 URL 栏中的 Enter 键的情况下完成这项工作？
出于安全原因，浏览器不再允许链接导航到数据 URLs:
- https://developers.google.com/web/updates/2017/06/chrome-60-deprecations#remove_content-initiated_top_frame_navigations_to_data_urls
- https://blog.mozilla.org/security/2017/11/27/blocking-top-level-navigations-data-urls-firefox-59/
因此，虽然 mini-svg-data-uri 非常适合在 CSS 等中包含 SVG，但我们需要另一种解决方案来链接到 SVG 文档。例如，我们可以使用 window.URL.createObjectURL() 为我们的 SVG 创建一个临时的 URL：
var argMap = response.svg;
var blob = new Blob([argMap], { type: "image/svg+xml" }),
url = window.URL.createObjectURL(blob);
const mapIcon = '<span class="wikiglyph wikiglyph-map" aria-hidden="true"></span>';
const mapButton = `<a href="${url}" target="_blank">` + mapIcon + '</a>';
其他解决方案：