SVG gaussian blur on text under Google Chrome -


i'm trying make text effect drop shadow gaussian blur on svg. under firefox it's good, under chrome it's horrible, can see below.

enter image description here

what strange taht when zooming (ctrl + mousewheel) @ max level possible, it's looks good, @ intermediate zooming level, it's still horrible.

my code generate 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 test</text> </svg> </body> </html> 

i've taken drop shadow code this question.

note i'm using 1 of last version of firefox (33.1) , of chrome (version 38.0.2125.122 m).

this isn't correct behaviour @ all. looks chrome failing render alpha channel correctly text @ small font sizes.

this if extract alpha channel text sized @ 18, 36 , 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: isn't answer, i've flagged community wiki.


Comments

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -