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>

しかし、最後のフィルター（2番目のfeComponentTransfer）のみを使用することになりました。両方のフィルターに適用するアイデアはありますか？

feBlendがドロップシャドウを作成するまでの最初のfeComponentTransfer、および2番目のfeComponentTransferは、画像自体（シャドウではない）の明るさを設定することです。

4

2 に答える 2

1

おそらく、feComponentTransfer の in は、元の入力である SourceGraphic ではなく、blurOut である必要があります。

于 2013-02-13T13:09:34.577 に答える
0

何が何を供給しているかを追跡できるように、フィルターに「結果」と「入力」を明示的に追加するのが常に最善です。これがあなたをここにつまずかせたものです。現状では、blurOutと名前のない最終結果で終わる2つのフィルターチェーンがあります。ソースグラフィックを個別に調整するために操作の順序をやり直してから、シャドウの上に合成する必要があります。以下のコード。そしてまた...

いくつかのクリーンアップ：

  1. フィルタに寸法を設定しない場合は、フィルタの単位を設定する必要はありません。
  2. feComponentTransferのceilings値は1を超え、floors値は0未満であるため、3-は1になる可能性があります。
  3. これはmozillaのバグであり、配列に値が1つしかない場合は適切な色変換ができません。値を2回繰り返す必要があり、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 に答える