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

Question

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

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

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/

...在谷歌浏览器中，渐变的呈现方式仍然存在一些差异（可能不是dithering）。在Firefox和Safari中，两个渐变看起来都很流畅。

Answer 2

当您将径向渐变半径定义为“100％”时，这意味着objectBoundingBox单位为100％：这是the square root of the sum of the squares of the height and width of your bounding box的％。渐变停止是相对于此大小定义的。