SVGで差し込み影を作成する方法

Question

CSS3 にインライン ボックス シャドウがあるのと同じように、インライン シャドウのあるボックスを作成する必要があります。私がこれまでに見つけたのは、feGaussianBlur を使用したフィルターですが、問題は、ボックスの外側にも影を追加してしまうことであり、これは望ましくありません。これは私がこれまでに得たコードです:

リーリー

デモを作成し、このコードを目的の CSS 制作結果と比較しました。このフィルターは長方形だけでなく、台形やより複雑な多角形にも作用します。

RadialGradient を使用してみましたが、グラデーションが円形になるため、これも良くありません。

Answer 1

私が見つけた 実験に主に基づいて 、これが私が思いついたものです:

リーリー

パディングを表示したい場合は、最後の のコメントを解除します。残念ながら、fill="transparent" はフィルターに使用可能なアルファを与えず、シャドウも生成しません。

Answer 2

ソリッドパディングがある場合は、

を追加できます。 リーリー

フィルターの終わりに向かって、ブラーを SourceGraphic の形状にクリップします。シェイプは透明なので、さらに作業を行う必要があります。正しい構成を選択できるように元の形状に半透明の塗りつぶしを使用し、最終操作で塗りつぶしをゼロにするために feFuncA を使用することをお勧めします。これは非常に複雑であることがわかります。しかし、これはどんな実線の形状にも機能する解決策です

リーリー

これは私の fiddle ブランチです: http://jsfiddle.net/kkPM4/