masking with external svg elements

<!--
            you can reuse the masked out rect
            <rect id="maniconinstance" mask="url(#maniconmask)" width=100 height=100 x=0 y=0 fill="#f00"></rect>
            <rect id="womaniconinstance" mask="url(#womaniconmask)" width=100 height=100 x=0 y=0 fill="#f00"></rect>

or you can directly use the elements (as long as you are referencing the proper id)
            <use xlink:href="#manicon" transform="translate(200,200)scale(.5,.5)"></use>
            -->
        </svg>

icon = document.importNode(xml.select("#icon").node(), true)
                    console.log("icon", icon)

//we make a mask object
                    mask = defs.append("svg:mask")
                        .attr("id", name + "iconmask")
                    icon.id = name + "icon"
                    //this is where the icon gets inserted into the DOM
                    mask.node().appendChild(icon)

console.log("mask", mask)
                })
                //masked rectangle 
                defs.append("svg:rect")
                    .attr("id", name + "iconinstance")
                    .attr("width", 50)
                    .attr("height", 100)
                    .attr("mask", "url(#" + name + "iconmask)")
                    .attr("fill", color)
            }

//add a row of use elements which point to our masked element
            function make_row(name, icon, n, x, y)
            {
                d3.select("svg").selectAll("use." + name)
                    .data(d3.range(n))
                .enter()
                    .append("svg:use")
                    .attr("class", name)
                    .attr("xlink:href", "#" + icon + "iconinstance")
                    .attr("transform", function(d,i) {
                           return "translate(" + [x + 50 * i, y] + ")"
                    })
            }

make_icon("man.svg", "man", "red")
            make_icon("woman.svg", "woman", "white")
           
            make_row("a", "man", 14, 220, 20)
            make_row("b", "woman", 14, 220, 130)
            make_row("c", "man", 18, 20, 240)
            make_row("d", "woman", 18, 20, 350)
        </script>
    </body>
</html>

Modified http://mbostock.github.com/d3/d3.js?2.6.0 to a secure url

https://mbostock.github.com/d3/d3.js?2.6.0