2016-08-02 17 views
0

im Erstellen von Svg Hexagonon mit d3-Linie. Ich möchte Schatten hinzufügen. Es funktioniert in Chrome, aber nicht in IE. Unten ist ein Teil des Codes.SVG-Filter mit d3 js funktioniert nicht in 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); 
+0

Bitte fügen Sie den Rest Ihres Codes, um ein funktionierendes Beispiel zu erstellen. Das Problem ist wahrscheinlich nicht mit Ihrem Filter. –

Antwort

1

den Fehler gefunden.

Ich habe Filter zu Svg und nicht zu dem "g" -Element in Svg hinzufügen. Hinzufügen von Filter zu "g" arbeitete in IE für mich