html - Prevent inline SVG pixel snapping in chrome -
i have svg i'm using show wavy edge on div. svg needs display same div due sub pixel snapping/rounding alignment varies resize. firefox seems work fine. see demo:
https://jsfiddle.net/meojwnlv/
when using svg background image background-size:100% auto;
scales correctly want able change color need inline.
how can prevent happening? thanks
it looks chrome snapping height and width of svg object integer values. since svg's width larger height, every 1px change in height of svg causing width change 10px.
viewbox="20 20 900 66"
there's easy workaround — make svg taller:
viewbox="20 20 900 500"
Comments
Post a Comment