39

In accordance with this topic:

Firefox 38-40 SMIL problems - very slow speed (resolved in FF version 41 from 22.09.15)

and this topic:

Intent to deprecate: SMIL

SVG tag 'animateTransform' does not work well. It would be nice to replace SMIL (animate tag) with CSS or CSS transitions.

CONSOLE WARNING: Please use CSS animations or Web animations instead),
which would work fast on the latest versions of Firefox and Chrome.

The next Google Chrome warning:

CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated 
and will be removed. Please use CSS animations or Web animations instead.

Revision 196823: Add SMIL deprecation warning

For a start, I need to implement three things:

1) Hover effect on mouse over(the easiest)

How it was:

<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>

I removed the set tags, added classes to the rect tag and added to this to the CSS hover Pseudo-class:

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

2) It scales a few times after change committed to this element (pageload)

How it was:

<!--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"/>

How to organize without the animate tag:

???

3) It animates scale up and scale down (onclick)

How it was:

<!--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"/>

How to organize without animate tag? Tried to use :active, but there are differences in the behavior:

.element_tpl:active {
    transform: scale(1.1); 
}

This is the entire code of my template element:

<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>

Working version from my current working project looks like:

http://jsfiddle.net/7e2jeet0 (previously only used by a browser FF - because (pay attention) hover works here with 2 figures - cause [Chrome support SMIL and 'use' together, Firefox does not currently support SMIL and 'use' together] / according to Robert Longson)

in my attempt to make the equivalent CSS, it looks like

http://jsfiddle.net/7e2jeet0/1/ (in FF)

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

or the same for other element. Working version:

http://jsfiddle.net/f7o03rsr/

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

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

Thanks!

Edit 1

I found that this combination variant will work fine for hover and mousedown in Firefox, but only the hover effect works in Chrome.

I'm also interested in how could I save some of these animations:

http://jsfiddle.net/e4dxx2wg/

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

by transfering them to CSS / Web animations?

Community
  • 1
  • 1
Artem.Borysov
  • 1,001
  • 2
  • 11
  • 26
  • 16
    The removal of SMIL support from Chrome is a disaster. Currently there is no way for CSS to replace those advanced animation and interactive functionalities. SMIL was very advanced and powerful. I suspect that a SMIL polyfill could be the only solution. Take a look at the FakeSmile polyfill: https://launchpad.net/smil – Emanuele Sabetta Aug 14 '15 at 10:06
  • @EmanueleSabetta – as well as lacking functionality, CSS animations also result in worse quality than SMIL. CSS animates the rendered raster element while SMIL has always worked on the raw vector data (at least in Chrome). – tomekwi Nov 19 '15 at 08:34
  • 1
    @EmanueleSabetta you can still use JavaScript to apply CSS on SVG elements to animate them. Take a look at GreenSock GSAP (GreenSock Animation Platform) http://greensock.com/ – Jonathan Marzullo Apr 07 '16 at 19:23

1 Answers1

10

SMIL support was not removed from Chrome but was replaced with a Polyfill. Eric Willigers has created a SMIL polyfill implemented entirely on the Web Animations API. You can find it here: https://github.com/ericwilligers/svg-animation

Emanuele Sabetta
  • 1,491
  • 12
  • 33
  • here svg cartoon by svg and a little js http://www.tbyrne.org/flash2svg-v3-13 (from this discussion https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/5o0yiO440LM/59rZqirUQNwJ) – Artem.Borysov Aug 29 '15 at 19:29
  • 2
    Yeah, looks like Polyfill is the best solution because cross browser support for the Web Animations API is lacking. http://caniuse.com/#search=web%20animations – Jason Lydon Sep 02 '15 at 15:30
  • https://github.com/webframes/smil2css (from this discussion https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/5o0yiO440LM/59rZqirUQNwJ ). Here this animation: https://webframes.github.io/smil2css/ . Who knows something about flash2svg or smil2css? – Artem.Borysov Sep 23 '15 at 17:05
  • Too bad polyfills won't work on background images due to script execution being prevented. – SeinopSys Aug 24 '16 at 22:45
  • 3
    Also recently Google annunced that due to popular demand they suspended the SMIL deprecation. SMIL is back in Chrome. – Emanuele Sabetta Sep 10 '16 at 14:37
  • Is svg-animation dead? The code hasn't changed in a year and there's no readme – Richard Jan 29 '17 at 11:17
  • @all: should SMIL be avoided in favor of CSS3 animations? or JS? are both equally fast? is it possible to animate paths using CSS3 now (I'd say so using `stroke-dasharray` and `stroke-dashoffset`)? – Igor Jun 10 '20 at 22:36