Javascript 以编程方式向SVG元素添加阴影

我正在使用JavaScript向内联SVG添加圆圈。如何设置这些圆的样式以包含阴影效果

我找到了，但显然它不适用于单个SVG元素

我还发现了SVG过滤器元素，以及如何在defs下手动将其包含在代码中。但在我的例子中，SVG是在运行时检索的，我需要以编程方式添加阴影

<filter id="shadow">
  <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2"/>
</filter>

---

确保它适用于单个元素，请在Firefox中尝试。其他浏览器可能需要赶上.thx。我希望有一个至少由两个现代浏览器（例如Chrome或new Edge）支持的解决方案。像构造和插入任何其他元素一样构造和插入元素。@Ourobrus我会尝试的，谢谢。那么，我是否应该插入一个“defs”元素，然后附加我的“filter”元素呢？是的，但是可以检查svg是否已经有了一个

，如果它存在，就使用它。

// Add the drop-shadow effect
let defs = document.createElementNS(NS, 'defs');
let filter = document.createElementNS(NS, 'filter');
filter.setAttribute("id", "dropshadow");

let feDropShadow = document.createElementNS(NS, 'feDropShadow');
feDropShadow.setAttribute("dx", "0");
feDropShadow.setAttribute("dy", "0");
feDropShadow.setAttribute("stdDeviation", "2");

draw.appendChild(defs);
defs.appendChild(filter);
filter.appendChild(feDropShadow);