将画布或控制点转换为 SVG答案

【问题标题】：Convert canvas or control points to SVG将画布或控制点转换为 SVG
【发布时间】：2011-10-18 14:47:33
【问题描述】：

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

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

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

我了解，可以使用 Javascript 生成 SVG 文件，例如：

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

但我认为这不是好方法。

你有什么建议吗？

【问题讨论】：

这会相当复杂。你说得对，toDataURL('image/svg+xml') 不起作用。据我记得，它从未在任何浏览器中出现过。您的绘图应用程序有哪些功能？如果是简单的形状，那么您可以将它们转换为 SVG <path>。如果您支持渐变、图像等，则需要将其中的每一个单独转换为 SVG 中的相应元素。
其实形式很简单，ok，我试试。但无论如何都会等待其他方式解决这个问题。

标签： javascript html canvas svg

【解决方案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 文件。谢谢大家！

【讨论】：

这将如何运作？您缺少 for 循环中的开始标记。那个标签应该是什么？