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

Question

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

笔画演示

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%);

Answer 1

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

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

(CSS gradient radius / SVG gradient radius / 2)或(1 / 1.414 / 2).

这意味着: <stop offset="0.3536" stop-color="#00f"/>

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

...在谷歌浏览器中,渐变的渲染方式仍然存在细微差别(可能没有抖动).在Firefox和Safari中,两个渐变看起来都很流畅.