SVGとしてロゴを作成しようとしています。 Illustratorからファイルをエクスポートしました。ロゴにはドロップシャドウが付いています。 XMLを調べていたところ、フィルターノードが見つかりました。
<filter filterUnits="objectBoundingBox" width="200%" height="160%" x="-15%" y="-15%" id="AI_Shadow_2">
<feGaussianBlur stdDeviation="2" result="blur" in="SourceAlpha"></feGaussianBlur>
<feOffset result="offsetBlurredAlpha" in="blur" dy="0" dx="0"></feOffset>
<feMerge>
<feMergeNode in="offsetBlurredAlpha"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
生成されたoffsetBlurredAlphaのアルファを変更する方法はありますか?純粋な黒から開始したくない50%黒から開始して、オブジェクトの周囲のシャドウ効果が十分に明るいようにしたい。
1つの方法は、次のようにfeComponentTransfer
フィルタープリミティブを追加することです。
<filter id="dropshadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2"/>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
実際の例を見ることができます here 。
1つの方法は、単にopacity: 0.5
を使用することです。これを行うには、ドロップシャドウを元のソースとマージするフィルターを作成する代わりに、フィルターを作成してonlyドロップシャドウを作成し、ソースを参照する<use>
タグに適用します。形状。
このアプローチには他にも利点があります。たとえば、影だけに個別のスタイルを適用できるようになりました。
#arrow-shadow {
opacity:0.5;
}
g:hover #arrow-shadow {
opacity:0.7;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 200 200" width="400px">
<defs>
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="2" result="offsetblur" />
</filter>
</defs>
<g fill="#EEE">
<use id="arrow-shadow" xlink:href="#polygon" filter="url(#dropshadow)"></use>
<polygon id="polygon"
points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056"/>
</g>
</svg>
アルファ値を設定する別の方法は、feColorMatrix
フィルタープリミティブを使用することです。これを使用して、アルファ値とドロップシャドウの色を同時に設定できます。
以下のフィルターは、アルファ値に0.2
を乗算し、同時にドロップシャドウの色を赤に設定します。
<filter id="dropshadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
<feOffset dx="2" dy="2"/>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
しかし、アルファ値のみを変更する必要がある場合は、feComponentTransfer
フィルタープリミティブがおそらくより良い選択です。