web-dev-qa-db-ja.com

SVGフィルターでアルファレイヤーの不透明度を下げる方法は？

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％黒から開始して、オブジェクトの周囲のシャドウ効果が十分に明るいようにしたい。

xmlsvgadobe-illustratorsvg-filters
32
ddilsaver

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 。

51
Erik Dahlström

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>
5
Randy Hudson

アルファ値を設定する別の方法は、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フィルタープリミティブがおそらくより良い選択です。

1
Waruyama