html - SVG rendering on android browsers -


i'm having issue long time , can't find solution.

i have svg image css background on top left corner of div. svg graphics should seamlessly merge on div background, instead produces thin borders around rendered graphics. works fine on desktop browsers (tested on chrome, firefox , opera) fails on android stock browser, chrome android, , firefox android.

here little test case : http://jsfiddle.net/sdjha/1/ (the svg code on javascript frame comment)

the css code :

.cont{ background-color : #7ac943; width : 300px; height : 300px; }  .elementone{     background-image: url("data:image/svg+xml;utf8,%3csvg%20version%3d%221.1%22%20id%3d%22layer_1%22%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20x%3d%220px%22%20y%3d%220px%22%20width%3d%22100px%22%20height%3d%22100px%22%20viewbox%3d%220%200%20100%20100%22%20enable-background%3d%22new%200%200%20100%20100%22%20xml%3aspace%3d%22preserve%22%3e%3cpolygon%20fill%3d%22%237ac943%22%20points%3d%22100%2c100%20100%2c0%200%2c100%20%22%2f%3e%3c%2fsvg%3e");     width : 100px; height: 100px;     background-size: 100px 100px;     background-repeat: no-repeat;     background-color : white; } 

the html : <div class="cont"><div class="elementone"></div></div>

it may bug on android svg render engine when calculating subpixels... dont know.

tested on asus transformer , htc one.

any advise ?

thanks !

i'm guessing lines show due compositing of 2 parts onto page. corner opaque , tries cover larger div, , edge anti-aliasing effects.

i think might same effect if svg png of same size, assuming applied in same way.

you use single background svg image traced shape want, in use larger div background image.


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -