SVGドロップシャドウスプレッド

私は（マテリアルデザインエレメントをエミュレートするために）SVGドロップシャドウを操作しようとしています。SVGドロップシャドウスプレッド

要素デザイン内の要素には、高度のレベルに応じてさまざまな値のドロップシャドウが3つ含まれています。私がSVG要素でこれをエミュレートするために見つけた最良の解決策は、CSSフィルタのドロップシャドウを使用することです。ただし、これはスプレッドをサポートしていません。誰かが私に影の広がりを操作させる回避策を知っていますか？私が考えることができる唯一の解決策は、3つの別々の要素を作成することです.1つは各シャドウに対して、もう1つは実際の要素を拡大することです。

出典

2016-03-31 Brad Woods

feComponentTransfer/feFuncAを使用して影の広がりを操作できます。たとえば：

<feGaussianBlur stdDeviation="5"/> 
<feComponentTransfer> 
    <feFuncA type="gamma" exponent="0.5" amplitude="2"/> 
</feComponentTransfer>

私は、有効なSVGフィルターを出力Photoshopのドロップシャドウコントロールを模倣するツールを書いた：あなたはそれを使用する（とソースを参照）することができ、ここで：http://codepen.io/mullany/pen/sJopz

出典

2016-03-31 13:48:04

を私が操作する方法を確認するために、小さなテストを書きましたフィルタのサイズは、私はあなたの操作のために何をするのかわからない。私は、伝達関数がどのように働いているのかを理解することができません。 http://codepen.io/BradLee/pen/mPBVdQ?editors=1100 –

これはfeFuncAの振幅です：tiがどのように拡散するかについてはこちらをご覧ください：http://codepen.io/mullany/pen/RaLrXw –

これはぼかし距離を変更する必要があります。私は影の大きさを変更しようとしています –

SVGドロップシャドウスプレッド

答えて

関連する問題