Переход непрозрачности текста svg

Question

У кого-нибудь были проблемы с переходом непрозрачности текстового элемента SVG? Я использую как стиль заливки-непрозрачности, так и стиль непрозрачности штриховки, чтобы угаснуть текстовые элементы и исчезнуть. Он отлично работает в большинстве браузеров, но вообще не переходит в Chrome на Mac - текст просто появляется и выворачивается сразу.

Я попытался установить атрибут «непрозрачность» в дополнение к заполнению непрозрачности и непрозрачности штриховки, и это, похоже, заставляет его работать, хотя теперь я вижу странный эффект мерцания непосредственно перед и после перехода. Это похоже на то, что он устанавливает прозрачность = 1 в течение секунды, прежде чем он установит ее на 0, а затем перейдет к 1.

Еще одна интересная вещь: другие фигуры (круг, прямоугольник) исчезают и исчезают просто отлично с почти одинаковыми код, который я использую с текстом.

Это кажется странным с конкретным браузером, но мне интересно узнать о чужих опытах с непрозрачностью текстовых элементов. Есть ли уловки, чтобы заставить его вести себя последовательно?

Answer 1

Какую версию Chrome вы используете? Я заметил bug в Chrome dev некоторое время назад при работе с word cloud, но, похоже, он исправлен с 19.0.1077.3 dev. Возможно, исправление еще не дошло до вашей конкретной версии?

В моем случае, используя opacity, проблема временно устранена. Эффект мерцания может быть вызван тем, что нотация экспоненты не анализируется для очень малых чисел; вы можете попробовать использовать 1e-6 вместо 0, чтобы обойти это.

Answer 2

Для анимации, которую я сделал несколько месяцев назад, я переключил стиль и использовал webkit-transition, в сочетании с visibility: hidden. Кажется, это хорошо работает. Если это не сработает, вы можете попробовать перейти к непрозрачности вблизи нуля.