문제

I want to have a black text with a white outer glow in order to be readable on a colored map. This is what I used to do:

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

I'd like to avoid duplicating the text element, so I decided to use feFlood to create a white rectangle, feComposite to create a white copy of the text, feGaussianBlur to create the blur, and then another feComposite to add the original text on top of it all. Unfortunately, the resulting outer glow is very weak. I found that repeating the feComposite a few times helps. I'm sure there's a better solution. What am I doing wrong?

<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>
도움이 되었습니까?

해결책

A slightly more elegant way is to dial up the opacity on your glow using a feComponentTransfer on the alpha channel.

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

You can adjust the average intensity of the white by changing amplitude and you can adjust the intensity falloff by changing exponent.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top