当 SVG 位于带有 translate3d 的元素上时，SVG 过滤器被切断答案

【问题标题】：SVG filter is cut off when the SVG is positioned over an element with translate3d当 SVG 位于带有 translate3d 的元素上时，SVG 过滤器被切断
【发布时间】：2021-08-03 09:02:46
【问题描述】：

我有一个绝对定位的 SVG 元素，每当它位于顶部时，就会有一个使用 transform: translate3d(x, y, z) 的元素，我应用到它的阴影过滤器被切断。这不会在 Firefox 上发生，但在 chrome 上会发生。

我对这个问题做了一个 Stackblitz：here

【问题讨论】：

最好是提出chrome bug，除非已经有一个。

标签： google-chrome svg svg-filters

【解决方案1】：

您在 Chrome 中触发了一个边缘案例错误，该错误似乎仅在 0,0,0 翻译时发生。如果您在任何轴上添加一个平移像素（例如 transform: translate3d(0, 0, 1)） - 它就会消失。

【讨论】：