Артефакты с текстовой анимацией SVG (CSS3)

Я испытываю артефакты для текстовой анимации/масштабирования в большинстве современных браузеров: Chrome 29, IE10, Safari 5.1 (Windows), Safari 6.0.5 (Mac) и Opera 16. Только Firefox (проверено с версией 23) работает нормально (все в Windows, кроме Safari 6).

Пример:

http://jsfiddle.net/jejPS/1/

Наведите указатель мыши на тег uf. Текст увеличится. При выходе из тега буква «f» оставит след при уменьшении масштаба.

Задний план:

Это часть облака тегов. Элементы SVG генерируются внутренней библиотекой компании (жестко закодированы в jsfiddle). Я улучшил нашу реализацию, добавив эту функцию масштабирования при наведении.

Неважно, используете ли вы transform: scale(2) или текущий переход размера шрифта (:hover -> 2em). Я не нашел способа масштабировать элементы svg-текста с помощью CSS3/SVG-анимаций без этих артефактов.

Примечание. Похоже, это происходит только с некоторыми символами, такими как "f" или "t". Но с каждым шрифтом, который я пробовал

Я пробовал несколько обходных путей:

Различные свойства CSS3 для лучшего рендеринга:

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0); 
-webkit-transform: translate3d(0,0,0);

Или используя

-webkit-transform: scale(1.1);

И даже

<animateTransform attributeName="transform" attributeType="XML" type="scale" from="2" to="1" additive="sum" begin="mouseover" dur="1s" fill="freeze" />

Все с одинаковым эффектом во всех упомянутых браузерах.

Я еще не отправил отчет об ошибке, потому что с трудом могу себе представить, что WebKit, Presto (Opera) и Internet Explorer 10 имеют одинаковую ошибку рендеринга. Я надеюсь, что есть еще один способ масштабирования текста в SVG, о котором я еще не знаю.

Большое спасибо за любую помощь!

редактировать: опечатка


svg css css-animations svg-animate visual-artifacts
person RandomByte    schedule 17.09.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Дешевый лайфхак, который тоже работает, — это добавить неразрывный пробел в конце вашего текста (например, "uf&#160;").

person Paul LeBeau    schedule 17.09.2013
comment
Просто, быстро и работает во всех основных браузерах. Я преобразовал его в   для JavaScript. Спасибо! - person RandomByte; 18.09.2013

arrow_upward
1
arrow_downward

На самом деле это не решение, но в подобных случаях мне помогло (по крайней мере, в Chrome) следующее фиктивное обновление:

jQuery('<style></style>').appendTo(jQuery("#gsegMapDiv")).remove();

Не слишком элегантный, но он заставляет Chrome проверять его рендеринг - и при этом удаляет артефакты при запуске, например. onmouseout в приведенном выше jsfiddle.

person schibbi    schedule 17.09.2013