d3.js - 私はd3.js.と透明マスクを作成する方法を学ぶことに興味を持って透明sectio

Question

を作成する図形をマスキング

http://jsfiddle.net/59bunh8u/35/

私はアップにしていますところです - どのように私は赤い四角形の減算マスクを作成します - また、どのように乗算スタイルプロパティのより上で取るために赤い四角形のスタイルだろうか？

$(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"); 


}); 

Answer 1

SVGマスクが必要です。パラメータを微調整するためにそれで遊ぶこと自由に感じなさい：

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); 

変形例：http://jsfiddle.net/59bunh8u/40/

も参照してくださいSVG clipPath to clip the *outer* content out