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

【问题标题】：Why CSS and SVG radial gradients do not match?为什么 CSS 和 SVG 径向渐变不匹配？
【发布时间】：2014-05-19 21:24:32
【问题描述】：

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

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

【问题讨论】：

有趣的是，我测试的浏览器（Ch、FF、O、IE）在这些差异上几乎是一致的，所以我猜它可能在规范上略有不同。
要查看的相关规范是w3.org/TR/SVG11/pservers.html#RadialGradients 和w3.org/TR/css3-images/#radial-gradients

标签： css svg radial-gradients

【解决方案1】：

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

【讨论】：

【解决方案2】：

CSS 渐变从中心延伸到侧面。 SVG 渐变从中心延伸到角。所以 SVG 渐变半径是 CSS 渐变半径的 1.414 (√2) 倍。

我还没有找到使 SVG 渐变从侧面而不是角落调整大小的方法。因此，为了匹配 50% 的 CSS 渐变色标，我手动计算了 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/

... 在 Google Chrome 中，渐变的渲染方式仍然存在细微差别（大概没有dithering）。在 Firefox 和 Safari 中，两种渐变看起来都很平滑。

【讨论】：

这更多是关于渐变的大小是相对于边还是角的问题，这就是为什么您发现自己使用勾股定理来确定如何调整色标的原因。
我几乎接受了这个答案（它确实解决了一半的问题）但真正的问题仍然存在......这里的 css 更流畅......
这是 Chrome 的问题（大概没有抖动）。不幸的是，您对此无能为力。我相应地编辑了我的答案。
抖动……这就是神奇的词！你让我塞巴斯蒂安！ ;D