I am developing a drawing app, and now I want to add a function which creates SVG from my canvas or control points. (I save the mouse coordinates for each drawing step).
canvasElement.toDataURL("image/svg+xml"); // -- doesn't work
One condition - don't use external libs.
I understand, that it is possible to generate an SVG file in Javascript like:
var mysvg = "<svg>"; for(something) { mysvg += "something"; } //etc
But I don't think that it is good way.
Can you advise anything?
I solved the problem by generating SVG file. I translated all my canvas drawing functions into SVG drawing tags.
Something like that:
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>";
}
So, in svg variable there will be SVG file generated from Canvas. Thanks everybody!
也许在这个链接上: http : //code.google.com/p/canvas-svg/你会找到你想要的东西。
You can generate an equivalent SVG in JavaScript If you want to try it go to http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php
You can generate 2 types of Raphael.js or one type in jQuery SVG All 3 options generate an HTML with the JavaScript inside
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.