如何通过JS为动态创建的SVG元素设置background-blend-mode及filter效果

CSS带连字符的属性在JS中需转为驼峰命名，直接赋值即可：

svgElem.style.backgroundBlendMode = "difference";

你当前的filter赋值语法本身没有问题，不生效通常是以下几个原因导致的：

• 样式设置时机错误：部分浏览器对未插入DOM树的SVG元素的CSS样式解析存在异常，需将SVG元素先挂载到页面父容器后，再执行filter赋值操作。
• 样式优先级被覆盖：如果存在其他更高优先级的CSS规则（比如带!important的全局svg样式）覆盖了内联样式，可以使用setProperty方法强制覆盖：

svgElem.style.setProperty('filter', 'hue-rotate(180deg) saturate(2)', 'important');

• 浏览器兼容性问题：部分旧版浏览器对SVG根元素的CSS filter支持不完善，可调整方案为给SVG套一层外层div，将背景、混合模式、filter属性全部设置在该div上，兼容性表现更稳定。

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