Come ridurre l'opacità del livello alfa in un filtro svg?

Question

Sto provando a creare un logo come SVG. Ho esportato il file da Illustrator. Il logo ha un'ombra esterna su di esso. Stavo guardando il codice XML e ho trovato il nodo del filtro

<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> 

C'è un modo per cambiare l'alfa del offsetBlurredAlpha generato? Non voglio che inizi al nero puro. Voglio che inizi al 50% di nero in modo che l'effetto ombra sia abbastanza leggero attorno all'oggetto.

Answer 1

Un modo è quello di aggiungere un filtro feComponentTransfer primitivo, in questo modo:

<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> 

Un esempio può essere visto dal vivo here.

Answer 2

Un modo è utilizzare semplicemente opacity: 0.5. Per fare ciò, invece di creare un filtro che unisce il dropshadow con la fonte originale in cima, crea un filtro per solo l'ombretto e applicalo a un tag <use> che fa riferimento alla forma di origine.

Ci sono altri vantaggi a questo approccio. Ad esempio, ora puoi applicare lo styling separato solo all'ombra.

#arrow-shadow { 
 
\t opacity:0.5; 
 
} 
 
g:hover #arrow-shadow { 
 
\t 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"> 
 
\t <defs> 
 
\t \t <filter id="dropshadow" height="130%"> 
 
\t \t \t <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> 
 
\t \t \t <feOffset dx="2" dy="2" result="offsetblur" /> 
 
\t \t </filter> 
 
\t </defs> 
 
\t <g fill="#EEE"> 
 
\t \t <use id="arrow-shadow" xlink:href="#polygon" filter="url(#dropshadow)"></use> 
 
\t \t <polygon id="polygon" 
 
\t \t \t \t 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"/> 
 
\t \t 
 
\t </g> 
 
</svg>

Answer 3

Un modo alternativo di impostare il valore alfa utilizza il filtro feColorMatrix primitivo. Usando questo puoi impostare il valore alfa e il colore di un'ombra esterna allo stesso tempo.

Il filtro sottostante moltiplica il valore alfa di 0.2 e allo stesso tempo imposta il colore dell'ombra esterna su rosso.

<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> 

Ma se avete solo bisogno di cambiare il valore alfa, il filtro di feComponentTransfer primitiva è probabilmente la scelta migliore.