如何保存/导出联SVG风格与CSS从浏览器中的图像文件 [英] how to save/ export inline SVG styled with css from browser to image file
问题描述
我有一个web应用程序是在基于用户互动的动态客户端产生嵌入SVG图形。图形是由元素属性和部分由CSS类和id的部分定义。
I have a web app that is generating inline SVG graphics in the client on the fly based on user interaction. The graphic is defined partly by element attributes and partially by CSS classes and id's.
我想是能够提供客户机到联SVG的副本保存无论是作为位图或.SVG图像文件的选项。重要的是，所有样式从外部CSS样式文件应用。
我怎样才能提供此功能来保存为无论是作为使用JavaScript或者与node.js的服务器上的.svg或位图（.gif注意）preferably在浏览器中？
I would like to be able to provide an option for the client to save a copy of the inline SVG as either a bitmap or an .svg image file. It is important that all styles are applied from the external css styling files. How can I provide this functionality to save as either as .svg or bitmap (.gif) preferably in the browser using javascript or else on the server with node.js ?
推荐答案
您需要在保存之前明确设置计算的CSS样式为SVG DOM样式属性为每个SVG元素。
下面是一个例子：
You will need to explicitly set the calculated css styles as SVG dom style properties for each SVG element before saving it. Here is an example:
<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>
这篇关于如何保存/导出联SVG风格与CSS从浏览器中的图像文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
