このトピックに従って：
Firefox 38-40 SMIL の問題 - 非常に遅い速度 (22.09.15 の FF バージョン 41 で解決済み)
そしてこのトピック：
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's SMIL animations ('animate', 'set', etc.) are deprecated
and will be removed. Please use CSS animations or Web animations instead.
まず、次の 3 つのことを実装する必要があります。
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 と「使用」をサポートしていません) '一緒に] / Robert Longsonによると）
同等のCSSを作成しようとすると、次のようになります
http://jsfiddle.net/7e2jeet0/1/ (FF)
http://jsfiddle.net/7e2jeet0/2/ (Chrome)
または他の要素についても同じです。作業バージョン:
ありがとう！
編集 1
この組み合わせバリアントは、Firefox ではホバーとマウスダウンで正常に機能しますが、Chrome ではホバー効果のみが機能することがわかりました。
これらのアニメーションのいくつかを保存する方法にも興味があります。
それらをCSS / Webアニメーションに転送することによって？