title: Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
body: <p>In accordance with this topic:</p>
  
  <blockquote>
    <p><a href="https://stackoverflow.com/questions/30760923/firefox-38-40-smil-problems-very-slow-speed-resolved-in-ff-version-41-from-22?lq=1">Firefox 38-40 SMIL problems - very slow speed (resolved in FF version 41 from 22.09.15)</a></p>
  </blockquote>
  
  <p>and this topic:</p>
  
  <blockquote>
    <p><a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/5o0yiO440LM/59rZqirUQNwJ" rel="noreferrer">Intent to deprecate: SMIL</a></p>
  </blockquote>
  
  <p>SVG tag 'animateTransform' does not work well. It would be nice to replace SMIL (animate tag) with CSS or CSS transitions.</p>
  
  <pre class="lang-none prettyprint-override"><code>CONSOLE WARNING: Please use CSS animations or Web animations instead),
  which would work fast on the latest versions of Firefox and Chrome.
  </code></pre>
  
  <hr>
  
  <p>The next Google Chrome warning:</p>
  
  <pre class="lang-none prettyprint-override"><code>CONSOLE WARNING: SVG's SMIL animations ('animate', 'set', etc.) are deprecated 
  and will be removed. Please use CSS animations or Web animations instead.
  </code></pre>
  
  <p><a href="https://src.chromium.org/viewvc/blink?revision=196823&amp;view=revision" rel="noreferrer">Revision 196823: Add SMIL deprecation warning</a></p>
  
  <hr>
  
  <p>For a start, I need to implement three things:</p>
  
  <h2>1) Hover effect on mouse over(the easiest)</h2>
  
  <p>How it was:</p>
  
  <pre><code>&lt;rect x="-0.5" y="-0.5" width="1" height="1" fill="white"&gt;
      &lt;!--it makes half-visible selecting effect --&gt;
      &lt;set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/&gt;
      &lt;!-- explicitly reverse the opacity animation on mouseout --&gt;
      &lt;set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/&gt;
  &lt;/rect&gt;
  </code></pre>
  
  <p>I removed the <code>set</code> tags, added classes to the <code>rect</code> tag and added to this to the CSS hover Pseudo-class:</p>
  
  <pre><code>.element_tpl:hover {
      stroke-opacity: 0.5;
  }
  </code></pre>
  
  <hr>
  
  <h2>2) It scales a few times after change committed to this element (pageload)</h2>
  
  <p>How it was:</p>
  
  <pre><code>&lt;!--animation--&gt;
  &lt;!--it scales a few times after change committed to this element --&gt;
  &lt;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"/&gt;
  </code></pre>
  
  <p>How to organize without the <code>animate</code> tag:  </p>
  
  <p><b>
      ???
  </b></p>
  
  <hr>
  
  <h2>3) It animates scale up and scale down (onclick)</h2>
  
  <p>How it was:</p>
  
  <pre><code>&lt;!--it animates scale up and scale down onclick --&gt;
      &lt;animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s" fill="freeze"/&gt;
      &lt;animateTransform attributeName="transform" attributeType="XML" type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s" fill="freeze"/&gt;
  </code></pre>
  
  <p>How to organize without <code>animate</code> tag? Tried to use <code>:active</code>, but there are differences in the behavior:</p>
  
  <pre><code>.element_tpl:active {
      transform: scale(1.1); 
  }
  </code></pre>
  
  <hr>
  
  <p>This is the entire code of my template element:</p>
  
  <pre><code>&lt;g id="switcher" cursor="pointer" stroke-width="0.15"&gt;
      &lt;g transform="scale(1,1.375)"&gt;
          &lt;g&gt;
              &lt;rect x="-0.5" y="-0.5" width="1" height="1" stroke="white" pointer-events="none"/&gt;
              &lt;rect x="-0.5" y="-0.5" width="1" height="1" fill="white"&gt;
                  &lt;!--it makes half-visible selecting effect --&gt;
                  &lt;set attributeName="stroke-opacity" begin="mouseover" end="mouseout" to="0.5"/&gt;
                  &lt;!-- explicitly reverse the opacity animation on mouseout --&gt;
                  &lt;set attributeName="stroke-opacity" begin="mouseout" end="mouseover" to="1"/&gt;
              &lt;/rect&gt;
              &lt;line x1="0" y1="-0.25" x2="0" y2="0.25" stroke-width="0.17" stroke-linecap="round" pointer-events="none"/&gt;&lt;!-- vertical on --&gt;
              &lt;!--animation--&gt;
              &lt;!--it scales a few times after change committed to this element --&gt;
              &lt;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"/&gt;
              &lt;!--it animates scale up and scale down onclick --&gt;
              &lt;animateTransform attributeName="transform" attributeType="XML"
              type="scale" from="1" to="1.15" repeatCount="1" begin="mousedown+0.2s" dur = "0.2s"
              fill="freeze"/&gt;
              &lt;animateTransform attributeName="transform" attributeType="XML"
              type="scale" from="1.15" to="1" repeatCount="1" begin="mouseup+0.4s" dur = "0.2s"
              fill="freeze"/&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  </code></pre>
  
  <hr>
  
  <p><strong><em>Working version from my current working project looks like:</em></strong></p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/7e2jeet0" rel="noreferrer">http://jsfiddle.net/7e2jeet0</a> (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)</p>
  </blockquote>
  
  <p>in my attempt to make the equivalent CSS, it looks like</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/7e2jeet0/1/" rel="noreferrer">http://jsfiddle.net/7e2jeet0/1/</a> (in FF)</p>
    
    <p><a href="http://jsfiddle.net/7e2jeet0/2/" rel="noreferrer">http://jsfiddle.net/7e2jeet0/2/</a> (in Chrome)</p>
  </blockquote>
  
  <hr>
  
  <p>or the same for other element. Working version:</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/f7o03rsr/" rel="noreferrer">http://jsfiddle.net/f7o03rsr/</a></p>
    
    <p><a href="http://jsfiddle.net/f7o03rsr/1/" rel="noreferrer">http://jsfiddle.net/f7o03rsr/1/</a></p>
    
    <p><a href="http://jsfiddle.net/f7o03rsr/2/" rel="noreferrer">http://jsfiddle.net/f7o03rsr/2/</a></p>
  </blockquote>
  
  <p>Thanks!</p>
  
  <hr>
  
  <h2>Edit 1</h2>
  
  <p>I found that <a href="http://jsfiddle.net/cn83u2j7" rel="noreferrer">this combination variant</a> will work fine for hover and mousedown in Firefox, but only the hover effect works in Chrome.</p>
  
  <hr>
  
  <p>I'm also interested in how could I save some of these animations:</p>
  
  <blockquote>
    <p><a href="http://jsfiddle.net/e4dxx2wg/" rel="noreferrer">http://jsfiddle.net/e4dxx2wg/</a> </p>
    
    <p><a href="http://jsfiddle.net/e4dxx2wg/1/" rel="noreferrer">http://jsfiddle.net/e4dxx2wg/1/</a></p>
  </blockquote>
  
  <p>by transfering them to CSS / Web animations?</p>