I am interested in learning how to create a transparent mask with d3.js.

/

This is where I am up to - how would I create a subtraction mask on the red rectangle - also how could you style the red rectangle to take on more of a multiply style property?

$(document).ready(function() {

  var el = $(".mask"); //selector

  // Set the main elements for the series chart
  var svg = d3.select(el[0]).append("svg")
    .attr("class", "series")
    .attr("width", "800px")
    .attr("height", "500px")
    .append("g")
    .attr("transform", "translate(0,0)")


  var rect = svg
    .append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 500)
    .attr("height", 500)
    .style("fill", "red")
    .style('opacity', 0.75)

  var rect = svg
    .append("circle").attr("cx", 250).attr("cy", 250).attr("r", 125).style("fill", "white");


});

I am interested in learning how to create a transparent mask with d3.js.

http://jsfiddle/59bunh8u/35/

This is where I am up to - how would I create a subtraction mask on the red rectangle - also how could you style the red rectangle to take on more of a multiply style property?

$(document).ready(function() {

  var el = $(".mask"); //selector

  // Set the main elements for the series chart
  var svg = d3.select(el[0]).append("svg")
    .attr("class", "series")
    .attr("width", "800px")
    .attr("height", "500px")
    .append("g")
    .attr("transform", "translate(0,0)")


  var rect = svg
    .append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 500)
    .attr("height", 500)
    .style("fill", "red")
    .style('opacity', 0.75)

  var rect = svg
    .append("circle").attr("cx", 250).attr("cy", 250).attr("r", 125).style("fill", "white");


});

• javascript
• css
• d3.js

Share Improve this question Follow asked Sep 6, 2016 at 22:57 The Old CountyThe Old County 1391414 gold badges6767 silver badges142142 bronze badges 1

• -- this shows promise -- jsfiddle/0g6pj8dm/1 – The Old County Commented Sep 7, 2016 at 2:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You need an SVG mask. Feel free to play with it to tweak the parameters:

  var mask = svgroot
     .append("defs")
     .append("mask")
     .attr("id", "myMask");

  mask.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 500)
    .attr("height", 500)
    .style("fill", "white")
    .style("opacity", 0.7);        

  mask.append("circle")
    .attr("cx", 300)
    .attr("cy", 300)
    .attr("r", 100);

Modified example: http://jsfiddle/59bunh8u/40/

See also SVG clipPath to clip the *outer* content out