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），任何适用于过滤器的想法？

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

Answer 1

假设feComponentTransfer的in应该是blurOut而不是SourceGraphic，它是原始输入。

Answer 2

最好明确地将“结果”和“输入”添加到过滤器中，以便您可以跟踪正在进行操作的内容。这就是你在这里绊倒的原因。就目前而言，您有两个以blurOut结束的过滤器链和一个未命名的最终结果。您需要重做操作的顺序以分别调整sourcegraphic，然后将其合成在阴影之上。代码如下。而且......

一些清理：

如果您不打算在过滤器上设置尺寸，则无需设置过滤器单元。
feComponentTransfer ceilings value超过1，floor值低于0，因此3 - 可以是1.
当数组中只有一个值时，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>

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

2 个答案: