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？或者语法有问题吗？

Plus：在所有浏览器中，投影似乎都会在顶部和左侧被剪掉。 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。

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

2 个答案: