Question

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

canvasElement.toDataURL("image/svg+xml"); // -- doesn't work

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

据我所知，可以在Javascript中生成一个SVG文件，如：

var mysvg = "<svg>"; for(something) { mysvg += "something"; } //etc

但我不认为这是好方法。

你能提出什么建议吗？

Answer 1

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

类似的东西：

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>";
}

因此，在svg变量中，将会有从Canvas生成的SVG文件。谢谢大家！

Answer 2

您可以在JavaScript中生成等效的SVG 如果您想尝试，请转到http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php

您可以在jQuery SVG中生成两种类型的Raphael.js或一种类型所有3个选项都会生成一个带有JavaScript的HTML

Answer 3

也许在这个链接上：http://code.google.com/p/canvas-svg/你会找到你想要的东西。

将画布或控制点转换为SVG

3 个答案: