Почему радиальные градиенты CSS и SVG не совпадают?

результат градиентов не должен быть одинаковым? Почему они такие разные... Я что-то упускаю?

работ

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%);
7
css radial-gradients svg

2 ответов

градиент CSS проходит от центра к боковая. Градиент SVG проходит от центра к угол. Таким образом, радиус градиента SVG в 1,414 (√2) раза больше радиуса градиента CSS.

Я не нашел способ сделать градиент 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 оба градиента выглядят гладкими.

6

когда вы определяете радиус радиального градиента как " 100%", это означает 100% в единицах objectBoundingBox: которые являются %'s квадратный корень из суммы квадратов высоты и ширины границ окна. Градиентные остановки определяются относительно этого размера.

0