d3导出svg图片

最新推荐文章于 2024-08-01 00:26:34 发布

郭不耐

最新推荐文章于 2024-08-01 00:26:34 发布

阅读量5.8k

点赞数

分类专栏： d3.js javascript

本文链接：https://blog.csdn.net/guoweish/article/details/53106898

版权

这篇博客介绍了如何利用d3.js库将SVG元素转换为图片并下载。首先，创建SVG头信息，然后选择SVG元素，设置xmlns属性。接着，获取SVG的源代码，并添加到一个a标签中，设置下载属性为SVG编码后的数据URL，用户点击即可下载SVG图片。

摘要由CSDN通过智能技术生成

  svg必需放在一个div容器里 

var svgHeadInfo = '<?xml version="1.0" encoding="UTF-8"?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"\n"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">';
            var svg = $('#vizContainer').find('svg')[0];
            svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");

            var svgSource = d3.select("svg")
                .attr("version", 1.1)
                .attr("xmlns", "http://www.w3.org/2000/svg")
                .node().parentNode.innerHTML;

            d3.select("body").append("a")
                .attr