将画布或控制点转换为SVG

Question

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

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

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

我知道，可以像这样在Javascript中生成SVG文件：

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

但我不认为这是一个好方法。 你能给出一些建议吗?

- Oleg Berman

---

这会相当复杂。你说得对，toDataURL('image/svg+xml')不起作用。就我记得的情况来看，任何浏览器都从未支持过它。你的绘图应用有什么功能？如果只是简单的形状，你可以将其转换为SVG的<path>元素。如果你支持渐变、图片等功能，你需要将每个功能分别转换为SVG中相应的元素。 - kangax

其实这个表单不简单，好吧，我会尝试。但无论如何，我会等待其他解决这个问题的方法。 - Oleg Berman

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文件。谢谢大家！

- Oleg Berman

---

这该怎么工作？你的for循环缺少起始标签。那个标签应该是<path 还是<line？ - DiegoSalazar