2016-08-02 9 views
0

d3線を使用してsvg hexagaonを作成しています。私はそれに影を追加したい。クロームでは動作しますが、IEでは動作しません。以下はコードの一部です。IEで動作していないd3 jsを使用するSVGフィルタ

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

実際の例を作るために残りのコードを追加してください。問題は、おそらくあなたのフィルタではありません。 –

答えて

1

がこのバグを発見しました。

私はフィルタをsvgに追加していましたが、svgの "g"要素には追加しませんでした。私のためにIEで動かされた "g"にフィルタを追加する

関連する問題