4

我想对 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 有关。

4

2 回答 2

6

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>
于 2013-02-01T17:48:32.167 回答
1

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

于 2013-02-01T17:47:16.793 回答