如何将带有css样式的内联SVG从浏览器保存/导出到图像文件
如何将带有css样式的内联SVG从浏览器保存/导出到图像文件
提问于 2013-03-03 09:26:14
我有一个网络应用程序，这是在客户机上生成内联SVG图形的基础上用户交互。图形部分由元素属性定义，部分由CSS类和id定义。
我希望能够为客户端提供一个选项，以保存内联SVG的副本为位图或.svg图像文件。从外部css样式文件应用所有样式是很重要的。我如何提供此功能以保存为.svg或位图(.gif)，最好是在浏览器中使用javascript，或者在服务器上使用node.js？
回答 2
Stack Overflow用户
发布于 2016-05-23 17:34:30
为什么不复制SVG节点/树，然后采用每个标记定义的样式(您将需要原始树，因为如果元素是较长树的一部分，则副本可能没有样式)。这可确保您仅复制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);
}Stack Overflow用户
发布于 2013-08-02 08:42:46
在保存每个SVG元素之前，您需要将计算出的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15181452
复制相关文章
相似问题