Question

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

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

Answer 1

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

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

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