Question

我有一个网络应用程序，它根据用户交互动态在客户端生成内联SVG图形。图形部分由元素属性定义，部分由CSS类和id定义。

我希望能够为客户端提供一个选项，将内联SVG的副本保存为位图或.svg图像文件。从外部CSS样式文件应用所有样式非常重要。我如何提供此功能以保存为.svg或位图（.gif），最好是在浏览器中使用javascript，或者在服务器上使用node.js？

Answer 1

为什么不复制SVG节点/树然后采用样式，作为每个标记的defiend（您将需要原始树，因为如果元素是较长树的一部分，副本可能没有样式）。这可确保您只复制CSS文件中设置的相关样式。在将包发送到blob

之前，可以轻松设置导出类型

var ContainerElements = ["svg","g"];
var RelevantStyles = {"rect":["fill","stroke","stroke-width"],"path":["fill","stroke","stroke-width"],"circle":["fill","stroke","stroke-width"],"line":["stroke","stroke-width"],"text":["fill","font-size","text-anchor"],"polygon":["stroke","fill"]};


function read_Element(ParentNode, OrigData){
    var Children = ParentNode.childNodes;
    var OrigChildDat = OrigData.childNodes;     

    for (var cd = 0; cd < Children.length; cd++){
        var Child = Children[cd];

        var TagName = Child.tagName;
        if (ContainerElements.indexOf(TagName) != -1){
            read_Element(Child, OrigChildDat[cd])
        } else if (TagName in RelevantStyles){
            var StyleDef = window.getComputedStyle(OrigChildDat[cd]);

            var StyleString = "";
            for (var st = 0; st < RelevantStyles[TagName].length; st++){
                StyleString += RelevantStyles[TagName][st] + ":" + StyleDef.getPropertyValue(RelevantStyles[TagName][st]) + "; ";
            }

            Child.setAttribute("style",StyleString);
        }
    }

}

function export_StyledSVG(SVGElem){


    var oDOM = SVGElem.cloneNode(true)
    read_Element(oDOM, SVGElem)

    var data = new XMLSerializer().serializeToString(oDOM);
    var svg = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
    var url = URL.createObjectURL(svg);

    var link = document.createElement("a");
    link.setAttribute("target","_blank");
    var Text = document.createTextNode("Export");
    link.appendChild(Text);
    link.href=url;

    document.body.appendChild(link);
}

Answer 2

在保存之前，您需要将计算出的css样式显式设置为每个SVG元素的SVG dom样式属性。这是一个例子：

<html>
    <body>
    <!-- in this example the inline svg has black backgroud-->
    <svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
        <polygon id="polygon" points="100,10 40,180 190,60 10,60 160,180" style="stroke:purple;stroke-width:5;">
    </svg>
    <style>
        /* the external svg style makes svg shape background red */
        polygon 
        {
            fill:red;
        }
    </style>
<svg id="emptysvg" xmlns="http://www.w3.org/2000/svg" version="1.1" height="2"/>
<br/>
image original:
<canvas id="canvasOriginal" height="190" width="190" ></canvas>
<br/>
image computed:
<canvas id="canvasComputed" height="190" width="190" ></canvas>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
<script src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script>
<script type="text/javascript">
var svg = $('#svg')[0];
var canvasOriginal = $('#canvasOriginal')[0];
var ctxOriginal = canvasOriginal.getContext('2d');
var canvasComputed=$('#canvasComputed')[0];
var ctxConverted=canvasComputed.getContext("2d");
// this saves the inline svg to canvas without external css
canvg('canvasOriginal', new XMLSerializer().serializeToString(svg));
// we need to calculate the difference between the empty svg and ours
var emptySvgDeclarationComputed = getComputedStyle($('#emptysvg')[0]);
function explicitlySetStyle (element) {
    var cSSStyleDeclarationComputed = getComputedStyle(element);
    var i, len, key, value;
    var computedStyleStr = "";
    for (i=0, len=cSSStyleDeclarationComputed.length; i<len; i++) {
        key=cSSStyleDeclarationComputed[i];
        value=cSSStyleDeclarationComputed.getPropertyValue(key);
        if (value!==emptySvgDeclarationComputed.getPropertyValue(key)) {
            computedStyleStr+=key+":"+value+";";
        }
    }
    element.setAttribute('style', computedStyleStr);
}
function traverse(obj){
    var tree = [];
    tree.push(obj);
    if (obj.hasChildNodes()) {
        var child = obj.firstChild;
        while (child) {
            if (child.nodeType === 1 && child.nodeName != 'SCRIPT'){
                tree.push(child);
            }
            child = child.nextSibling;
        }
    }
    return tree;
}
// hardcode computed css styles inside svg
var allElements = traverse(svg);
var i = allElements.length;
while (i--){
    explicitlySetStyle(allElements[i]);
}
// this saves the inline svg to canvas with computed styles
canvg('canvasComputed', new XMLSerializer().serializeToString(svg));
$("canvas").click(function (event) {
    Canvas2Image.saveAsPNG(event.target);
});
</script>
    </body>
</html>

Answer 3

如果您的css规则不是太复杂，您可以执行以下步骤：

读取.css文件，其中包含所有css规则。如果需要，您可以使用不同的css文件并将其放在服务器上，您只能将其用于此目的。

function readTextFile(file) {
    var rawFile = new XMLHttpRequest();
    var allText = '';
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if(rawFile.readyState === 4) {
            if(rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    };
    rawFile.send(null);
    return allText;
}

var svg_style = readTextFile(base_url + '/css/svg_sm_dashboard.css');

现在在所有svg元素上应用样式

var all_style = svg_style.replace(/\r?\n|\r/g,'').split('}');
all_style.forEach(function(el) {
    if (el.trim() != '') {
        var full_rule_string = el.split('{');
        var selector = full_rule_string[0].trim();
        var all_rule = full_rule_string[1].split(';');
        all_rule.forEach(function (elem) {
            if (elem.trim() != '') {
                var attr_value = elem.split(':');
                //d3.selectAll(selector).style(attr_value[0].trim() + '', attr_value[1].trim() + '');
                var prop = attr_value[0].trim();
                var value = attr_value[1].trim();

                d3.selectAll(selector).each(function(d, i){
                    if(!this.getAttribute(prop) && !this.style[prop]){
                        d3.select(this).style(prop + '', value + '');
                    }
                });
            }
       });
   }
});

使用canvg进行转换

$('body').after('<canvas id="sm_canvas" style="display=none;"></canvas>');
var canvas = document.getElementById('sm_canvas');
canvg(canvas, $("<div>").append($('svg').clone()).html());

从画布中获取图片

var imgData = canvas.toDataURL('image/jpeg');

Answer 4

我认为这个主题的解释通常缺少的是“.svg”文件实际上只是文本文件中的标记。

所以从dom中获取svg内容，然后用“.svg”文件名保存一个文本文件。

#> "huzef5"

例如，如果插图画家给你一个错误，例如“SVG无效，请在继续之前验证svg”。然后仔细检查下载文件的内容，并确保没有任何不必要的内容或任何内容，var text = $('#svg-container').html(); text = text.slice(text.indexOf("<svg"),indexOf("/svg>")+4); var pom = document.createElement('a'); pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); pom.setAttribute('download', "image.svg"); pom.style.display = 'none'; document.body.appendChild(pom); pom.click(); document.body.removeChild(pom);没有切掉任何重要内容。

如何保存/导出使用CSS从浏览器到图像文件样式的内联SVG

4 个答案: