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添加过滤器而不是＆＃34; g＆＃34; svg里面的元素。将过滤器添加到＆＃34; g＆＃34;我在IE工作

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

1 个答案: