Javascript中如何在for循环为SVG添加多个drop-shadow实现渐变3D效果

• 语法错误：drop-shadow是CSS函数，正确写法是drop-shadow(参数)，原代码漏掉了函数括号，还给偏移量、色值额外加了多余括号，同时没有指定模糊半径参数，属性完全不符合CSS规范。
• 逻辑错误：多次给同一个元素的-webkit-filter属性赋值，后续赋值会直接覆盖之前的结果，根本没有实现多层阴影拼接的效果，动态加类的操作完全无意义。
• 数组下标越界：gcolor数组共70个元素，下标范围是0~69，循环变量i从1遍历到70，最后取gcolor[70]会得到undefined，导致样式错误。

直接拼接所有drop-shadow语句，一次性给元素的filter属性赋值即可，无需操作类名：

let text = document.querySelector(".brand-svg");
let gcolor = ["#ffb576","#ffb275","#ffb074","#ffad73","#ffab72","#ffa871","#ffa670","#ffa370","#ffa16f","#ff9e6e","#ff9c6d","#ff996c","#ff976b","#ff946a","#ff9269","#ff9068","#ff8d67","#ff8b66","#ff8865","#ff8664","#ff8363","#ff8163","#ff7e62","#ff7c61","#ff7960","#ff775f","#ff745e","#ff725d","#ff705c","#ff6d5b","#ff6b5a","#ff6859","#ff6658","#ff6357","#ff6156","#ff5e56","#ff5c55","#ff5954","#ff5753","#ff5452","#ff5251","#ff4f50","#ff4d4f","#ff4b4e","#ff484d","#ff464c","#ff434b","#ff414a","#ff3e49","#ff3c49","#ff3948","#ff3747","#ff3446","#ff3245","#ff2f44","#ff2d43","#ff2b42","#ff2841","#ff2640","#ff233f","#ff213e","#ff1e3d","#ff1c3c","#ff193c","#ff173b","#ff143a","#ff1239","#ff0f38","#ff0d37","#ff0a36"];

// 拼接所有drop-shadow
let shadowStr = '';
for (let i = 0; i < gcolor.length; i++) {
  // 第三个参数为模糊半径，可根据需求调整数值
  shadowStr += `drop-shadow(0px ${-(i+1)}px 0 ${gcolor[i]}) `;
}
// 同时兼容前缀属性和标准属性
text.style.webkitFilter = shadowStr;
text.style.filter = shadowStr;

如果后续要做动画，只需重新拼接对应偏移的阴影串重新赋值即可，性能满足常规动画需求。

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