Diary SiteMap RecentChanges About Contact Calendar

Search:

Matching Pages:

Page Collection for ^2013-02-27

2013-02-27 SVG Filters

I need help with SVG filters. This question is also on StackOverflow.

This is what I want to achieve:

https://farm9.staticflickr.com/8507/8511938807_5a793d726a.jpg

Previously, I’d duplicate the text element, make the background white, and blur it:

  <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’m trying not to duplicate the text element. Here’s how to do it using filters:

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

Unfortunately the output of the Gaussian blur is very weak which is why I need to overlay it multiple times. What am I missing?

Update: As I’ve been experimenting with it, I’ve decided to drop filters altogether. When using Firefox and printing the map to PDF, the filters all result in bitmap elements that don’t scale well.

Tags: RSS RSS

Add Comment