使用d3 js在IE中不工作的SVG过滤器

Question

使用d3行创建svg hexagaon。我想给它添加阴影。它在Chrome中工作，但不在IE中。下面是代码的一部分。

container = d3.select('#' + attrs.id) 
       .append('svg'); 

//---------------------------------------Filters------------------- 
var defs = container.append("defs"); 

// create filter with id #drop-shadow 
// height=130% so that the shadow is not clipped 
var filter = defs.append("filter") 
       .attr("id", attrs.id+"drop-shadow") 
       .attr("height", "130%").attr("width", "130%"); 

// SourceAlpha refers to opacity of graphic that this filter will be applied to 
// convolve that with a Gaussian with standard deviation 3 and store result 
// in blur 
filter.append("feGaussianBlur") 
     .attr("in", "SourceAlpha") 
     .attr("stdDeviation", 6) 
     .attr("result", "blur"); 

// translate output of Gaussian blur to the right and downwards with 2px 
// store result in offsetBlur 
filter.append("feOffset") 
     .attr("in", "blur") 
     .attr("dy", 5) 
     .attr("result", "offsetBlur"); 

// overlay original SourceGraphic over translated blurred opacity by using 
// feMerge filter. Order of specifying inputs is important! 
var feMerge = filter.append("feMerge"); 

feMerge.append("feMergeNode") 
     .attr("in", "offsetBlur") 
feMerge.append("feMergeNode") 
     .attr("in", "SourceGraphic"); 
//---------------------------------------------------------------------- 
container.style("filter", "url(#" + attrs.id + "drop-shadow)").attr('height', containerHeight) 
     .attr('width', containerWidth + 100); 

Answer 1

找到了这个bug。

我是添加过滤器到svg而不是svg里面的“g”元素。在IE中为我添加过滤器“g”