What is pure SVG and what is SMIL?

青春壹個敷衍的年華 提交于 2019-12-20 04:38:30

问题


Context: I'm working on an infographic in SVG. I want to have the document come to life thanks to animations, especially by chaining animations. I'm already familiar with SVG but started learning SVG animation only recently.

Since SMIL is deprecated, I'm trying to produce animations in pure SVG.

Looking at this article (esp. the Handy Dandy Replacement Reference Chart at the end), I'm under the impression that I need to stop using suc hattributes:

fill="freeze"
repeatCount="indefinite" 
begin="hover" 
begin="circ-anim.begin + 1s" 

…because they are part of SVG SMIL.

But, if I look at the SVG reference on Mozilla, I see <animate> and <animateTransform> inside the list, with no warning about them being SMIL, or the need to stop using them.

Moreover, it seems Chrome normally warns against the use of SMIL animations in the console but I can see no such warning when using <animate> or <animateTransform> (be it in an SVG document, or inside an HTML document that includes an inline or object SVG.)

Long story short, it's not clear to me what is SMIL and what is pure SVG. Can anyone shade some light on the topic? Can I use <animate> and <animateTransform>?


回答1:


SMIL is no longer deprecated by Chrome.

We value all of your feedback, and it's clear that there are use cases serviced by SMIL that just don’t have high-fidelity replacements yet. As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.

Basically SMIL in SVG is everything in the Animation chapter of the specification.

That's the <animate> element, the <set> element, the <animateMotion> element and the <animateTransform> element. (the SVG specification also contains an <animateColor> element which should not be used, you can just replace that with animate).



来源:https://stackoverflow.com/questions/40995387/what-is-pure-svg-and-what-is-smil

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!