渐变的结果应该不一样？
为什么他们如此不同……我错过了什么？
为什么他们如此不同……我错过了什么？
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中,两个渐变看起来都很流畅.
