CODEWITHSUNDEEP
textsvgfilter
Alexxx
Alexxx

Reputation: 786

SVG gaussian blur on text under Google Chrome

I'm trying to make a text effect with a drop shadow gaussian blur on my svg. Under firefox it's look good, but under chrome it's horrible, as you can see below.

enter image description here

What is strange is taht when zooming (ctrl + mousewheel) at the max level possible, it's suddenly looks good, but at intermediate zooming level, it's still horrible.

My code to generate this example is:

<html>
<head>
</head>
<body>
<svg width="200px" heigth="200px">
    <filter id="dropshadow" height="130%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
        <feOffset dx="2" dy="2" result="offsetblur" />
        <feMerge>
            <feMergeNode />
            <feMergeNode in="SourceGraphic" />
        </feMerge>
    </filter>
    <text x="50" y="50" style="filter:url(#dropshadow)">This is a test</text>
</svg>
</body>
</html>

I've taken the drop shadow code from this question.

Note that I'm using one of the last version of Firefox (33.1) and of Chrome (Version 38.0.2125.122 m).

Upvotes: 1

Views: 429

Answers (1)

r3mainer
r3mainer

Reputation: 24587

This isn't correct behaviour at all. It looks like Chrome is failing to render the alpha channel correctly for text at small font sizes.

This is what I get if I just extract the alpha channel from text sized at 18, 36 and 72pt:

bad chrome

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
  <filter id="f" width="200%" height="200%">
    <feMerge>
      <feMergeNode in="SourceAlpha" />
    </feMerge>
  </filter>
  </defs>
  <rect x="0" y="0" width="200" height="200" fill="#eee" />
  <text font-size="18" x="5" y="25" style="filter:url(#f)">Small</text>
  <text font-size="36" x="5" y="75" style="filter:url(#f)">Medium</text>
  <text font-size="72" x="5" y="165" style="filter:url(#f)">Large</text>
</svg>

EDIT: This isn't an answer, so I've flagged as community wiki.

Upvotes: 1

Related Questions