D3 Examples - testing svg to canvas

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
        <script type="text/javascript" src="https://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
        <script type="text/javascript" src="https://canvg.googlecode.com/svn/trunk/canvg.js"></script> 
        <script type="text/javascript" src="https://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script> 
        <script type="text/javascript" src="https://www.nihilogic.dk/labs/canvas2image/base64.js"></script> 
    </head>
​
    <body>
        <svg  id="svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://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();
                // https://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>
​
    