捕捉 SVG 和 Material 阴影

Question

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

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

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

我试过的：
我发现了几个 codepen，例如 this，它们使用 CSS 具有 material 阴影，我尝试从它们那里获取 box-shadow 设置并使用相同的设置，但我的变得更大了.

根据我的研究，box-shadow 以像素为单位进行设置，根据 Snap SVG 文档，Snap SVG 也是如此。

我似乎无法理解为什么两者都采用像素设置，但 Snap SVG 远不止于此。

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

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

感谢您的帮助。

编辑

实际上，看起来我做错了不透明度。
我的滤镜现在更像 Material 阴影了。
但是，我注意到使用 CSS 作为 Material 阴影的代码笔使用了多个框阴影。我如何使用 Snap SVG 做到这一点？（有多个阴影）

解决方案

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

Answer 1

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

在 Snap 中执行复杂的过滤器有点繁琐，但如果您只是从常规 svg 标记中找到一个过滤器，则可以通过 'parsing' svg 标记或使用一些已经存在于例如 defs 语句。

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

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

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

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

Snap SVG & Material Shadows