为什么CSS和SVG径向渐变不匹配？

渐变的结果应该不一样？
为什么他们如此不同……我错过了什么？

DEMOSTRATION

SVG

<radialGradient cx="50%" cy="50%" r="100%" spreadMethod="pad" id="radGrad">
  <stop offset="0" stop-color="#fff"/>
  <stop offset="0.5" stop-color="#00f"/>
</radialGradient>

CSS

background: radial-gradient(ellipse at center,#fff 0%,#00f 50%);

解决方法

CSS渐变从中心到侧面. SVG梯度从中心到角落.因此SVG梯度半径比CSS梯度半径大1.414(√2)倍.

我还没有找到一种方法来使SVG渐变的大小从侧面而不是角落.因此,为了将CSS渐变停止与50％匹配,我手动计算了SVG渐变停止：

(CSS梯度半径/ SVG梯度半径/ 2)或(1 / 1.414 / 2).

这意味着：< stop offset =“0.3536”stop-color =“#00f”/>

http://codepen.io/anon/pen/emLqy/

…在谷歌浏览器中,渐变的渲染方式仍然存在细微的差异(大概没有dithering).在Firefox和Safari中,两个渐变看起来都很流畅.