Stack Overflow
Stack Overflow

Questions tagged [smil]

SMIL (Synchronized Multimedia Integration Language) is a XML markup language for describing multimedia presentations.

SMIL implementations are available for RealPlayer, Firefox, Opera, Internet Explorer 5-8, Chrome/Safari desktop and mobile handsets with MMS support. FakeSmile is a JavaScript shim which provides support in IE9+.

229 questions
39
votes
1 answer

Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)

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…
Artem.Borysov
  • 1,031
  • 2
  • 12
  • 29
32
votes
3 answers

How to loop SVG animation sequence?

I have sequence of animationTransform:
serg
  • 109,619
  • 77
  • 317
  • 330
22
votes
2 answers

Is SMIL for SVG deprecated, un-deprecated or... paused but will eventually be deprecated?

TLDR: I'm trying to establish whether it's worth spending some time mastering SMIL. The official line (at least from Blink, but maybe not from Gecko) appears to be that this animation technology is functionally deprecated... but the reality on the…
Rounin
  • 27,134
  • 9
  • 83
  • 108
14
votes
6 answers

SVG animation delay on each repetition

I'd like to add a delay to each iteration of an SVG animation loop. Here's a simple example.
Ben Murden
  • 590
  • 2
  • 6
  • 23
12
votes
4 answers

SVG animate with dynamically added elements

Based on this code, I'm trying to animate a dynamically-generated SVG element: var svgnode = document.createElementNS('http://www.w3.org/2000/svg','svg'); var circle =…
Hendekagon
  • 4,565
  • 2
  • 28
  • 43
9
votes
4 answers

using the tag in SVG to change the rotation of a shape

I am trying to set the rotated angle of a shape using the tag but for the life of me I cant figure it out. What is the right syntax?
Doug Miller
  • 1,316
  • 4
  • 24
  • 46
8
votes
1 answer

SVG animateTransform translate and scale simultaneously fails

I have a path that I want to animate using animateTransform. I want to translate and scale the path simultaneously. It doesn't work. Apparently only the second animation is working: in this case scale. What am I doing wrong? svg{ width:300px;…
enxaneta
  • 31,608
  • 5
  • 29
  • 42
8
votes
1 answer

How to add ease-out effect to SVG

I am animating a SVG with the help of SMIL. All works as expected in chrome except that I want to add an "ease-out" effect to the animatemotion tag. Right now the plane moves along the path in a linear fashion. What I want is that the animation has…
Ali Farooq
  • 135
  • 3
  • 10
7
votes
1 answer

Controlling SVG's SMIL with JavaScript

Let's say I have this SVG of an insect. Unless it is otherwise impossible this way, I want to insert it as or tags. Now, the insect.svg has two animations: one for walking and other for flying. I'd like to start/stop these…
ArtPulse
  • 365
  • 4
  • 16
6
votes
0 answers

SVG SMIL animation breaks on repeat in Safari

I'm using SMIL for the animation, and javascript to add/remove a class and trigger the toggle. Everything works fine in Chrome, but it falls apart in Safari. The animation works in Safari on the first toggle, but then breaks, only firing off some…
Matthew Paul
  • 61
  • 2
5
votes
1 answer

how to start an animation on the end of another animation?

I am trying to have a dot fade from white to red and then from white to red. This is what I have thus far:
Phil
  • 10,948
  • 17
  • 69
  • 101
5
votes
1 answer

How to add motion blurred tail to an svg element going in a circle?

I'm learning how to code/create SVG's and currently working on a loading indicator. The concept is simple; a circle, moving around in a circle. However, I'd like to make the motion look more realistic by adding a blur to the moving circle…
WiseOlMan
  • 926
  • 2
  • 11
  • 26
5
votes
1 answer

Why is SVG SMIL animation not supported by Internet Explorer

Is there a reason why Internet Explorer chose not to support SMIL Animations? Will future versions of Internet Explorer support SMIL animations? http://caniuse.com/#feat=svg-smil
cport1
  • 1,175
  • 14
  • 25
5
votes
1 answer

How to efficiently reverse SVG (SMIL) Animation on Motion Path?

I am trying to determine how to efficiently reverse this SVG animation (with SMIL) which uses animateMotion and the d attribute on the path element. I need the animation to run counterclockwise around the shape. The current animation can be found…
jjdewitt
  • 51
  • 1
  • 4
5
votes
1 answer

using dynamic smil file with jw player

I'm trying to make a online stream player with JW Player 6. If I create a smil file with all the quality version of streams and use the code below it works fine: