2

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

4

2 回答 2

1

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

于 2013-02-13T13:09:34.577 回答
0

最好将“结果”和“输入”明确添加到您的过滤器中，这样您就可以跟踪什么是什么。这就是让你在这里绊倒的原因。就目前而言，您有两个以 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>
于 2013-02-23T01:06:02.203 回答