Jak obniżyć krycie warstwy alfa w filtrze svg?

Question

Próbuję utworzyć logo jako SVG. Wyeksportowałem plik z programu Illustrator. Logo ma na sobie cień. Szukałem poprzez XML i znalazłem węzeł filtra

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

Czy istnieje sposób, aby zmienić alfa offsetBlurredAlpha wygenerowany? Nie chcę, aby zaczynało się od czystej czerni. Chcę, aby zaczynało się od 50% czerni, aby efekt cienia był wystarczająco jasny wokół obiektu.

Answer 1

Jednym ze sposobów jest dodanie feComponentTransfer filtr prymitywne, tak:

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

Żywy przykład widać here.

Answer 2

Jednym ze sposobów jest po prostu użycie opacity: 0.5. Aby to zrobić, zamiast tworzenia filtru, który łączy cień z oryginalnym źródłem u góry, utwórz filtr dla cieni potomnych i zastosuj go do zmiennej <use>, która odwołuje się do kształtu źródłowego.

Istnieją inne zalety tego podejścia. Na przykład teraz możesz zastosować oddzielną stylizację tylko do cienia.

#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

Alternatywnym sposobem ustawiania wartości alfa stosuje filtr feColorMatrix pierwotnej. Za pomocą tego można ustawić wartość alfa i kolor cienia w tym samym czasie.

Poniższy filtr mnoży wartość alfa przez 0.2 i jednocześnie ustawia kolor cienia na czerwony.

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

Ale jeśli trzeba tylko zmienić wartość Alpha, feComponentTransfer prymitywny filtr jest chyba lepszym wyborem.