SVG：阴影的颜色

Posted 2023-03-06

【中文标题】SVG：阴影的颜色

【英文标题】：SVG: color of the shadow

【发布时间】：2011-12-19 09:28:27

【问题描述】：

我想用 SVG 写一个带有红色阴影的简单矩形。 我有一个简单的过滤器：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  >
  <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"   fill-opacity="0.85" filter="url(#dropshadow)">
</svg>

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

【问题讨论】：

dev.opera.com/articles/view/svg-evolution-3-applying-polish/… 您可以将原始滤镜图像与真实图像叠加，以实现它。我就是这样用的。

【参考方案1】：

对于那些寻找通用解决方案的人来说，这对我来说在一个元素内有用：

<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"/>

【讨论】：

我用这个 feFlood 和 fecomposite 得到了很好的结果

【参考方案2】：

您提供了无效的 SVG - 您需要关闭您的 <rect> 元素。

您的示例（已修复）在 Chrome 中为我显示了一个红色阴影。这是我使用 Chrome v15 时的 this URL 外观：

您在哪个操作系统/浏览器/版本上看到了不同的结果？

编辑：在 Firefox v7 中我看到所有灰度，而在 Safari v5 中我根本看不到阴影效果。您的回答很可能只是您在不完全支持 SVG 过滤器规范的浏览器/版本中进行测试。

【讨论】：

Safari 直到版本 6 才支持过滤器，请参阅 caniuse.com/#feat=svg-filters。

由于w3.org/TR/SVG11/filters.html#SourceAlpha，我假设它不会产生红色。 SourceAlpha -> 隐式黑色 (#000) + alpha。如果您将in="SourceAlpha" 替换为in="SourceGraphic"，它确实可以在Opera 和Chrome 中使用。

Firefox 的问题在于它曾经有一个错误，它无法处理具有单个值的离散 feFunc。它可以通过使用两个值来解决，例如。表值=“1 1”。大约 18 个月前已修复此问题。