SVG Drop Shadow - 不透明度,feOffset和viewBox难度

Question

我想将一个简单的投影应用于SVG文件.由于这是我第一次深入SVG过滤器,我陷入困境,无法找到(可能是简单的)问题的解决方案:为什么feColorMatrix不应用于阴影？

这是过滤器:

<defs>
  <filter id="drop-shadow" filterUnits="userSpaceOnUse" width="120" height="120">
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="1" />
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="1"/> 
    <feColorMatrix in="the-shadow" result="color-out" type="matrix"
      values="0 0 0 0   0
              0 0 0 0   0 
              0 0 0 0   0 
              0 0 0 0.1 0"/>
    <feBlend in="SourceGraphic" in2="the-shadow" mode="normal"/>
  </filter>
</defs>

此外,FireFox可能会忽略feOffset吗？或者语法有问题吗？

另外:在所有浏览器中,投影似乎都会在顶部和左侧被剪掉.svg(在img标签中)是22px x 22px大,我已经扩大了viewBox:

<svg version="1.1" id="Layer_1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
  y="0px" width="22px" height="22px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
xml:space="preserve">

但仍然没有运气.在我的CSS文件img中没有设置宽度或高度,所以我认为它与SVG有关.

Answer 1

1)您的过滤区域可能太小.您可以放大默认值(尽管默认值:( - 10%, - 10%, - 120%,120%)通常足以用于正常的阴影效果.)

2)另外 - 正如罗伯特提到的那样 - 你的最终过滤器没有正确接线.

这是一个似乎一贯跨浏览器工作的版本 - 夸张,所以你可以清楚地看到.

  <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="2" />
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="5"/> 
    <feColorMatrix in="the-shadow" result="color-out" type="matrix"
      values="0 0 0 0   0
              0 0 0 0   0 
              0 0 0 0   0 
              0 0 0 .5 0"/>
    <feBlend in="SourceGraphic" in2="color-out" mode="normal"/>
  </filter>
</defs>