Skip to content

Instantly share code, notes, and snippets.

Created December 20, 2011 21:53
  • Star 3 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save enjalot/1503463 to your computer and use it in GitHub Desktop.
masking with external svg elements
<script type="text/javascript" src=""></script>
<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>
<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>
<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 ="defs")
d3.html(url, function(data) {
console.log("data", data)
//get a selection of the image so we can pull out the icon
xml =
icon = document.importNode("#icon").node(), true)
console.log("icon", icon)
//we make a mask object
mask = defs.append("svg:mask")
.attr("id", name + "iconmask") = name + "icon"
//this is where the icon gets inserted into the DOM
console.log("mask", mask)
//masked rectangle
.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)
{"svg").selectAll("use." + name)
.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)
Display the source blob
Display the rendered blob
<?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" "">
<svg version="1.0" id="Layer_1" xmlns="" xmlns: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
Display the source blob
Display the rendered blob
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment