javascript 的 SVG 过滤器更新在浏览器中不一致答案

【问题标题】：SVG filter updates by javascript not consistent across browsersjavascript 的 SVG 过滤器更新在浏览器中不一致
【发布时间】：2018-10-03 16:04:05
【问题描述】：

我正在尝试通过 javascript 修改 svg 对象的过滤器。鼠标悬停应该会使灰色阴影变为红色。

问题是 Chrome 和 Safari 没有任何效果，但 Firefox 有。当我单步通过 Javascript 调试器时，我能够让 Safari 做正确的事情，所以我担心这可能是我无法控制的 webkit 的时间问题。

我的目标是找到一个解决方案，允许所有 3 个浏览器在 javascript 中更新过滤器。

Safari 11.1，铬 65.0.3325.181, 火狐 59.0.2

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<svg width="250" height="150">
    <defs>
        <filter id=glow x="-50%" y="-50%" width="200%" height="200%">
            <feDropShadow dx=2 dy=2 stdDeviation=2 flood-color="#F00" />
        </filter>
        <filter id=shadow x="-50%" y="-50%" width="200%" height="200%">
            <feDropShadow dx=2 dy=2 stdDeviation=2 flood-color="#888" />
        </filter>
    </defs>
    <g style="filter: url(#shadow)">
        <rect x=50 y=50 width=50 height=50 style="fill: yellow"
            onmouseover="this.parentNode.style.filter = 'url(#glow)'"
            onmouseout="this.parentNode.style.filter = 'url(#shadow)'" />
    </g>
    <g style="filter: url(#shadow)">
        <rect x=150 y=50 width=50 height=50 style="fill: green"
            onmouseover="this.parentNode.style.filter = 'url(#glow)'"
            onmouseout="this.parentNode.style.filter = 'url(#shadow)'" />
    </g>
</svg>
</body>
</html>

相关的 Codepen： https://codepen.io/anon/pen/yjeXMJ?editors=1000

【问题讨论】：

Chrome 中的属性正在更新，recordit.co/ToJBRU4aAq。然而，对于 JS DOM 方法如何操作 SVG 元素，似乎并没有任何标准行为，bocoup.com/blog/…
感谢您添加视频。我在 Safari 中看到了同样的事情。正如 RicardoAgra 在下面指出的那样，根据您更改过滤器的对象，您可以获得一些成功。因此，我们可以在某些情况下更改过滤器，只是不清楚如何使其保持一致。那个博客很有趣，但是 8 年前，也许是 svg 之前的版本......但仍然很有趣，所以谢谢！

标签： javascript svg browser

【解决方案1】：

如果您删除 .parent 选择器：

onmouseover="this.style.filter = 'url(#glow)'"

它适用于 chrome。希望有帮助。

【讨论】：

我可以通过直接设置在 Chrome 上获得部分成功，但我认为我应该不会使用父对象（
您是否想提请注意其他问题的某些方面？
-webkit- 可能有用
没用，在原帖前试了试，又摸索了一遍，没有运气。