Stack Overflow
Stack Overflow

Questions tagged [svg-animate]

The svg-animate is an animation tag < animate >, which is used to animate a single attribute or property over time.

The ‘animate’ element is used to animate a single attribute or property over time. For example, to make a rectangle repeatedly fade away over 5 seconds, you can specify:

<rect>
  <animate attributeType="CSS" attributeName="opacity" 
     from="1" to="0" dur="5s" repeatCount="indefinite" />
</rect>

Except for any SVG-specific rules explicitly mentioned in this specification, the normative definition for this element is the SMIL Animation specification. In particular,

links:

  1. http://www.w3.org/TR/SVG/animate.html#AnimateElement
689 questions
8
votes
1 answer

XML SVG - persist the end state of an animation

After the end of an AnimateTransform action, the element snaps back to the original value. This isn't exactly unexpected as it's in the SMIL documentation: As with all animation elements, this only manipulates the presentation value, and when the…
KyleMit
  • 30,350
  • 66
  • 462
  • 664
8
votes
1 answer

SVG SMIL animateTransform easing

I am trying to add a timing function to a simple SVG SMIL animation. Apparently timing/easing can be set with the keySplines attribute, however in my example it does not work:
Mircea
  • 11,373
  • 26
  • 64
  • 95
7
votes
1 answer

How to make work for external-svg-sprites and css-variable?

TL;DR Having created symbol-svg-sprite and inserting its fragment using svg+use, I want to use css-variables inside #ShadowDOM for SVG presentation attributes to change for example stroke-width="0" in stroke-width="5", and the transition property…
Cloudesign
  • 81
  • 5
7
votes
2 answers

SVG: Is it possible to use random or non-static values?

I am animating a polygon shape all within an SVG (so it can be used as a background in CSS). I am curious if there is a way to randomly generate a value to use, or some other way so the animation does not always start at the same position each time…
gokujou
  • 1,482
  • 3
  • 15
  • 27
6
votes
1 answer

How to draw SVG curved using single path?

What I want is in the following image - I have 3 relative question regarding this 1.Can we draw the whole canvas with a single path.? 2.If we can only draw the whole using more than one path will it be convenient to give them animation? 3.In…
Jithin Raj P R
  • 6,667
  • 8
  • 38
  • 69
6
votes
1 answer

Convert animated GIF to animated SVG and to get the code of SVG?

I have animated gif.However I would need to export to SVG format.Is it possible to convert an animated GIF to an animated SVG-image? I want to export my gif as an Animated SVG so that I can use it on my website and Mobile Apps.
mahe
  • 963
  • 2
  • 7
  • 9
6
votes
0 answers

How to load animated svg in android?

I have a SVG-file, its code is below, which is animated. I want to use it in an Android native application. How can I use that svg file? I know about using svg with glide, I tested that from below sample. Normal svg are working but not this…
William
  • 225
  • 4
  • 21
6
votes
1 answer

SVG Path Overlay and Animate Out Another Path

I have an SVG of a dashed gray line. What I want to do is overlay that on top of a green SVG dashed line, and animate out the gray to reveal the green. Sorta like a meter moving from right to left. I saw this example of how to make a dash line:…
Kyle Calica-St
  • 2,629
  • 4
  • 26
  • 56
6
votes
2 answers

Beginning and pausing SVG animations on hover

I would like to animate the gears on the following SVG when the user hovers over it. That is, when the mouse enters, both gears begin rotating where they left off. When the mouse leaves, the gears stop in whatever position they're in. If possible I…
Dave
  • 7,283
  • 12
  • 55
  • 101
5
votes
3 answers

SVG circle shape morphing

How to make an circle SVG with shape morphing ? I am trying to make circle with organic movement. But as you can see pixels seem glitchy. Any ideas on how to make it better looking? It is even the right way I am using to do it? I am not an expert in…
crg
  • 4,284
  • 2
  • 29
  • 57
5
votes
1 answer

lottie-animated svg very pixelated/blurry in Safari but not Chrome/FF

macOS Mojave After Effects 17.0.2 (CC 2020) newest Versions of Chrome/FF/Safari and Lottie/Bodymovin When scaling a svg-animation in Safari (transform: scale(>1)), it will be rendered extremely pixelated/blurred. In Chrome and Firefox it renders…
Mr-Kobra
  • 51
  • 1
  • 2
5
votes
4 answers

Chrome doesn’t work on the animation of the attribute offset for a linear gradient

Below is the code that works great in Firefox, but any attempts to animate the linear gradient's offset attribute in Chrome ended in nothing.
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54
5
votes
1 answer

Make the on scroll growing to dashed line

This what I have done so far with the help from friends from stackoverfow itself. It works fine but I want to do an animation which is little much complicated for me. // Get the id of the element and the length of var myline =…
Jithin Raj P R
  • 6,667
  • 8
  • 38
  • 69
5
votes
5 answers

SVG - animate/move dots along path

I'm looking for a way to move dots along existing path in order to get animation that looks like this: I was thinking about working with dasharray but wasn't able to get this exact behavior. Here is an example of something I tried, but as you can…
Dekel
  • 60,707
  • 10
  • 101
  • 129
5
votes
1 answer

SVG LinearGradient - How to fade from bottom to top?

New to working with SVG. I have a working demo that has a linear gradient fade from left to right on the x axis, however I'm trying to get the same affect going from bottom to top on the y axis. Tried several different ways but can't get it to…
anon
  • 594
  • 6
  • 25
1
2
3
…
45 46