SVG 投影扩展

Question

我正在尝试操纵 SVG 阴影（以模拟材料设计元素）。

Material Design 中的一个元素包含 3 个不同值的阴影，具体取决于它们所处的海拔高度。我发现用 SVG 元素模拟这一点的最佳解决方案是使用 CSS 过滤器的投影。然而，这并不支持传播。有谁知道一种解决方法可以让我操纵阴影的扩散？我能想到的唯一解决方案是创建 3 个独立的元素，每个阴影 1 个元素并缩放该实际元素，这似乎超出了顶部。

Answer 1

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

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

我编写了一个模仿 Photoshop 的 dropshadow 控件输出有效 SVG 过滤器的工具：您可以在此处使用它（并查看源代码）：http ://codepen.io/mullany/pen/sJopz