Cutted text

_.md

[ Launch: Tributary inlet ] 4668363 by roundrobin

config.json

{"description":"Cutted text","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"fullscreen":false,"thumbnail":"http://i.imgur.com/zmxu7ty.png"}

inlet.js

//<defs>
//     <mask id="mask" x="0" y="0" width="100" height="100" maskUnits="userSpaceOnUse">
//         <circle cx="50" cy="50" r="50" fill="white"/>
//         <circle cx="50" cy="50" r="25" fill="black"/>
//     </mask>
// </defs>
// <circle cx="50" cy="50" r="50" fill="blue" mask="url(#mask)"/>



var svg = g;
var defs= svg.append("defs");

var mask = defs.append("mask").attr({
  x: 0,
  y:0,
  width: 100,
  height: 100,
  maskUnit: "userSpaceOnUse",
  id: "mask"
})

 
var mask2 = defs.append("mask").attr({
  x: 0,
  y:0,
  width: 100,
  height: 100,
  maskUnit: "userSpaceOnUse",
  id: "mask2"
})

var r= 148;
	
var x = 200;
var y = 200;

mask.append('svg:text')
.text(function(d,i){ return "Hello World";})
.attr("fill", "#FFECEC")
.attr("x", x)
.attr("y", y)
.attr("font-size", 35)
.attr("font-family", "Arial")
.attr("text-anchor", "start")
.attr("id","testText")

var bb = d3.select("#testText").node().getBBox();
	
g.append("svg:rect")
	.attr("x", x)
	.attr("y", y-(bb.height/3))
	.attr("width",bb.width)
	.attr("height",bb.height)
	.attr("fill","#B2B2B4")
.attr("mask","url(#mask)");


var x = 200;
var y = 177;
mask2.append('text')
.text(function(d,i){ return "Hello World";})
.attr("fill", "#FFECEC")
.attr("x", x)
.attr("y", y)
.attr("font-size", 35)
.attr("font-family", "Arial")
.attr("text-anchor", "start")
.attr("id","testText")

var bb = d3.select("#testText").node().getBBox();
	
g.append("svg:rect")
	.attr("x", x)
	.attr("y", y-(bb.height/1.5))
	.attr("width",bb.width)
	.attr("height",bb.height/3.04)
	.attr("fill","#B2B2B4")
.attr("mask","url(#mask2)");