Устаревшая анимация SMIL SVG заменена эффектами CSS или веб-анимации (наведите курсор, щелкните)

В соответствии с этой темой:

Firefox 38-40 Проблемы с SMIL - очень низкая скорость (разрешено в FF версии 41 от 22.09.15)

и этот раздел:

Намерение осудить: SMIL

Тег SVG 'animateTransform' не работает. Было бы неплохо заменить SMIL (анимационный тег) переходом 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 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 hover:

.element_tpl:hover {
    stroke-opacity: 0.5;
}

---

2) Он масштабируется несколько раз после изменения этого элемента (pageload)

Как это было:

<!--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 - потому что (обратите внимание) hover работает здесь с двумя цифрами - причина [Chrome поддержка SMIL и "использование" вместе, Firefox в настоящее время не поддерживает SMIL и "использует" вместе]/согласно Роберту Лонгсону)

в моей попытке сделать эквивалентный CSS, он выглядит как

http://jsfiddle.net/7e2jeet0/1/ (в формате FF)

http://jsfiddle.net/7e2jeet0/2/ (в Chrome)

---

или то же самое для другого элемента. Рабочая версия:

http://jsfiddle.net/f7o03rsr/

http://jsfiddle.net/f7o03rsr/1/

http://jsfiddle.net/f7o03rsr/2/

Спасибо!

---

Изменить 1

Я обнаружил, что этот вариант комбинации отлично работает для зависания и mousedown в Firefox, но только эффект зависания работает в Chrome.

---

Мне также интересно, как я могу сохранить некоторые из этих анимаций:

http://jsfiddle.net/e4dxx2wg/

http://jsfiddle.net/e4dxx2wg/1/

путем переноса их в анимацию CSS/Web?