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

Animate Path in Internet Explorer

Is there any possiblity to "Fly-In" an svgpath in IE 11? Like @keyframes fadeInP { from { stroke-dashoffset:1000; } to { stroke-dashoffset: 0; } } .animate { animation: fadeInP 10s linear infinite; } For
RandomDude
  • 109
  • 2
  • 9
5
votes
3 answers

How to change the width of an svg rect with css

Is is possible to change width of SVG rectangle with CSS? This doesn't work: #red { width: 800px; } #red:hover { width: 1600px; } See jsfiddle.
l00per
  • 481
  • 4
  • 7
  • 19
5
votes
1 answer

How to plot animated line chart using d3 while the data table is required to be updated every 1 second?

I want to simulate the situation where there is continuous incoming real time (dynamic) data and feed to the chart Therefore, I try to demonstrate an animated line chart using d3 while the data array is required to be continuous updated every 1…
jhyap
  • 3,779
  • 6
  • 27
  • 47
5
votes
1 answer

Efficient Continuous Scrolling Graph with SVG HTML CSS

I have created a real-time graph where new data points are continuously being fed in and plotted. Currently I am using requestAnimationFame() where I render the updated positions of the elements 30 times per second. With many SVG elements, this can…
rustybeanstalk
  • 2,722
  • 9
  • 37
  • 57
5
votes
1 answer

Animate SVG element every x seconds

Introduction I know some basic animation techniques for SVG using both Javascript and DOM element. So I have created this SVG, but I can't figure it out how trigger the animation every x seconds without too much code. I tried begin="4s"…
Tomas Ramirez Sarduy
  • 17,294
  • 8
  • 69
  • 85
5
votes
2 answers

Can svg animations be suspended without loosing accumulative information?

You can stop and repeat animations without limitations, but if you restart an indefinite animation it will loose its accumulative value and start from the initial value. Maybe I should clarify with an example; Take this animation:
bitmask
  • 32,434
  • 14
  • 99
  • 159
4
votes
1 answer

Animate SVG fill shape by following the form

i wonder how to fill a form continously with html5/css3 to create a loading icon (spinner). The fill should follow the red line (3) and leave the shape in same direction when it reaches the end (6) If it would be a thin line i could work with fake…
C.Hillert
  • 113
  • 1
  • 8
4
votes
3 answers

SVG animation struggles with Safari 13.1 (Mac OS & IOS)

I just realized that the latest version of Safari (v13.1) that comes with macOs 10.15.4 and iOS 13.4 doesn't support css animations in SVG files anymore. I use this trick to display a loading animation on my portfolio. Now only the first frame of…
Jean-Baptiste Kaloya
  • 79
  • 1
  • 9
4
votes
2 answers

Add arrow to SVG stroke animation

I'm trying to get an animated arrow that encompasses an SVG logo. I got the stroke animation to work but I'm not sure how to get the arrow head on the front of that line. An example of what I'm trying to achieve is…
Charlie Wedel
  • 79
  • 1
  • 10
4
votes
2 answers

How to animate concave rectangle to convex

I have created a rectangle of the following shape using sketch. When I hover it I need to animate and rest as the below shape. Is there a way I can animate it using css only from concave to convex. Any help would be appreciated. I am fine with…
Benjamin
  • 2,612
  • 2
  • 20
  • 32
4
votes
2 answers

How to animate svg path d attribute with animate tag

Im trying to animate a svg path with animate tag, following this tutorial from css tricks. I could animate path with css keyframes, and the result is this: #mySvg path{ animation: scale-path 10s ease-in-out infinite; } @keyframes…
SilverSurfer
  • 4,281
  • 6
  • 24
  • 50
4
votes
1 answer

SVG: Add animate element dynamically

I try to add an animate element dynamically to my path element, which works correct. My html:
Code Pope
  • 5,075
  • 8
  • 26
  • 68
4
votes
2 answers

SVG straight line animation CSS

I am trying to achieve this (the picture below) in using SVG path for animation in a website. I saw this https://css-tricks.com/svg-line-animation-works/ and wanted to try it. But i am not sure how do i create the path out and the animation. Please…
lel
  • 327
  • 7
  • 26
4
votes
2 answers

svg fill animation does not work in firefox

Does anybody know why this code doesnt work in FF ? In chrome everything is ok but not in FF. The dots dont fill with the white color, just stay unfilled. …
Marcin Mroczko
  • 143
  • 1
  • 12
4
votes
2 answers

Need To fill Svg Animation for a curve

I have a curve in svg and need to fill the curve along its path on hover can anyone help? The animation for fill should be in another color or can be the same. I tried using the animate tag but it is not effective and fills like anything. My SVG…
Ram
  • 375
  • 2
  • 4
  • 16
1 2
3
…
45 46