{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 冷血范 的问题《Round-off error with SVG linear gradient in Chrome》','https://www.manongdao.com/q-807975.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm seeing some issues recently with Chrome to render SVG linear gradient. Have a look at this SVG below:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
<svg>
<g>
<linearGradient id="linearGradient" gradientUnits="userSpaceOnUse" x1="79px" x2="706px" y1="0" y2="0">
<stop class="" offset="54.54545454545455%" style="stop-color: red;"></stop>
<stop class="" offset="63.63636363636364%" style="stop-color: red;"></stop>
<stop class="" offset="63.63636363636364%" style="stop-color: green;"></stop>
<stop class="" offset="72.72727272727273%" style="stop-color: green;"></stop>
</linearGradient>
<path d="M79,241L136,196L193,194L250,212L307,159L364,152L421,339L478,46L535,205L592,134L649,215L706,74"
style="opacity: 1; fill: none; stroke: url(#linearGradient); stroke-width: 2px;">
</path>
</g>
</svg>
</body>
</html>
After loading this html in Chrome(my version is 23.0.1271.64), it is very easy to see a clear 2px error of the linear gradient in the peek, which shows some green color in the left side line segment. In both IE 9 and latest Firefox, the svg is rendered correctly. I think it maybe a bug of Chrome or WebKit. Does anyone know how to workaround? Thanks!