2013-02-28 2 views
3

컬러지도에서 읽을 수 있도록 흰색 외부 광선이있는 검정색 텍스트가 필요합니다. 이것은 내가하는 데 사용되는 것입니다 :SVG 필터 feGaussianBlur가 필요합니다.

<defs> 
    <filter id="label-glow"> 
    <feGaussianBlur stdDeviation="1" /> 
    </filter> 
</defs> 
<text stroke="white" stroke-width="5" filter="url(#label-glow)">Harald's Repose</text> 
<text>Harald's Repose</text> 

내가 텍스트 요소를 중복되지 않도록하고 싶습니다, 그래서, feComposite 텍스트의 흰색 사본을 만들 흰색 사각형을 만들려면 feGaussianBlur에를 feFlood를 사용하기로 결정 블러를 생성 한 다음 feComposite를 사용하여 원본 텍스트를 추가하십시오. 불행히도, 결과적인 외부 발광은 매우 약합니다. feComposite를 몇 번 반복하면 도움이된다는 것을 알았습니다. 더 나은 해결책이있을 것이라고 확신합니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

<defs> 
    <filter id="label-glow"> 
<feFlood flood-color="white"/> 
<feComposite in2="SourceGraphic" operator="in"/> 
<feGaussianBlur stdDeviation="2"/> 
<feComposite operator="over"/> 
<feComposite operator="over"/> 
<feComposite operator="over"/> 
<feComposite operator="over"/> 
<feComposite in="SourceGraphic"/> 
    </filter> 
</defs> 
<text filter="url(#label-glow)">Harald's Repose</text> 

답변

3

알파 채널에서 feComponentTransfer를 사용하여 빛의 불투명도를 전화 접속하는 것보다 조금 더 우아한 방법이 있습니다.

<filter id="label-glow"> 
<feFlood flood-color="white"/> 
<feComposite in2="SourceGraphic" operator="in"/> 
<feGaussianBlur stdDeviation="2"/> 
<feComponentTransfer> 
    <feFuncA type="gamma" exponent=".5" amplitude="2"/> 
     </feComponentTransfer> 
<feComposite in="SourceGraphic"/> 
    </filter> 

진폭을 변경하여 흰색의 평균 밝기를 조정할 수 있으며 지수를 변경하여 밝기 감소를 조정할 수 있습니다.

관련 문제