Вопрос по svg – Переход размера шрифта на Chrome после увеличения

3

Еще один вопрос о переходах в стиле SVG ... :)

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

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

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

Ваш Ответ

2   ответа
4

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"
  );
});

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

Опять мойоблако слов опыт пригодился. :)

Это разочаровывает полным масштабом страницы в WebKit. Я использую зум все время, особенно сейчас, когда дисплеи стали такими большими. Ваш обходной путь работает отлично, хотя, так что спасибо за это. Scott Cameron
1

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

Похожие вопросы