如何用svg.js/svg.filter.js在SVG的defs中定义自定义feDropShadow滤镜？

方法1：用svg.js原生API构建滤镜（推荐） #

不要直接插入字符串，用svg.js的元素创建方法一步步构建滤镜，既不会出现转义问题，还能享受API的链式调用优势：

// 在defs中创建filter元素
const dropShadow = myExampleDrawing.defs().filter();
// 向filter中添加feDropShadow并设置属性
dropShadow.feDropShadow({
  dx: 5,
  dy: 8,
  stdDeviation: 0.2
});

// 给目标元素应用滤镜，示例为一个矩形
myExampleDrawing.rect(150, 80).fill('#2ecc71').filter(dropShadow);

方法2：直接操作DOM节点插入原始SVG #

如果一定要用原始SVG字符串，可以通过svg.js元素的.node属性获取对应的DOM节点，再用innerHTML插入内容，绕开自动转义：

const filterNode = myExampleDrawing.defs().element('filter').node;
filterNode.innerHTML = '<feDropShadow dx="5" dy="8" stdDeviation="0.2" />';

补充：svg.filter.js的阴影实现 #

你提到svg.filter.js似乎不支持feDropShadow，其实它提供了shadow()方法创建阴影效果，底层用feGaussianBlur+feOffset组合实现，效果和feDropShadow类似，用法如下：

const filter = myExampleDrawing.defs().filter();
// 参数依次为x偏移、y偏移、模糊半径
filter.shadow(5, 8, 0.2);

// 应用到元素，示例为一个圆形
myExampleDrawing.circle(60).fill('#e74c3c').filter(filter);

为什么words()会导致转义？ #

words()方法的设计初衷是添加文本内容，它会自动转义HTML特殊字符（比如<转成<）来避免XSS风险，所以不适合用来插入SVG元素标签。

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