我想在我的SVG元素上使用Google Material阴影。 我正在使用Snap SVG，我找到了一种在元素上使用阴影滤镜的方法：
element.attr({
filter : s.filter(Snap.filter.shadow(0, 19, 38, 'black', 1))
});
我无法找到的是我必须为每个材质阴影输入的设置。
我尝试了什么：
我找到了几个使用CSS的this代码，它们使用CSS进行了物质阴影，我尝试从它们中获取盒子阴影设置并使用相同的设置，但我的设置要大得多。
根据我的研究，box-shadow采用像素设置，根据Snap SVG文档，Snap SVG也是如此。
我似乎无法理解为什么两者都以像素为单位进行设置，但Snap SVG只是更多。
- 我也尝试了一些试验和错误，但我无法想象找出所有不同材质阴影的所有不同设置需要多长时间。
所以为了澄清一点，我真正想知道的是每个Google Material Shadow的Snap SVG阴影滤镜设置。
原因是我想要一个在阴影之间循环的按钮。
感谢您的帮助。
修改
实际上，看起来我的不透明度是错误的 我的过滤器现在更像是物质阴影 但是，我注意到使用CSS for Material阴影的codepens使用多个box-shadow。我怎么能用Snap SVG做到这一点？ （有多个阴影）
解
所以我做的是在SVG中定义几个def 我发现了一个带有Material Shadows的SVG，它帮助我为每个级别的阴影定义我的defs 然后我按照@Ian建议并使用了Snap SVG的defs。
答案 0 :(得分：0)
我不完全确定你的描述为什么你仍然不能使用你发现的css风格。没理由你不能通过切换按钮来切换样式，除非我误解了什么。
它在Snap中有点繁琐的复杂过滤器，但是如果你只是从常规svg标记中找到一个，你可以通过'解析'svg标记，或者使用defs语句中已有的那些来使用它，例如
例如，您可以转到这样的页面... filter codepen抓取创建的标记，然后将其放入defs语句或解析（'markup'）它。
然后你可以像......一样使用它。
element.attr({ filter: Snap('#myFilterId') });
例如jsfiddle使用上面的codepen创建并粘贴到'defs'语句并与上面的行一起使用。