Created
December 20, 2011 21:53
-
-
Save enjalot/1503463 to your computer and use it in GitHub Desktop.
masking with external svg elements
This file contains 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
| <html> | |
| <head> | |
| <script type="text/javascript" src="http://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> |
This file contains 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
| <?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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment