将画布或控制点转换为SVG

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

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

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

我明白了，这有可能产生在Javascript中的SVG文件，如：

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

但我不认为这是很好的方式。

你能提供任何建议吗？

来源

2011-08-02 Oleg Berman

这会相当复杂。你说得对，'toDataURL（'image/svg + xml'）'不起作用。据我所知，它从未在任何浏览器中做过。你的绘图应用程序有什么样的功能？如果它是简单的形状，那么你可以将它们翻译成SVG''。如果您支持渐变，图像等，则需要将其中的每一个分别转换为SVG中的相应元素。 – kangax

其实形式简单，OK，我会尝试。但无论如何将等待解决这个麻烦的其他方式。 –

我通过生成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变量将有来自帆布生成的SVG文件。谢谢大家！

来源

2011-08-04 09:46:31

这将如何工作？您在for循环中缺少开始标记。那标签应该是什么？ <路径或<线？ – DiegoSalazar