将SVG转换成图片，在线等，急急急

[Nullo_o]

.Net 如何将SVG转换成图片，保存到指定路径
我是用highchart统计图的时候遇到的问题， 我已经的到了每张统计图图片的SVG 问题是如何将SVG转换成图片，在线等

下面提供一个SVG：
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="highcharts-root" style="font-family:"lucida grande", "lucida sans unicode", arial, helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="980" height="270" viewBox="0 0 980 270"><desc>Created with Highcharts 5.0.12</desc><defs><clipPath id="highcharts-6b44ef2-58"><rect x="0" y="0" width="810" height="179" fill="none"></rect></clipPath></defs><rect fill="#ffffff" class="highcharts-background" x="0" y="0" width="980" height="270" rx="0" ry="0"></rect><rect fill="none" class="highcharts-plot-background" x="70" y="21" width="810" height="179"></rect><g class="highcharts-label highcharts-no-data" transform="translate(446,100)"><text x="3" style="font-size:12px;font-weight:bold;color:#666666;fill:#666666;" y="15">没有数据</text></g><g class="highcharts-grid highcharts-xaxis-grid "></g><g class="highcharts-grid highcharts-yaxis-grid "><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 0 0" opacity="1"></path></g><g class="highcharts-grid highcharts-yaxis-grid "><path fill="none" stroke="#e6e6e6" stroke-width="1" class="highcharts-grid-line" d="M 0 0" opacity="1"></path></g><rect fill="none" class="highcharts-plot-border" x="70" y="21" width="810" height="179"></rect><g class="highcharts-axis highcharts-xaxis "><path fill="none" class="highcharts-axis-line" stroke="#ccd6eb" stroke-width="1" d="M 70 200.5 L 880 200.5"></path></g><g class="highcharts-axis highcharts-yaxis "><path fill="none" class="highcharts-axis-line" d="M 70 21 L 70 200"></path></g><g class="highcharts-axis highcharts-yaxis "><path fill="none" class="highcharts-axis-line" d="M 880 21 L 880 200"></path></g><g class="highcharts-series-group"><g class="highcharts-series highcharts-series-0 highcharts-column-series highcharts-color-0 " transform="translate(70,21) scale(1 1)" clip-path="url(#highcharts-6b44ef2-58)"></g><g class="highcharts-markers highcharts-series-0 highcharts-column-series highcharts-color-0 " transform="translate(70,21) scale(1 1)" clip-path="none"></g><g class="highcharts-series highcharts-series-1 highcharts-column-series highcharts-color-1 " transform="translate(70,21) scale(1 1)" clip-path="url(#highcharts-6b44ef2-58)"></g><g class="highcharts-markers highcharts-series-1 highcharts-column-series highcharts-color-1 " transform="translate(70,21) scale(1 1)" clip-path="none"></g><g class="highcharts-series highcharts-series-2 highcharts-column-series highcharts-color-2 " transform="translate(70,21) scale(1 1)" clip-path="url(#highcharts-6b44ef2-58)"></g><g class="highcharts-markers highcharts-series-2 highcharts-column-series highcharts-color-2 " transform="translate(70,21) scale(1 1)" clip-path="none"></g><g class="highcharts-series highcharts-series-3 highcharts-spline-series highcharts-color-3 " transform="translate(70,21) scale(1 1)" clip-path="url(#highcharts-6b44ef2-58)"></g><g class="highcharts-markers highcharts-series-3 highcharts-spline-series highcharts-color-3 " transform="translate(70,21) scale(1 1)" clip-path="none"></g></g><g class="highcharts-legend" transform="translate(218,228)"><rect fill="#FFFFFF" class="highcharts-legend-box" rx="0" ry="0" x="0" y="0" width="544" height="27" visibility="visible"></rect><g><g><g class="highcharts-legend-item highcharts-column-series highcharts-color-0 highcharts-series-0" transform="translate(8,3)"><text x="21" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start" y="15"><tspan>股票净占比</tspan></text><rect x="2" y="4" width="12" height="12" fill="#7cb5ec" rx="6" ry="6" class="highcharts-point"></rect></g><g class="highcharts-legend-item highcharts-column-series highcharts-color-1 highcharts-series-1" transform="translate(164,3)"><text x="21" y="15" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"><tspan>期货净占比</tspan></text><rect x="2" y="4" width="12" height="12" fill="#434348" rx="6" ry="6" class="highcharts-point"></rect></g><g class="highcharts-legend-item highcharts-column-series highcharts-color-2 highcharts-series-2" transform="translate(320,3)"><text x="21" y="15" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"><tspan>现金净占比</tspan></text><rect x="2" y="4" width="12" height="12" fill="#90ed7d" rx="6" ry="6" class="highcharts-point"></rect></g><g class="highcharts-legend-item highcharts-spline-series highcharts-color-3 highcharts-series-3" transform="translate(476,3)"><path fill="none" d="M 0 11 L 16 11" class="highcharts-graph" stroke="#f7a35c" stroke-width="2"></path><path fill="#f7a35c" d="M 12 11 A 4 4 0 1 1 11.999998000000167 10.996000000666664 Z" class="highcharts-point"></path><text x="21" y="15" style="color:#333333;font-size:12px;font-weight:bold;cursor:pointer;fill:#333333;" text-anchor="start"><tspan>总净值</tspan></text></g></g></g></g><g class="highcharts-axis-labels highcharts-xaxis-labels "></g><g class="highcharts-axis-labels highcharts-yaxis-labels "><text x="0" style="color:#434348;cursor:default;font-size:11px;fill:#434348;" text-anchor="end" transform="translate(0,0)" y="-9999"><tspan>NaN ￥</tspan></text></g><g class="highcharts-axis-labels highcharts-yaxis-labels "><text x="0" style="color:#7cb5ec;cursor:default;font-size:11px;fill:#7cb5ec;" text-anchor="start" transform="translate(0,0)" y="-9999"><tspan>NaN %</tspan></text></g></svg>

