已弃用的SMIL SVG动画替换为CSS或Web动画效果（悬停，点击） [英] Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)

问题描述

根据此主题：

Firefox 38-40 SMIL问题 - 速度非常慢（在FF版本41中解决22.09.15）

和此主题：

意图不推荐：SMIL a>

SVG标签animateTransform无法正常工作。这将是很好的替换SMIL（动画标签）与CSS或CSS转换。

  ：请使用CSS动画或Web动画），
这将在最新版本的Firefox和Chrome上快速工作。 
  

---

下一个Google Chrome警告：

  CONSOLE警告：SVG的SMIL动画（'animate'，'set'等）已弃用
将被删除。请改用CSS动画或网页动画。 
  

修订196823：添加SMIL弃用警告

---

要实现三件事：

1）鼠标悬停效果（最简单）

 < rect x = -  0.5y = -  0.5width =1height =1 =white> 
<！ - 它使半可见选择效果 - > 
< set attributeName =stroke-opacitybegin =mouseoverend =mouseoutto =0.5/> 
<！ - 明确反转mouseout的不透明度动画 - > 
< set attributeName =stroke-opacitybegin =mouseoutend =mouseoverto =1/> 
< / rect> 
  

我删除了 set 到 rect 标记并添加到CSS悬停的伪类：

  .element_tpl：hover {
 stroke-opacity：0.5; 
} 
  
 
 
 
 
 
 
 
 
 
 
如何：
 <！ -  animation  - > 
<！ - 在提交到此元素的更改后缩放几次 - > 
< animateTransform attributeType =XMLattributeName =transformtype =scaledur =0.5skeyTimes =0; 0.5; 0.5; 1values =1; 1.12; 1.12; repeatCount =6fill =freeze/> 
  
如何组织没有 animate  
 
 
 
  
 
  
 
 
 
 
 
 
 3）动画放大和缩小（onclick）
 
 
 
如何：
 <！ - 动画放大和缩放down onclick  - > 
< animateTransform attributeName =transformattributeType =XMLtype =scalefrom =1到=1.15repeatCount =1begin =mousedown + 0.2sdur = fill =freeze/> 
< animateTransform attributeName =transformattributeType =XMLtype =scalefrom =1.15to =1repeatCount =1begin =mouseup + 0.4sdur = fill =freeze/> 
  
如何组织没有 animate 标签？尝试使用：active ，但行为有所不同：
  .element_tpl：active {
 transform：scale（1.1）; 
} 
  
 
 
 
 
 
 
的我的模板元素：
 < g id =switchercursor =pointerstroke-width =0.15> ; 
< g transform =scale（1,1.375）> 
< g> 
< rect x = -  0.5y = -  0.5width =1height =1stroke =whitepointer-events =none/> 
< rect x = -  0.5y = -  0.5width =1height =1fill =white> 
<！ - 它使半可见选择效果 - > 
< set attributeName =stroke-opacitybegin =mouseoverend =mouseoutto =0.5/> 
<！ - 明确反转mouseout的不透明度动画 - > 
< set attributeName =stroke-opacitybegin =mouseoutend =mouseoverto =1/> 
< / rect> 
< line x1 =0y1 = -  0.25x2 =0y2 =0.25stroke-width =0.17stroke-linecap =roundpointer-events =none ><！ -  vertical on  - > 
<！ -  animation  - > 
<！ - 在提交到此元素的更改后缩放几次 - > 
< animateTransform attributeType =XMLattributeName =transformtype =scaledur =0.5skeyTimes =0; 0.5; 0.5; 1values =1; 1.12; 1.12; repeatCount =6fill =freeze/> 
<！ - 它动画放大和缩小onclick  - > 
< animateTransform attributeName =transformattributeType =XML
 type =scalefrom =1to =1.15repeatCount =1begin =mousedown + 0.2sdur =0.2s
 fill =frozen/> 
< animateTransform attributeName =transformattributeType =XML
 type =scalefrom =1.15to =1repeatCount =1begin =mouseup + 0.4sdur =0.2s
 fill =freeze/> 
< / g> 
< / g> 
< / g> 
  
 
 
 
 
 
 
  当前工作项目如下：  
 
 
  http://jsfiddle.net/7e2jeet0 （以前只由浏览器FF使用 - 因为（注意）悬停在这里与2个数字 - 原因[Chrome支持SMIL和'一起使用，火狐不在目前支持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中悬停和mousedown正常工作，但只有悬停效果在Chrome中有效。
 
 
 
 
 
 
如何保存一些动画：
 
 
  http ：//jsfiddle.net/e4dxx2wg/  
 
 
 
  http：/ /jsfiddle.net/e4dxx2wg/1/  
 
 
将它们转移到CSS / Web动画？
解决方案
 SMIL支持未从Chrome中移除，但已由Polyfill替代。 Eric Willigers创建了一个完全在Web Animations API上实现的SMIL polyfill。您可以在这里找到它：
  https://github.com/ericwilligers/svg-animation  
 
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?
解决方案
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

                        
这篇关于已弃用的SMIL SVG动画替换为CSS或Web动画效果（悬停，点击）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！