SVG过滤器更新由JavaScript在浏览器之间不一致

我正在尝试通过JavaScript修改SVG对象的过滤器。鼠标应使灰色阴影变成红色。

问题是Chrome和Safari没有任何效果，但是Firefox确实有效。当我单身踏上JavaScript调试器时，我能够让Safari做正确的事情，所以我担心Webkit可能是无法控制的时机。

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

Safari 11.1，Chrome 65.0.3325.181，Firefox 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>

关联的代码蛋白：https://codepen.io/anon/pen/yjexmj?editors=1000

如果删除.parent Selector：

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

它在Chrome上起作用。希望它有帮助。

相关内容

最新更新

热门标签：