Image 使用2个过滤器创建SVG元素

我有一个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是设置图像本身的亮度（而不是阴影）

大概feComponentTransfer的输入应该是模糊的，而不是原始输入的源图形。

最好是明确地将“result”和“in”添加到过滤器中，以便跟踪输入的内容。这就是把你绊倒在这里的原因。目前，您有两个以blurOut和未命名最终结果结尾的过滤器链。您需要重做操作顺序以单独调整sourcegraphic，然后在阴影顶部合成它。代码如下。而且

一些清理工作：

如果不在过滤器上设置尺寸，则无需设置过滤器单位

FEComponent将天花板值传递到1以上，将楼板值传递到0以下，以便3-可以是1

这是mozilla中的一个bug，当数组中只有一个值时，它不会给你一个正确的颜色转换-你应该重复该值两次，现在在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>

那么它一定是一个webkit错误，它给了您一个值的非身份转换。我已经阅读了几次规范的这一部分，但不知道一个值会发生什么。我刚刚完成了规范中的算法，一个值是有效的，所以这确实是一个Firefox错误。规范中说-对于输入值C，其中COk。登记为Bug 845985你试过feMerge吗？它的唯一工作是组合过滤器。