Looking for a way to adjust the filter of an svg object using javascript, specifically changing a grey shadow to red upon mouseover.
The issue is that in Chrome and Safari, the desired effect does not occur, while Firefox functions as intended. When using the Javascript debugger, Safari responded correctly, which raises concerns about potential timing issues with the webkit that are beyond my control.
Ultimately, I aim to discover a solution that enables a filter update via javascript across all three browsers: Safari 11.1, Chrome 65.0.3325.181, and 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>
Link to Codepen: https://codepen.io/anon/pen/yjeXMJ?editors=1000