[csdnFUCKINGSUCKS]

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <svg>你的SVG</svg>
    </div>
    <button id="export">Export</button>
    <script>
        $('#export').click(function () {
            var svgXml = $('.container').html();

            var image = new Image();
            image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流

            var canvas = document.createElement('canvas');  //准备空画布
            canvas.width = $('.container svg').width();
            canvas.height = $('.container svg').height();

            var context = canvas.getContext('2d');  //取得画布的2d绘图上下文
            context.drawImage(image, 0, 0);

            var a = document.createElement('a');
            a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
            a.download = "MapByMathArtSys.png";  //设定下载名称
            a.click(); //点击触发下载
        });
    </script>
</body>
</html>

[CPU不够了]

引用 1 楼 ducker3590 的回复:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <svg>你的SVG</svg>
    </div>
    <button id="export">Export</button>
    <script>
        $('#export').click(function () {
            var svgXml = $('.container').html();

            var image = new Image();
            image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流

            var canvas = document.createElement('canvas');  //准备空画布
            canvas.width = $('.container svg').width();
            canvas.height = $('.container svg').height();

            var context = canvas.getContext('2d');  //取得画布的2d绘图上下文
            context.drawImage(image, 0, 0);

            var a = document.createElement('a');
            a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
            a.download = "MapByMathArtSys.png";  //设定下载名称
            a.click(); //点击触发下载
        });
    </script>
</body>
</html>

6666 厉害了我的哥

[Nullo_o]

引用 1 楼 ducker3590 的回复:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <svg>你的SVG</svg>
    </div>
    <button id="export">Export</button>
    <script>
        $('#export').click(function () {
            var svgXml = $('.container').html();

            var image = new Image();
            image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); //给图片对象写入base64编码的svg流

            var canvas = document.createElement('canvas');  //准备空画布
            canvas.width = $('.container svg').width();
            canvas.height = $('.container svg').height();

            var context = canvas.getContext('2d');  //取得画布的2d绘图上下文
            context.drawImage(image, 0, 0);

            var a = document.createElement('a');
            a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
            a.download = "MapByMathArtSys.png";  //设定下载名称
            a.click(); //点击触发下载
        });
    </script>
</body>
</html>

我做的那个页面上有多个SVG 需要一次性全部下载指定的路径下，不知有没有办法可以做到？

[csdnFUCKINGSUCKS]

多个svg可以同时下载 但是指定路径不可以 因为是自动下载 不是生成a标签在页面上(这样可以通过右键另存外保存, 而且网上点击直接下载的链接你应该没见过直接就下载到你的E盘啊 U盘这种情况吧)

$('#export').click(function () {
    var svgs = $('svg');

    $.each(svgs, function (i, e) {

        var svgXml = $(e).prop("outerHTML");

        var image = new Image();
        //给图片对象写入base64编码的svg流
        image.src = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(svgXml))); 

        var canvas = document.createElement('canvas');  //准备空画布
        canvas.width = $('.container svg').width();
        canvas.height = $('.container svg').height();

        image.onload = function () {
            var context = canvas.getContext('2d');  //取得画布的2d绘图上下文
            context.drawImage(image, 0, 0);
            var a = document.createElement('a');
            a.href = canvas.toDataURL('image/png');  //将画布内的信息导出为png图片数据
            a.download = "MapByMathArtSys.png";  //设定下载名称
            a.click(); //点击触发下载
        }
    });
});

[sinat_33649316]

highchart 有一个下载SVG的类文件 你去网上找一下，然后在jQuery中用数组获取SVG后传到后台循环下载，就可以了