如何使用SVG过滤器在SVG中创建材质设计阴影

我发现它创建了一些阴影，但它只在Chrome中起作用（OS X上的Firefox和Safari不显示阴影）

我正试图为一个项目在纯SVG中重新实现材质设计的视觉外观，我对一个解决方案感兴趣，该解决方案遵循材质设计规范中的许多设计要求

---

我对生成的SVG有编程控制，因此，如果过滤器的参数更容易在基于高程的计算中表达，请指定

过滤器链似乎无效，因此您应该报告Chrome上的错误。Firefox没有显示任何内容，这是正确的做法

例如，在第一个过滤器链（id=“filter4284”）中，两个feGaussianBlur元素需要输入称为“复合”的内容，例如：

---

但是在这个叫做复合的链中没有结果，所以过滤链失败了。其他链条也同样断裂。

我能找到的最简单的版本如下：

从一个高程到另一个高程的唯一变化是

feOffset

中的

dy

和

feGaussianBlur

中的

stdDeviation

。在这两种情况下，高程的值都是它们采用的值

---

过滤器的

x

和

y

被设置为宽大的边距，以避免在大的仰角（例如24）中出现截断。

这是一个全面的阴影过滤器结构，复制了Photoshop中阴影控制的所有功能。我编写了一个迷你应用程序，允许您更改这些参数中的任何一个，并复制和粘贴生成的过滤器：

如果你想要一个剪切粘贴过滤器，就使用我写的这个阴影发生器：哇@Michael，这个发生器太棒了。请写下并回答过滤器结构和代码笔的链接，以便我可以接受。

  <feGaussianBlur
     id="feGaussianBlur4338"
     in="composite"
     stdDeviation="1"
     result="blur" />

<filter id="drop-shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">

<!-- Take source alpha, offset it by angle/distance and blur it by size -->
<feOffset id="offset" in="SourceAlpha" dx="-5.49" dy="-5.11" result="SA-offset"/> 
<feGaussianBlur id="blur" in="SA-offset" stdDeviation="4.75" result="SA-o-blur"/>

<!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->

<feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN"> 
  <feFuncA id="contour" type="table" tableValues="0 1"/> 
</feComponentTransfer>

<feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>

<!-- Adjust the spread by multiplying alpha by a constant factor --> <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd"> 
  <feFuncA id="spread-ctrl" type="linear" slope="2.4"/> 
</feComponentTransfer>

<!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier --> 
<feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .8 0" result="SA-o-b-c-s-recolor"/>

<!-- Generate a reasonably grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 --> 
<feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/> 
<feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise"/> 
<feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0" k2="1" result="SA-o-b-c-s-r-mix"/>

<!-- Merge the shadow with the original --> 
<feMerge> 
  <feMergeNode in="SA-o-b-c-s-r-mix"/> 
  <feMergeNode in="SourceGraphic"/> 
</feMerge> 
</filter>