4

単純なドロップシャドウをSVGファイルに適用したいと思います。これは本当にSVGフィルターへの私の最初の飛び込みであるため、私は立ち往生していて、（おそらく単純な）問題の解決策を見つけることができません：なぜfeColorMatrixシャドウに適用されないのですか？

フィルタは次のとおりです。

<defs>
  <filter id="drop-shadow" filterUnits="userSpaceOnUse" width="120" height="120">
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="1" />
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="1"/> 
    <feColorMatrix in="the-shadow" result="color-out" type="matrix"
      values="0 0 0 0   0
              0 0 0 0   0 
              0 0 0 0   0 
              0 0 0 0.1 0"/>
    <feBlend in="SourceGraphic" in2="the-shadow" mode="normal"/>
  </filter>
</defs>

また、FireFoxが無視する可能性はありfeOffsetますか？または、構文に問題がありますか？

プラス：すべてのブラウザで、ドロップシャドウが上部と左側で切り取られているように見えます。（imgタグ内の）svgは22px x 22pxの大きさで、私はすでにviewBox：を拡大しました

<svg version="1.1" id="Layer_1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
  y="0px" width="22px" height="22px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
xml:space="preserve">

しかし、それでも運はありません。私のCSSファイルでは、img幅や高さが設定されていないので、SVGと関係があると思います。

4

2 に答える 2

6

1）フィルター領域が小さすぎる可能性があります。デフォルト値を拡大することができます（ただし、デフォルト値：（-10％、-10％、120％、120％）は通常、通常のドロップシャドウには十分です）。

2）また、Robertが述べているように、最終的なフィルターが正しく配線されていません。

これは、ブラウザ間で一貫して機能しているように見えるバージョンです。はっきりと見えるように誇張されています。

  <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="2" />
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="5"/> 
    <feColorMatrix in="the-shadow" result="color-out" type="matrix"
      values="0 0 0 0   0
              0 0 0 0   0 
              0 0 0 0   0 
              0 0 0 .5 0"/>
    <feBlend in="SourceGraphic" in2="color-out" mode="normal"/>
  </filter>
</defs>
于 2013-02-01T17:48:32.167 に答える
1

feBlendは、カラーアウトされたfeColorMatrixの出力を取得しません。feOffsetの出力を取得するため、feColorMatrixは無視されます。

于 2013-02-01T17:47:16.793 に答える