Изменение размера шрифта в Chrome после увеличения

Другой вопрос о переходах стиля SVG...:)

На этот раз я пытаюсь переместить размер шрифта на текстовый элемент. Он отлично работает, пока я не увеличу масштаб страницы в Chrome. Как только я это сделаю, кажется, что в начале перехода он устанавливает размер до исходного размера масштабирования, прежде чем перейти к правильному размеру результата. В результате я вижу, что размер шрифта размером меньше на долю секунды, прежде чем увеличиваться.

При масштабировании по умолчанию переход выглядит гладко. Другие браузеры, похоже, не имеют этой проблемы.

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

2 ответа

Это происходит потому, что переходы стиля D3 используют getComputedStyle для извлечения начального значения для интерполяции. Подробнее см. здесь. Когда используется полноэкранное масштабирование WebKit, это приведет к возврату различных начальных значений для перехода. Это несоответствие ограничено некоторыми случаями, включая font-size, поэтому вы, вероятно, не увидите его в другом месте.

Фактически, после .style("font-size", A), получение с помощью .style("font-size") не гарантирует возврата значения A, которое было установлено при использовании полностраничного масштабирования.

Я использовал следующее обходное решение для этого в прошлом:

.styleTween("font-size", function(d) {
 return d3.interpolate(
 this.style.getPropertyValue("font-size"),
 d.size + "px"
 );
});

Это переопределяет использование D3 getComputedStyle и напрямую извлекает текущий стиль font-size (и предполагает, что уже установлен font-size, например, в вашем выборе .enter()).

Опять же, мне понравилось word cloud.:)


Масштабирование страницы браузера является ошибкой в ​​сочетании с SVG. Вы можете исправить уровень масштабирования с помощью CSS, с чем-то вроде * { zoom: 1; }, но это вызывает другие неудобства для пользователей. Вы можете попытаться обход ошибки в JavaScript, но я думаю, что это будет много работы.

licensed under cc by-sa 3.0 with attribution.