无论背景如何，如何保持 SVG“过滤器：drop-shadow()”的颜色？答案

【问题标题】：How to keep the color of an SVG "filter: drop-shadow()" regardless of the background?无论背景如何，如何保持 SVG“过滤器：drop-shadow()”的颜色？
【发布时间】：2017-08-18 09:15:01
【问题描述】：

我尝试根据https://codepen.io/dudleystorey/pen/EaMQBj 的 CodePen 示例在 SVG 图像周围添加红色阴影。但是，当背景颜色为蓝色时，颜色变为紫色。无论背景颜色或图像是什么，如何保持颜色为红色？任何帮助表示赞赏。

#robbie {
background-color: blue;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: cover;
}
#robbie img {
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";
  filter: url(#drop-shadow);
  -webkit-filter: drop-shadow(0 0 15px rgba(255,0,0,0.9));
  filter: drop-shadow(0 0 15px rgba(255,0,0,0.9));
}

<div id="robbie">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/robby-the-robot.png" alt>
</div>

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
  <feOffset dx="12" dy="12" result="offsetblur"/>
  <feFlood flood-color="rgba(0,0,0,0.5)"/>
  <feComposite in2="offsetblur" operator="in"/>
  <feMerge>
  <feMergeNode/>
  <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</svg>

【问题讨论】：

您的阴影仍然是红色的。但是在蓝色之上显示红色会产生紫色。这不是代码问题，而是颜色问题。
另外，您的阴影的 SVG 版本与 CSS 版本不匹配。尝试更改这些过滤器原语：<feOffset dx="0" dy="0" result="offsetblur"/><feFlood flood-color="rgb(255,0,0)"/>.
如果你想要一个红色的阴影，无论如何。然后你需要有一个没有模糊的纯色阴影。

标签： css svg svg-filters drop-shadow

【解决方案1】：

紫色是由浏览器创建的，它采用逐渐更透明的红色阴影并将其合成在纯蓝色之上。要解决此问题，您需要将阴影更改为纯红色。你不能为此使用 CSS 过滤器，你必须使用 SVG 版本。

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="drop-shadow">
  <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
  <feOffset dx="12" dy="12" result="offsetblur"/>
  <feFlood flood-color="rgba(255,0,0,1)"/>
  <feComposite in2="offsetblur" operator="in"/>
  <feMerge>
  <feMergeNode/>
  <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</svg>

请注意，这只适用于您的来源完全不透明的情况。如果您希望在部分透明的图像周围有一个实心阴影，那么您需要进行额外的操作。

【讨论】：