Почему эта комбинация координат радиантного заполнения Рафаэля терпит неудачу?

Используя Рафаэля, я заметил, что если я попытался применить радиальную заливку к кругу, используя 0,9 и 0,2 в качестве радиальных точек фокусировки, у меня не получилось нарисовать радиальную заливку.

paper.circle(50,300,20).attr({"fill":"r(0.5,0.1)#f00-000"});
paper.circle(100,300,20).attr({"fill":"r(0.9,0.2)#f00-000"}); // <-- fails
paper.circle(150,300,20).attr({"fill":"r(0.9,0.3)#f00-000"});

Здесь я установил скрипку и сделал сетку 10x10, и (0.9,0.2) - единственная, которая не удалось.

Я хочу понять почему. http://jsfiddle.net/ENMry/2/


svg google-chrome radial-gradients webkit raphael
person mainstreetmark    schedule 08.11.2013    source источник
comment
Как это не удается? Мне кажется, что это нормально в Firefox.   -  person Robert Longson    schedule 14.11.2013
comment
Ах, интересно. В Chrome (31) одна из сфер в сетке, а также центральная внизу не имеют никакой заливки. Я вижу, что это работает и в Safari.   -  person mainstreetmark    schedule 18.11.2013

Ответы (1)


arrow_upward
1
arrow_downward

Это проблема не библиотеки Рафаэля, а скорее всего рендеринга JS SVG. Вы можете повторить ту же проблему, используя только разметку JavaScript и SVG без библиотеки Raphael. См. пример на jsBin

Я изменил ваш пример, чтобы он имел большие круги с сеткой 11x11 (от 0,0 до 1,0), а также поместил одну строку отдельно вверху, чтобы показать, как перемещается точка фокусировки. См. Пример на jsBin.

Используя консоль браузера (ctrl + shift + J в Chrome), вы можете проверять элементы DOM. Для нашего белого элемента (2-й в первой строке) установлена ​​следующая разметка:

<radialGradient id="2r_0.1_0.2__f00-_000" fx="0.1" fy="0.2" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
    <stop offset="0%" stop-color="#ff0000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
    <stop offset="100%" stop-color="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop>
</radialGradient>

<circle cx="175" cy="50" r="30" fill="url(#2r_0.1_0.2__f00-_000)" stroke="#000" opacity="1" fill-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;">
</circle>

В этом руководстве по градиентам MDN объясняется, как работает радиальный градиент.

Если я правильно понимаю, радиальный градиент определяется 5 данными и разметкой stop:

  • где точка излучения: например cx="0.25" cy="0.25" r="0.25". Они определяют положение и где заканчивается градиент. Если не установлено, cx и cy находятся в середине элемента (то же, что и значение 0,5 или 50%; cx=0, cy=0 означает верхний левый угол), r равно 1 или 100%. В нашем случае излучение начинается в середине круга и заканчивается на его краю.
  • stop разметка определяет, какие цвета должны быть в определенной позиции.
  • где - фокусная (фокусная) точка: в нашем случае fx="0.1" fy="0.2". Стандарт гласит: fx и fy определяют фокус радиального градиента. Градиент будет нарисован таким образом, что граница градиента 0% будет сопоставлена ​​(fx, fy).

Если вы представите прямоугольник вокруг круга, fx="0.1" fy="0.2" находится где-то в левом верхнем углу. В этом руководстве говорится: Если точка фокусировки перемещена за пределы круга, описанного ранее, невозможно правильно отобразить градиент, поэтому точка будет считаться находящейся на краю круга. Если точка фокусировки вообще не указана, предполагается, что она находится в том же месте, что и центральная точка.

Первый кружок в верхнем ряду имеет fx="0.0" fy="0.2" и находится вне круга излучения. Итак, место поставлено по краю: слева, посередине.

У "проблемного" белого круга есть fx="0.1" fy="0.2", и эта точка находится точно на краю (излучения) круга. И рендеринг как-то не получается. То же самое для fx="0.9" fy="0.2", fx="0.2" fy="0.1" и fx="0.2" fy="0.9".

Следуя той же логике, у нас должно получиться еще 4 белых круга:

fx="0.8" fy="0.1"
fx="0.8" fy="0.9"
fx="0.1" fy="0.8"
fx="0.9" fy="0.8"

но они отображаются правильно.

Вы можете легко увидеть все эти «проблемные» точки, если нарисуете круг и сетку.

Итак, я не знаю, это проблема округления или что-то еще. В любом случае, это может быть ошибка. Я нашел один, связанный с радиальным рендерингом, но это не совсем то тем же.

Кстати, FireFox и IE10 отображают его без проблем.

Примечание. Я отправляю сообщение о проблеме 322487

person Anto Jurković    schedule 22.11.2013
comment
Я подозреваю, что это необычная ошибка округления. Мне удалось избежать этого, представив точку фокусировки как строку с 1 десятичным знаком (точно так же, как в вашей таблице fx / fy выше). - person mainstreetmark; 03.12.2013