css - 捕捉 SVG 和 Material 阴影

Question

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

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

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

我尝试了什么:
我找到了几个代码笔，例如 this它具有使用 CSS 的 Material 阴影，我尝试从它们那里获取框阴影设置并使用相同的设置，但我的设置变得更大了。

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

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

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

---

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

感谢您的帮助。

---

编辑

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

---

解决方案

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

Answer 1

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

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

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

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

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

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