SVG：阴影的颜色

Question

我想在SVG中绘制一个简单的矩形，带有红色阴影。 我有一个简单的滤镜：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400">
  <title>svg arrow with dropshadow</title>
  <desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc>
  <defs>
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
     <feComponentTransfer in="SourceAlpha">
         <feFuncR type="discrete" tableValues="1"/>
         <feFuncG type="discrete" tableValues="0"/>
         <feFuncB type="discrete" tableValues="0"/>
     </feComponentTransfer>
     <feGaussianBlur stdDeviation="2"/>
     <feOffset dx="0" dy="0" result="shadow"/>
     <feComposite in="SourceGraphic" in2="shadow" operator="over"/>
   </filter>
  </defs>
  <rect rx="2" ry="2" fill="rgb(255,255,255)" x="5.25" y="5.25" width="141" height="50" fill-opacity="0.85" filter="url(#dropshadow)">
</svg>

在这个例子中，为什么阴影颜色不是红色？我的哪里做错了？

- Oleg Ignatov

---

你可以将基本的过滤图像与真实图像叠加使用，我就是用这种方法。 - Kris

Answer 1

对于那些寻求一般解决方案的人，这个方法在一个 <script> 元素内对我有效：

<feGaussianBlur in="SourceAlpha" stdDeviation="1.7" result="blur"/>
<feOffset in="blur" dx="3" dy="3" result="offsetBlur"/>
<feFlood flood-color="#3D4574" flood-opacity="0.5" result="offsetColor"/>
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>

- Joe W

---

我使用feFlood和fecomposite得到了很好的结果。 - crapthings

Answer 2

1. 您提供的SVG无效 - 您需要关闭<rect>元素。
2. 您的示例（已修复）在Chrome中显示为红色阴影。这是我在Chrome v15下看到的此URL的情况：

   

您使用的操作系统/浏览器/版本号与其他结果有何不同？

编辑：在Firefox v7中，我看到所有的灰度，在Safari v5中，我根本看不到阴影效果。因此，您的答案很可能是您正在测试支持SVG滤镜规范不完整的浏览器/版本。

- Phrogz

---

Safari在6版本之前不支持滤镜功能，请参考http://caniuse.com/#feat=svg-filters。 - Erik Dahlström

我假设它不会产生红色是由于http://www.w3.org/TR/SVG11/filters.html#SourceAlpha 。SourceAlpha->隐式黑色(#000) + alpha。如果用in="SourceGraphic"替换in="SourceAlpha"，在Opera和Chrome中可以工作。 - Erik Dahlström

Firefox 的问题在于它曾经存在一个 bug，即无法处理单个值的离散 feFunc。可以通过使用两个值（例如 tableValues="1 1"）来解决此问题。这个 bug 大约在 18 个月前得到了修复。 - Michael Mullany