Convertir lienzo o puntos de control a SVG

Question

Estoy desarrollando una aplicación de dibujo, y ahora quiero agregar una función que cree SVG desde mi lienzo o puntos de control. (Guardo las coordenadas del mouse para cada paso de dibujo).

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

Una condición: no utilizar libs externos.

entiendo, que es posible generar un archivo SVG en Javascript como:

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

Pero no creo que es una buena manera.

¿Puede aconsejar algo?

Answer 1

He resuelto el problema mediante la generación de archivos SVG. Traducí todas mis funciones de dibujo de lienzo en etiquetas de dibujo SVG.

Algo así:

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>"; 
} 

Así, en la variable SVG habrá Imagen SVG generado a partir de la lona. ¡Gracias a todos!

Answer 2

Puede generar un SVG equivalente en JavaScript Si quieres probar que se vaya a http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php

Puede generar 2 tipos de Raphael.js o un tipo de jQuery SVG Todas las 3 opciones generan un HTML con el JavaScript dentro de

Answer 3

Tal vez en este enlace: http://code.google.com/p/canvas-svg/ encontrará lo que está buscando.