FireFox显示我所期望的颜色:每个停止颜色之间具有锐利边缘的纯色块。但是,即使偏移之间几乎没有间隙,Chrome也会在停止颜色之间出现模糊边缘,无论使用小数(0到1)还是百分比(0% - 100%)。
这是我必须要接受的东西,还是有办法让Chrome表现出我的期望?
示例已简化,将用作全屏背景:
<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 100% 100%'>
<defs>
<linearGradient id='a' x1='0' x2='0' y1='0' y2='100%' gradientUnits='userSpaceOnUse'>
<stop offset='0.1999' stop-color='#F00'/>
<stop offset='0.2' stop-color='#FFF'/>
<stop offset='0.4999' stop-color='#FFF'/>
<stop offset='0.5' stop-color='#b2b2b2'/>
<stop offset='0.8' stop-color='#b2b2b2'/>
<stop offset='0.8' stop-color='#000'/>
</linearGradient>
</defs>
<rect fill='url(#a)' width='100%' height='100%'/>
</svg>