將畫布或控制點轉換爲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