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 グラデーションのサイズを角ではなく側面から変更する方法が見つかりませんでした。したがって、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/


… Google Chrome では、グラデーションのレンダリング方法にまだ小さな違いがあります (おそらくディザリングはありません)。Firefox と Safari では、どちらのグラデーションも滑らかに見えます。

于 2014-04-07T16:06:23.557 に答える
0

放射状グラデーション半径を「100%」と定義すると、これは objectBoundingBox 単位で 100% を意味します。これは、バウンディング ボックスの高さと幅の平方和の平方根の%です。グラデーション ストップが定義されます。このサイズに比べて。

于 2014-04-07T20:31:41.883 に答える