web-dev-qa-db-ja.com

非推奨のSMIL SVGアニメーションがCSSまたはWebアニメーション効果に置き換えられました（ホバー、クリック）

このトピックに従って：

Firefox 38-40 SMILの問題-非常に遅い速度（22.09.15のFFバージョン41で解決）

そしてこのトピック：

廃止予定：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's SMIL animations ('animate', 'set', etc.) are deprecated 
and will be removed. Please use CSS animations or Web animations instead.

リビジョン196823：SMIL非推奨の警告を追加

はじめに、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）変更がこの要素にコミットされた後、数回スケーリングします（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）スケールアップとスケールダウンをアニメーション化します（オンクリック）

いかがでしたか：

<!--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/7e2jeet （以前はブラウザFFでのみ使用されていました 注意を払って）ホバーが2つの数字でここで動作するため-[ChromeはSMILをサポートし、一緒に「使用」するため、Firefoxは現在、SMILと「使用」を一緒にサポートしていない]/Robert Longson氏による

同等の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

この組み合わせのバリエーション は、Firefoxでのホバーとマウスダウンでは正常に機能しますが、Chromeではホバー効果のみが機能することがわかりました。

また、これらのアニメーションのいくつかを保存する方法にも興味があります。

http://jsfiddle.net/e4dxx2wg/

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

それらをCSS/Webアニメーションに転送しますか？

cssanimationsvgcss-animationssmil
37
Artem.Borysov

SMILサポートはChromeから削除されませんでしたが、ポリフィルに置き換えられました。EricWilligersは、Web Animations APIで完全に実装されたSMILポリフィルを作成しました。 https：//github.com/ericwilligers/svg-animation

9
Emanuele Sabetta