857872609d893d123e67 by mpmckenna8

index.html

<html>
    <head>
    <script type="text/javascript" src="//mbostock.github.com/d3/d3.js?2.6.0"></script>
    </head>
    <body>
        <svg>
            <defs>
            
            <mask id="rekt">
                <g id="rrr">
                    <rect  width=50 height=50 fill="#ccc"></rect> 
                    <rect  x=50 y=50 width=50 height=50 fill="#ccc"></rect> 
                </g>
            </mask>
            </defs>

            <rect width="100%" height="100%" fill="#cccccc"></rect>
            <rect mask="url(#rekt)" width=100 height=100 x=0 y=0 fill="#00f"transform="translate(20,20)"></rect>
            <rect mask="url(#rekt)" width=100 height=100 x=0 y=0 fill="#00f"transform="translate(20,230)rotate(-90)"></rect>
            <rect mask="url(#rekt)" width=100 height=100 x=0 y=0 fill="#00f"transform="translate(110,120)rotate(-90)"></rect>
            <rect mask="url(#rekt)" width=100 height=100 x=0 y=0 fill="#00f"transform="translate(110,130)"></rect>

            <!--
            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>

            <use xlink:href="#maniconinstance" transform="translate(110,0)" width=100 height=100></use>
            <use xlink:href="#womaniconinstance" transform="translate(160,0)" width=100 height=100></use>

            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>

        <script type="text/javascript">
            //Make a mask from an external svg element, then mask a rectangle with it
            function make_icon(url, name, color)
            {
                defs = d3.select("defs")
                d3.html(url, function(data) {
                    console.log("data", data)
                    //get a selection of the image so we can pull out the icon
                    xml = d3.select(data) 
                    console.log("xml", xml.select("#icon"), xml.select("#icon").node())

                    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>

man.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="37.207px" height="100px" viewBox="0 0 37.207 100" enable-background="new 0 0 37.207 100" xml:space="preserve">
<g id="icon">
<circle fill="#fff" cx="18.118" cy="8.159" r="8.159"></circle>
<path fill="#fff" 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>
</svg>

woman.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="45.833px" height="100px" viewBox="0 0 45.833 100" enable-background="new 0 0 45.833 100" xml:space="preserve">

<g id="icon">
<path fill="#fff" 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
	"/>
<circle fill="#fff" cx="22.925" cy="8.164" r="8.164"/>
</g>
</svg>