Diary SiteMap RecentChanges About Contact 2013-02 Calendar

Search:

Matching Pages:

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

Show Google +1

Comments


Please make sure you contribute only your own work, or work licensed under the GNU Free Documentation License. See Info for text formatting rules. You can edit the comment page if you need to fix typos. You can subscribe to new comments by email without leaving a comment.

A carefully selected set of emoji for you to copy and paste: • ✕ ✓ ✝ ☠ ☢ ☣ ⚛ ☭ ☮ ☯ ⚒ ⚓ ⚔⚙ ★ ☆ ✨ 🌟 🐣 🐤 🐥 🐦 🐧 🐨 🐷 🐻 🐼 🐢 🐝 🐛 🐙 🐒 🐌 🐋 👑 ✊ 👊 ✌ 👋 👌 👍 👎 👏 👸 🍵 🍷 👹 👺 👻 👽 👾 👿 💀 ❤ ❦ ♥ 💔 📓 📖 📜 📝 🔒 🔓 🔔 🔥 🔨 🔪 🔫 🔮 😁 😂 😃 😄 😅 😆 😉 😊 😋 😌 😍 😏 😒 😓 😔 😖 😘 😚 😜 😝 😞 😠 😡 😢 😣 😤 😥 😨 😩 😪 😫 😭 😰 😱 😲 😳 😵 😷 😸 😹 😺 😻 😼 😽 😾 😿 🙀 🙇 🙈 🙉 🙊 🚶 🚲 🚀 🚽

To save this page you must answer this question:

Please say HELLO.