用于快速转换的 D3.js SVG 投影

Question

为快速过渡制作阴影的最佳方法是什么？我已经尝试在下面的代码中使用过滤器，但它似乎让我的过渡更加不稳定(我有大约 20 个左右移动的矩形):

var shadow = vis.append("defs").append("filter")
    .attr("id","dropshadow")
    .attr("height","130%");

shadow.append("feGaussianBlur")
    .attr("in","SourceAlpha")
    .attr("stdDeviation","3");

shadow.append("feOffset")
    .attr("dx","2")
    .attr("dy","2")
    .attr("result","offsetblur");

是否有适用于现代浏览器的跨浏览器 CSS 阴影？ (ie9+,chrome,firefox...懒得支持别人了)

有什么方法可以加快这种阴影的转换速度吗？

还有其他方法吗？我应该在它后面再画一个矩形吗？

Answer 1

如果您正在寻找 CSS 投影，那么您正在寻找的属性是 box-shadow。它受 IE9 及更高版本的支持，并具有四个属性:

• 阴影的水平偏移
• 垂直偏移
• 阴影必须模糊的值
• 然后它的传播

如果您希望以某种方式为阴影本身设置动画，它还会响应过渡变化。

您可以在 W3 链接上查看更多信息 here他们更深入的地方。