避免SVG线性渐变停止颜色偏移(Chrome)之间的模糊

时间:2018-04-01 23:12:36

标签: svg

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>

0 个答案:

没有答案