捕捉 SVG 和材质阴影

Question

我想在我的 SVG 元素上添加 Google Material 阴影。 我正在使用 Snap SVG，并且我找到了一种在我的元素上使用阴影滤镜的方法：

element.attr({
    filter : s.filter(Snap.filter.shadow(0, 19, 38, 'black', 1))
});

我找不到必须为每个材质阴影输入的设置。

我尝试了什么：
我发现了几个 codepen，例如 this，它们使用 CSS 提供了材质阴影，我尝试从它们中获取 box-shadow 设置并使用相同的设置，但我的只是变得更大了。

根据我的研究，box-shadow 采用像素设置，根据 Snap SVG 文档，Snap SVG 也是如此。

我似乎无法理解为什么两者都采用像素设置，但 Snap SVG 只是更多。

-- 我也尝试了一些试验和错误，但我无法想象需要多长时间才能找出所有不同材质阴影的所有不同设置。

---

所以为了澄清一点，我真正想知道的是 Snap SVG 阴影过滤器设置，适用于每个 Google Material Shadow。
原因是我想要一个在阴影之间循环的按钮。

感谢您的帮助。

---

编辑

实际上，看起来我做错了不透明度。
我的过滤器现在更类似于材质阴影。
但是，我注意到使用 CSS 作为材质阴影的代码笔使用了多个盒子阴影。如何使用 Snap SVG 做到这一点？ （有多个阴影）

---

解决方案

所以我所做的就是在 SVG 中定义几个 def。
我找到了一个带有 Material Shadows 的 SVG，它帮助我为每个级别的阴影定义了我的 def。
然后我按照@Ian 的建议做了，并将defs 与Snap SVG 一起使用。

Answer 1

从你的描述中我不太确定为什么你仍然不能使用你发现你喜欢的 css 样式。没有理由你不能通过切换按钮来切换样式，除非我误解了什么。

在 Snap 中做复杂的过滤器有点繁琐，但如果你只是从常规的 svg 标记中找到一个，你可以通过“解析”svg 标记或使用 defs 语句中已经存在的一些东西来使用它.

例如，您可以转到这样的页面...filter codepen 获取创建的标记，然后将其放入 defs 语句或 parse('markup') 它。

然后你可以像...一样使用它

element.attr({ filter: Snap('#myFilterId') });

例如jsfiddle 使用上述代码笔创建并粘贴到“defs”语句中并与上述行一起使用。