Конвертировать холст или контрольные точки в SVG

Question

Я занимаюсь разработкой приложения для рисования и теперь хочу добавить функцию, которая создает SVG из моего холста или контрольных точек. (Я сохраняю координаты мыши для каждого шага рисования).

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

Одно условие - не использовать внешние библиотеки.

Я понимаю, что можно генерировать SVG-файл в Javascript, например:

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

Но я не думаю, что это хороший способ.

Можете ли вы что-нибудь посоветовать?

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 будет файл SVG, сгенерированный из Canvas.Спасибо всем!

Answer 2

Возможно по этой ссылке: http://code.google.com/p/canvas-svg/ вы найдете то, что ищете.

Answer 3

Вы можете создать эквивалент SVG в JavaScript Если вы хотите попробовать это, перейдите на http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php

Вы можете создать 2 типа Raphael.js или один тип в jQuery SVG. Все 3 варианта генерируют HTML с JavaScript внутри