如何使用 SVG 过滤器在 SVG 中创建 Material Design 阴影

Question

我发现这个 SVG创建了一些阴影，但它只适用于 Chrome（OS X 上的 Firefox 和 Safari 不显示阴影）

我正在尝试为一个项目在纯 SVG 中重新实现 Material Design 的视觉外观，并且我对遵循Material Design Specs 中的Elevation Shadows 部分的设计要求的解决方案感兴趣。

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

Answer 1

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

<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>