求助：JavaScript修改SVG滤镜跨浏览器效果不一致的解决方法

我之前也踩过WebKit内核下SVG滤镜动态修改的坑，跟你描述的情况一模一样——Firefox正常，Chrome/Safari没反应，单步调试又能work，确实是时序问题导致WebKit没检测到滤镜属性的变化。给你三个经过验证的兼容方案，覆盖你要求的Safari 11.1、Chrome 65和Firefox版本：

方案1：切换滤镜引用（最稳妥的兼容方案） #

直接提前创建好灰色和红色两个滤镜，鼠标悬停时切换元素的滤镜引用，完全避开动态修改滤镜内部属性的兼容性问题：

SVG代码 #

<filter id="shadow-gray">
  <feDropShadow flood-color="#888" dx="2" dy="2" stdDeviation="3"/>
</filter>
<filter id="shadow-red">
  <feDropShadow flood-color="#ff0000" dx="2" dy="2" stdDeviation="3"/>
</filter>

<!-- 需要添加阴影的SVG元素 -->
<rect id="box" x="20" y="20" width="100" height="100" fill="#fff" stroke="#000" filter="url(#shadow-gray)"/>

JavaScript代码 #

const box = document.getElementById('box');

box.addEventListener('mouseover', () => {
  box.setAttribute('filter', 'url(#shadow-red)');
});

box.addEventListener('mouseout', () => {
  box.setAttribute('filter', 'url(#shadow-gray)');
});

这个方法所有浏览器都能完美支持，旧版本WebKit内核也不会有任何时序问题，是我最推荐的方案。

方案2：用CSS变量控制滤镜颜色 #

把滤镜的颜色绑定到CSS变量，通过JS修改变量值来切换颜色。WebKit内核对CSS变量的监听机制更可靠，能准确捕捉到变化：

SVG代码 #

<filter id="shadow-filter">
  <feDropShadow flood-color="var(--shadow-color, #888)" dx="2" dy="2" stdDeviation="3"/>
</filter>

<rect id="box" x="20" y="20" width="100" height="100" fill="#fff" stroke="#000" filter="url(#shadow-filter)"/>

JavaScript代码 #

const svg = document.querySelector('svg');
const box = document.getElementById('box');

box.addEventListener('mouseover', () => {
  svg.style.setProperty('--shadow-color', '#ff0000');
});

box.addEventListener('mouseout', () => {
  svg.style.setProperty('--shadow-color', '#888');
});

Chrome 65和Safari 11.1都已支持CSS变量，这个方案代码更简洁，不需要重复定义滤镜。

方案3：强制触发SVG重绘（兜底方案） #

如果必须动态修改滤镜内部属性，可以在修改后强制触发SVG元素的重排，让WebKit重新渲染滤镜：

SVG代码 #

<filter id="shadow-filter">
  <feDropShadow id="drop-shadow" flood-color="#888" dx="2" dy="2" stdDeviation="3"/>
</filter>

<rect id="box" x="20" y="20" width="100" height="100" fill="#fff" stroke="#000" filter="url(#shadow-filter)"/>

JavaScript代码 #

const box = document.getElementById('box');
const dropShadow = document.getElementById('drop-shadow');

function triggerRepaint(element) {
  // 临时修改display触发重排
  element.style.display = 'none';
  element.offsetHeight; // 强制浏览器计算布局
  element.style.display = '';
}

box.addEventListener('mouseover', () => {
  dropShadow.setAttribute('flood-color', '#ff0000');
  triggerRepaint(box);
});

box.addEventListener('mouseout', () => {
  dropShadow.setAttribute('flood-color', '#888');
  triggerRepaint(box);
});

这个方法通过强制浏览器重新计算元素布局，迫使WebKit检测到滤镜属性的变化，适合必须动态修改滤镜的场景。

内容的提问来源于stack exchange，提问作者Tsunami