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

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

找到错误。

我将过滤器添加到 svg 而不是 svg 中的“g”元素。向“g”添加过滤器对我来说在 IE 中有效