Created
March 28, 2012 23:36
-
-
Save enjalot/2231537 to your computer and use it in GitHub Desktop.
testing svg to canvas
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script> | |
| <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> | |
| <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script> | |
| <script type="text/javascript" src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script> | |
| <script type="text/javascript" src="http://www.nihilogic.dk/labs/canvas2image/base64.js"></script> | |
| </head> | |
| <body> | |
| <svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px"> | |
| <!-- man and woman icons from thenounproject.com --> | |
| <defs> | |
| <g id="man"> | |
| <circle cx="18.118" cy="8.159" r="8.159"></circle> | |
| <path id="path" d="M8.472,95.426c0,2.524,2.05,4.574,4.574,4.574c2.529,0,4.576-2.05,4.576-4.574l0.004-38.374h2.037L19.65,95.426 | |
| c0,2.524,2.048,4.574,4.574,4.574s4.573-2.05,4.573-4.574l0.02-66.158h2.006v24.38c0,4.905,6.398,4.905,6.384,0v-24.9 | |
| c0-5.418-3.184-10.728-9.523-10.728L9.396,18.012C3.619,18.012,0,22.722,0,28.599v25.05c0,4.869,6.433,4.869,6.433,0v-24.38h2.048 | |
| L8.472,95.426z"></path> | |
| </g> | |
| <g id="woman"> | |
| <circle cx="22.925" cy="8.164" r="8.164"/> | |
| <path d="M29.775,18.047c5.697,0,8.008,4.695,8.871,7.283l6.999,23.008c1.396,4.949-4.899,6.998-6.4,2.175l-6.298-21.125h-1.833 | |
| L42.03,66.966H31.973v29.296c0,4.996-7.514,4.971-7.514,0V66.774h-3.063l0.005,29.447c0,5.037-7.545,5.037-7.545,0l-0.002-29.255 | |
| H3.765l10.831-37.578h-1.694l-6.299,21.2c-1.5,4.621-7.85,2.724-6.396-2.228L7.2,25.33c0.749-2.625,3.045-7.283,8.795-7.283H29.775z | |
| "/> | |
| </g> | |
| </defs> | |
| <use xlink:href="#man"></use> | |
| <g id="woman" fill="#ff0000" transform="translate(100,0)"> | |
| <circle cx="22.925" cy="8.164" r="8.164"/> | |
| <path d="M29.775,18.047c5.697,0,8.008,4.695,8.871,7.283l6.999,23.008c1.396,4.949-4.899,6.998-6.4,2.175l-6.298-21.125h-1.833 | |
| L42.03,66.966H31.973v29.296c0,4.996-7.514,4.971-7.514,0V66.774h-3.063l0.005,29.447c0,5.037-7.545,5.037-7.545,0l-0.002-29.255 | |
| H3.765l10.831-37.578h-1.694l-6.299,21.2c-1.5,4.621-7.85,2.724-6.396-2.228L7.2,25.33c0.749-2.625,3.045-7.283,8.795-7.283H29.775z | |
| "/> | |
| </g> | |
| </svg> | |
| <canvas id="canv" width="500px" height="500px"></canvas> | |
| <script type="text/javascript"> | |
| function importSVG(sourceSVG, targetCanvas) { | |
| // https://developer.mozilla.org/en/XMLSerializer | |
| svg_xml = (new XMLSerializer()).serializeToString(sourceSVG); | |
| svg_xml = svg_xml.replace(/ xlink/g, ' xmlns:xlink') | |
| svg_xml = svg_xml.replace(/ href/g, ' xlink:href') | |
| console.log(svg_xml) | |
| var ctx = targetCanvas.getContext('2d'); | |
| // this is just a JavaScript (HTML) image | |
| var img = new Image(); | |
| // http://en.wikipedia.org/wiki/SVG#Native_support | |
| // https://developer.mozilla.org/en/DOM/window.btoa | |
| img.src = "data:image/svg+xml;base64," + btoa(svg_xml); | |
| img.onload = function() { | |
| // after this, Canvas’ origin-clean is DIRTY | |
| console.log("loaded", img.src) | |
| ctx.drawImage(img, 0, 0); | |
| } | |
| } | |
| //canvg(); | |
| var canv = d3.select("#canv").node() | |
| var svg = d3.select("svg").node() | |
| importSVG(svg, canv) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment