有一个使用 2 个过滤器的 SVG 元素

Question

我有一个 SVGimage 元素，我希望该图像具有使用 feOffset、feGaussianBlur 等的阴影。

同时，我需要设置图像的亮度和对比度，

我尝试了以下代码：

<image x="10" y="100" width="440" height="60" xlink:href="/images/pulpit.jpg" preserveAspectRatio="defer" filter="url(#drop)"></image>
<defs>
<filter id="drop" filterUnits="userSpaceOnUse">
  <feComponentTransfer in="SourceAlpha" result="doo">
    <feFuncR type="discrete" tablevalues="3" />

  </feComponentTransfer>
  <feOffset dx="80" dy="0" result="shadow"  in="doo" />
  <feGaussianBlur stdDeviation="20 0" in="shadow" result="blurOut"/>
  <feBlend in="SourceGraphic" in2="blurOut" />

  <feComponentTransfer in="SourceGraphic">
    <feFuncR type="linear" slope="0.4" />
  </feComponentTransfer>
</filter>
<defs>
</svg>

但它最终只使用了最后一个过滤器（第二个 feComponentTransfer）， 有什么想法可以同时申请这两个过滤器吗？

直到 feBlend 的第一个 feComponentTransfer 是创建一个投影， 第二个feComponentTransfer是设置图像本身的亮度（不是阴影）

Answer 1

大概 feComponentTransfer 的 in 应该是 blurOut 而不是作为原始输入的 SourceGraphic。

Answer 2

最好将“结果”和“输入”明确添加到您的过滤器中，这样您就可以跟踪什么是什么。这就是让你在这里绊倒的原因。就目前而言，您有两个以 blurOut 结尾的过滤器链和一个未命名的最终结果。您需要重做操作顺序以单独调整源图形，然后将其合成到阴影之上。代码如下。还有……

一些清理工作：

1. 如果您不打算在过滤器上设置尺寸，则无需设置过滤器单位。
2. feComponentTransfer 上限值大于 1，楼层值小于 0，因此 3 - 可以是 1。
3. 这是 Mozilla 中的一个错误，当数组中只有一个值时，它不会为您提供正确的颜色转换 - 您应该重复该值两次，现在可以在 firefox 中使用。

工作代码是：

<filter id="drop">
  <feComponentTransfer in="SourceAlpha" result="doo">
    <feFuncR type="discrete" tableValues="1 1" />
  </feComponentTransfer>

  <feOffset dx="80" dy="0"  in="doo" result="shadow"/>
  <feGaussianBlur stdDeviation="20 0" in="shadow" result="blurOut"/>

  <feComponentTransfer in="SourceGraphic" result="unbrightsource">
    <feFuncR type="linear" slope="0.4" />
  </feComponentTransfer>

  <feBlend mode="normal" in="unbrightsource" in2="blurOut" result="final"/>


</filter>