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
25
votes
1 answer

Can you animate a svg "background-image"?

I want to center a svg-image horzontal and vertical responsive to my window. So I decided to integrate the image in a div background. Now when i want to add stroke-dasharray's and animations with stroke-dashoffset to my svg it doesn't work. Is this…
5rsly
  • 377
  • 1
  • 3
  • 8
20
votes
4 answers

React.js - use svg linear gradient not working

I have a circle and a gradient to fill in it, I put in the gradient and call him in path by style fill. import React,{PropTyoes} from 'react'; import {connect} from 'react-redux'; import * as Actions from '../controllers/Actions'; export…
hod caspi
  • 826
  • 2
  • 10
  • 17
20
votes
7 answers

Restart background SVG animation

I have an SVG set as a background image of an element. The first time the element is displayed, the animation plays correctly. On subsequent displays (e.g. if a duplicate of the element is injected via JavaScript, or if the background image is…
Alasdair McLeay
  • 2,572
  • 4
  • 27
  • 50
16
votes
4 answers

SVG progress bar

I have a requirement where I need to load js files dynamically and show the progress of loading files through a SVG icon. The SVG icon will act as progress bar where it fills with a color from bottom to top, linearly. Here is the codepen
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
15
votes
2 answers

How can i display animated svg file in iOS without using UIWebView

Currently i am using UIWebView to display animated svg file in my native iOS application. This works fine except the CPU usage is constantly being on higher side as long as app is in foreground. Is there any better way to display svg file without…
Mihir Mehta
  • 13,743
  • 3
  • 64
  • 88
15
votes
4 answers

Svg fill animation for the given path

I am trying to animate an arrow from left to right.The code of my arrow's path is given below:
Ram
  • 375
  • 2
  • 4
  • 16
15
votes
2 answers

SVG Scale Animation from Center Point instead of Upper-Left Corner

How do I use animateTransform in an SVG to scale an object from the center point instead of the upper-left corner? Example:
MattSidor
  • 2,599
  • 4
  • 21
  • 32
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
13
votes
2 answers

How to animate my SVG path

I have a SVG I am trying to animate with animejs. Basically its a selection path drawing. I managed to animate but the result is wrong. I want this: var lineDrawing = anime({ targets: 'path', strokeDashoffset: [anime.setDashoffset, 0], …
Milos
  • 2,927
  • 1
  • 15
  • 27
13
votes
1 answer

SVG animation rotate a path around a center point.

I'm currently having trouble getting this SVG to rotate perfectly on its axis.. as its a path. I've tried calculating what I thought should be the center point. Can anyone point me in the right direction as to why this isn't spinning absolutely…
Squiggs.
  • 4,299
  • 6
  • 49
  • 89
12
votes
2 answers

SVG Fade in Animation

Hi I have an SVG which is 5 arrow shapes stacked. I am wanting to fade in each arrow from the bottom up. When the top arrow has faded in, I want the first one to fade out, then the second etc. And then start the animation again by fading in each…
Pedro
  • 1,148
  • 4
  • 16
  • 35
9
votes
1 answer

Animated SVG does not work in Firefox, works in Chrome

I'm not sure what I need to modify in this SVG in order to make it compatible with Firefox? The animation works fine in other browsers but in Firefox it's just a static image and it does not animate.
Smooth
  • 956
  • 1
  • 15
  • 37
9
votes
1 answer

Live drawing of a line in D3.js

I'm just started with D3.js, and I want to create something like what we do in Paint to draw a line. The steps are should be the same: - Click on a point on the screen - Drag to the destination to create a line. What I'm having troubles now is when…
wayne
  • 191
  • 1
  • 1
  • 9
8
votes
1 answer

How to implement animation by clicking SVG shapes in Edge and IE

This question can already be said not relevant Microsoft Edge-Chromium Insider Colleagues, I know two ways of animation. Both options work in all browsers that I can access; I did not check only Safari. The first is using the function…
Air
  • 181
  • 3
  • 15
8
votes
2 answers

is it possible to make SVG circle fill color from bottom to top based on percentage?

How to fill the circle as below based on percentage!! https://i.stack.imgur.com/gVAN5.png Thanks in advance.
Nattu Raju
  • 310
  • 1
  • 2
  • 11
1
2 3
…
45 46