Устаревшая анимация SMIL SVG заменена эффектами CSS или веб-анимации (при наведении мыши)
В соответствии с этой темой:
Проблемы Firefox 38-40 SMIL - очень медленная скорость (решена в FF версии 41 от 22.09.15)
и эта тема:
SVG-тег 'animateTransform' не работает должным образом. Было бы неплохо заменить SMIL (тег animate) на CSS или CSS-переходы.
CONSOLE WARNING: Please use CSS animations or Web animations instead),
which would work fast on the latest versions of Firefox and Chrome.
Следующее предупреждение Google Chrome:
CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated
and will be removed. Please use CSS animations or Web animations instead.
Редакция 196823: добавить предупреждение об устаревании SMIL
Для начала мне нужно реализовать три вещи:
1) Эффект наведения мыши над (самый простой)
Как это было:
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>
Я удалил set теги, добавленные классы к rect добавьте к этому псевдоклассу CSS:
.element_tpl:hover {
stroke-opacity: 0.5;
}
2) Масштабируется несколько раз после внесения изменений в этот элемент (загрузка страницы).
Как это было:
<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
Как организовать без animate тег:
???
3) Анимация масштабирования вверх и вниз (onclick)
Как это было:
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s" fill="freeze"/>
Как организовать без animate тег? Пытался использовать :active, но есть различия в поведении:
.element_tpl:active {
transform: scale(1.1);
}
Это весь код моего элемента шаблона:
<g id="switcher" cursor="pointer" stroke-width="0.15">
<g transform="scale(1,1.375)">
<g>
<rect x="-0.5" y="-0.5" width="1" height="1" stroke="white" pointer-events="none"/>
<rect x="-0.5" y="-0.5" width="1" height="1" fill="white">
<!--it makes half-visible selecting effect -->
<set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/>
<!-- explicitly reverse the opacity animation on mouseout -->
<set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/>
</rect>
<line x1="0" y1="-0.25" x2="0" y2="0.25" stroke-width="0.17" stroke-linecap="round" pointer-events="none"/><!-- vertical on -->
<!--animation-->
<!--it scales a few times after change committed to this element -->
<animateTransform attributeType="XML" attributeName="transform" type="scale" dur="0.5s" keyTimes="0;0.5;0.5;1" values="1;1.12;1.12;1" repeatCount="6" fill="freeze"/>
<!--it animates scale up and scale down onclick -->
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
fill="freeze"/>
</g>
</g>
</g>
Рабочая версия из моего текущего рабочего проекта выглядит так:
http://jsfiddle.net/7e2jeet0 (ранее использовался только браузерной FF - потому что (обратите внимание), здесь наведите курсор на 2 цифры - причина [Chrome поддерживает SMIL и "использует" вместе, Firefox в настоящее время не поддерживает SMIL и "использование" "вместе" / по словам Роберта Лонгсона)
в моей попытке сделать эквивалентный CSS, это выглядит как
http://jsfiddle.net/7e2jeet0/1/ (в FF)
http://jsfiddle.net/7e2jeet0/2/ (в Chrome)
или то же самое для другого элемента. Рабочая версия:
Спасибо!
Редактировать 1
Я обнаружил, что этот вариант комбинации будет хорошо работать при наведении и наведении в Firefox, но в Chrome работает только эффект наведения.
Мне также интересно, как я могу сохранить некоторые из этих анимаций:
переводя их в CSS / веб-анимацию?
1 ответ
Поддержка SMIL не была удалена из Chrome, но была заменена на Polyfill. Эрик Виллигерс создал полифил SMIL, полностью реализованный в API веб-анимации. Вы можете найти его здесь: https://github.com/ericwilligers/svg-animation