7

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

演示

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

2 回答 2

6

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/


…在谷歌浏览器中，渐变的渲染方式仍然存在细微差别（大概没有抖动）。在 Firefox 和 Safari 中，两种渐变看起来都很平滑。

于 2014-04-07T16:06:23.557 回答
0

当您将径向渐变半径定义为“100%”时，这意味着在 objectBoundingBox 单位中为 100%：这是边界框的高度和宽度的平方和的平方根的百分比。渐变停止点已定义相对于这个尺寸。

于 2014-04-07T20:31:41.883 回答