SVG阴影扩散

我试图操纵SVG阴影（模拟材质设计元素）

---

材质设计中的一个图元包含3个不同值的投影，具体取决于它们所处的标高。我发现，用SVG元素模拟这种情况的最佳解决方案是使用CSS过滤器的阴影。然而，这并不支持传播。有人知道一个可以让我控制阴影扩散的解决方法吗？我能想到的唯一解决方案是创建3个单独的元素，每个阴影1个，并缩放实际元素，这似乎超出了顶部。

您可以使用feComponentTransfer/feFuncA操纵阴影的扩展。例如：

<feGaussianBlur stdDeviation="5"/>
<feComponentTransfer>
    <feFuncA type="gamma" exponent="0.5" amplitude="2"/>
</feComponentTransfer>

---

我编写了一个模拟Photoshop的dropshadow控件输出有效SVG过滤器的工具：您可以在此处使用它（并查看源代码）：

我编写了一个小测试，以了解如何操作过滤器大小，但我不确定您操作的属性是什么。我很难理解传递函数是如何工作的。这是feFuncA的振幅：参见这里了解ti如何影响扩散：这似乎改变了模糊距离。我正在尝试改变阴影的大小如果你想要一个更大的阴影，使用一个更大的stdDiviation-spread是一个PhotoShop术语，指的是模糊衰减。我看到了，mdn使用它来指代阴影的大小-