SVG过滤器仅应用于两个非常相似的SVG中的一个路径

我已经讨论过这一点，但我无法确定为什么

Drop Shadow SVG Filter

会成功地应用于第一个SVG，而不是第二个

• 每个SVG都包含一个
  元素
• 每个SVG包含一个或两个
  元素
• 在每个SVG中，

  Drop Shadow SVG过滤器

  是相同的

---

两个SVG（过滤器在第一个SVG中成功应用，但在第二个SVG中未成功应用）：

div{
浮动：左；
宽度：180px；
高度：180像素；
右边距：24px；
}

返回图标
区分大小写图标

您正在将489x489 viewBox上定义的过滤器应用于具有20x20 viewBox的SVG

重复的ID也不会有帮助

如果我将小写的a乘以20，则过滤器工作正常：

直肠{
填充：rgb（255,0,0）；
}
路径{
填充：rgb（255、255、255）；
过滤器：url（#放置阴影）；
}
#大写，
#小写{
变换：translate（-2px，-2px）；
}

Ohhhh。。。是因为两个SVG的规模完全不同吗？因此，区分大小写图标的

应具有如下值：

dx=“0.5”dy=“-0.5”stdDeviation=“0.5”

，而不是

dx=“10”dy=“-10”stdDeviation=“10”

。