将画布或控制点转换为SVG [英] Convert canvas or control points to SVG

问题描述

我开发一个绘图应用程序，现在我想添加函数，它从我的画布或控制点创建SVG。 （我保存鼠标坐标每个绘制步骤）。

  canvasElement.toDataURL（image / svg + xml）; //  -  does not work 
  

一个条件 - 不使用外部库。

我知道，可以在Javascript中生成SVG文件，如下所示：

  var mysvg = < svg>; for（something）{mysvg + =something; } // etc 
  

但我不认为这是好方法。

$

解决方案

我通过生成SVG文件解决了这个问题。我将所有的画布绘制函数翻译成了SVG绘图标签。

类似的东西：

 code> function exportSVG（）{
 var svg ='<？xml version =1.0standalone =yes？>'; 
 svg + ='<！DOCTYPE svg PUBLIC -  // W3C // DTD SVG 1.1 // ENhttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd >'; 
 svg + ='< svg width =1065pxheight =529pxxmlns =http://www.w3.org/2000/svgversion =1.1>'; 
 
 for（var i = 0; i< myPoints.length; i ++）{
 svg + =M+ myPoints.x [i] +，+ myPoints.y [ i] +。 
 svg + =L+ myPoints.x [i + 1] +，+ myPoints.y [i + 1]; 
 svg + ='fill =nonestroke =rgb（'+ color +'）stroke-opacity ='+ opacity +'stroke-width ='+ size +'pxstroke-linecap = roundstroke-linejoin =round/>'; 
} 
 svg + =< / svg>; 
} 
  
 
 
 
因此，在svg变量中会有从Canvas生成的SVG文件。
感谢大家！
 
I develop a drawing app, and now I want to add function, which creates SVG from my canvas or control points. (I save mouse coordinates each drawing step).
canvasElement.toDataURL("image/svg+xml"); // -- doesnt work
One condition - dont use external libs.

I understand, that it is possible to generate SVG file in Javascript like:
var mysvg = "<svg>"; for(something) { mysvg += "something"; } //etc
But I don't think that it is good way.

May be you can advice anything?
解决方案
I solved the problem by generating SVG file. I translated all my canvas drawing functions into SVG drawing tags.

Something like that:
function exportSVG() {
    var svg = '<?xml version="1.0" standalone="yes"?>';
svg += '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">';
svg += '<svg width="1065px" height="529px" xmlns="http://www.w3.org/2000/svg" version="1.1">';

for(var i=0; i<myPoints.length; i++) {
   svg += "M"+myPoints.x[i]+","+myPoints.y[i]+" ";
   svg += "L"+myPoints.x[i+1]+","+myPoints.y[i+1];
   svg += '" fill="none" stroke="rgb('+color+')" stroke-opacity="'+opacity+'" stroke-width="'+size+'px" stroke-linecap="round" stroke-linejoin="round" />';
}
svg += "</svg>";
}
So, in svg variable there will be SVG file generated from Canvas.
Thanks everybody! 

                        
这篇关于将画布或控制点转换为SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！