使用d3 js的SVG过滤器在IE中不起作用 [英] SVG filter using d3 js not working in IE
本文介绍了使用d3 js的SVG过滤器在IE中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
im使用d3线创建svg hexagaon.我想给它加阴影.它适用于chrome,但不适用于IE.下面是代码的一部分.
im creating svg hexagaon using d3 line. i want to add shadow to it. it works in chrome but not in IE. below is a part of code.
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);
推荐答案
发现了该错误.
我在svg中添加了过滤器,而不是在svg中的"g"元素中添加了过滤器.为我在IE中为"g"添加过滤器
i was adding filter to svg and not to the "g" element inside svg. Adding filter to "g" worked in IE for me
这篇关于使用d3 js的SVG过滤器在IE中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文