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+，铬，火狐...不在乎支持别人）

有没有办法用这种类型的阴影加快过渡？

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

Answer 1

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

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

如果您希望以某种方式对阴影本身进行动画处理，它也会响应过渡更改。

您可以在此处的 W3 链接中查看更多信息，他们在那里进行了更深入的介绍。