Question

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

我试图在纯SVG中为项目重新实现Material Design的视觉外观，并且我对一个解决方案感兴趣，该解决方案遵循材料中Elevation Shadows section的设计要求设计规格。

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

Answer 1

这是一个全面的阴影滤镜结构，它复制了Photoshop中投影控件的所有功能。我写了一个迷你应用程序，允许您更改任何这些参数，并复制并粘贴生成的过滤器：Get difference of another field between first and last timestamps of grouping

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

Answer 2

过滤器链似乎无效，因此您应该在Chrome上报告错误。 Firefox通过不显示任何内容来做正确的事情。

例如，在第一个过滤器链（id =＆＃34; filter4284＆＃34;）中，两个feGaussianBlur元素需要输入一些名为＆＃34; composite＆＃34; e.g。

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

但是没有导致该链称为复合，因此过滤器链失败。其他链也同样被打破了。

Answer 3

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

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

从一个高程到另一个高程的唯一变化是dy中的feOffset和stdDeviation中的feGaussianBlur。在这两种情况下，高程值都是它们所采用的值。

滤镜的x和y设置为宽边距，以避免大幅度切割（例如24）

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

3 个答案: