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.
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:
<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
Post a Comment