我发现 this SVG 会产生一些阴影，但它只适用于 Chrome（OS X 上的 Firefox 和 Safari 不显示阴影）
我正在尝试在纯 SVG 中为一个项目重新实现 Material Design 的视觉外观，并且我对遵循 Material Design Specs 中 Elevation Shadows section 的设计要求的解决方案感兴趣。
我对生成的 SVG 有程序控制，因此，如果过滤器的参数更容易在基于高程的计算中表达，请指定。
【问题讨论】：
标签： svg material-design svg-filters
这是一个全面的阴影滤镜结构，复制了 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>
【讨论】：
过滤器链似乎无效，因此您应该报告 Chrome 上的错误。 Firefox 不显示任何内容是正确的。
例如，在第一个过滤器链（id="filter4284"）中，两个 feGaussianBlur 元素需要输入称为“复合”的东西，例如
<feGaussianBlur
id="feGaussianBlur4338"
in="composite"
stdDeviation="1"
result="blur" />
但在名为复合的链中没有结果，因此过滤器链失败。其他链条也同样断裂。
【讨论】：
我能找到的最简单的版本如下：
<filter style="color-interpolation-filters:sRGB;" id="height-1" x="-100%" y="-100%" width="300%" height="400%">
<feFlood flood-opacity="0.5" flood-color="rgb(0,0,0)" result="flood"></feFlood>
<feComposite in="flood" in2="SourceGraphic" operator="in" result="comp"></feComposite>
<feOffset dx="0" dy="1" result="offset"></feOffset>
<feGaussianBlur in="offset" stdDeviation="1" result="blur"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blur" mode="normal"></feBlend>
</filter>
从一个高度到另一个高度的唯一变化是feOffset 中的dy 和feGaussianBlur 中的stdDeviation。在这两种情况下，高程的值就是它们所取的值。
过滤器的x 和y 设置为较大的边距，以避免在大高度（例如24）中截断
【讨论】：