SVG 投影 - 不透明度、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>

Answer 2

您的 feBlend 不采用颜色输出的 feColorMatrix 的输出，它采用 feOffset 的输出，因此 feColorMatrix 被忽略。