キャンバスまたはコントロールポイントをSVGに変換する

私は描画アプリケーションを開発しています。今ではキャンバスまたはコントロールポイントからSVGを作成する関数を追加したいと思います。（各描画ステップのマウス座標を保存します）。キャンバスまたはコントロールポイントをSVGに変換する

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

1つの条件 - 外部ライブラリを使用しないでください。

私はのようにJavaScriptでSVGファイルを生成することが可能であることを、理解：

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

しかし、私はそれは良い方法であるとは思いません。

何かアドバイスできますか？

出典

2011-08-02 Oleg Berman

これはかなり複雑です。 'toDataURL（ 'image/svg + xml'）'は動作しません。私が覚えている限り、それはどんなブラウザでも決してしなかった。あなたの描画アプリはどのような機能を持っていますか？シンプルな形ならば、それらをSVG ''に翻訳することができます。グラデーションやイメージなどをサポートしている場合は、それらをそれぞれ個別にSVGの対応する要素に変換する必要があります。 – kangax

実際にはフォームarntシンプル、オク、私はしようとします。しかし、とにかくこのトラブルを解決する別の方法を待つでしょう。 –

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