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
3
votes
2 answers

Creating an SVG animated dashed line with a transparent background

I have been playing around with this for hours and trying to think up a solution. In this... https://jsfiddle.net/WebFlair/nc0zyjdq/78/
user2227359
  • 317
  • 1
  • 4
  • 13
3
votes
1 answer

How to fix SVG animate which does not work in Safari

Not later than yesterday, I managed to make an animated SVG which works flawlessly in Chrome. I tried to open it in Safari today and the animation was not working. Is there a solution to this? I have tried to do some research but most of them show…
nTuply
  • 1,364
  • 19
  • 42
3
votes
0 answers

Animate SVG on 'next slide' event in xaringan/remarkjs

I'm making a presentation using xaringan/remark.js. I am including an SVG with two animations that make coloured boxes appear to highlight text. Currently, the animation works on click, but I'd like to start the animation with a 'next slide' event.…
Matthijs
  • 501
  • 1
  • 3
  • 12
3
votes
2 answers

SVG honeycomb polygon filling animation

Can I fill the SVG using path with animation? Like this
Rohit Chahar
  • 128
  • 9
3
votes
1 answer

SVG SMIL path animation not working in Safari

I use SVG SMIL animation because I haven't found another way to animate a curved shape. This approach works perfectly for all browsers except for iOS browsers. This is my SVG code:
Hanna
  • 41
  • 3
3
votes
2 answers

Animate feDropShadow inside filter

I have the following code and I want to animate feDropShadow inside defs @import url("https://fonts.googleapis.com/css?family=Open+Sans:300&display=swap"); *, *::before, *::after { box-sizing: border-box; position:…
Amaan Kulshreshtha
  • 525
  • 6
  • 19
3
votes
1 answer

Rotate an image According to svg path

Look at the image I attached. I needed the car image to turn when the svg path turns? Is this possible? Here is my code:
Aashif Ahamed
  • 1,143
  • 1
  • 9
  • 21
3
votes
1 answer

SVG animateMotion (calcMode spline) not working in FF and Safari

I want to move a circle along a path inside an svg with different easing. I wanted to use animateMotion but have never used it before. Using JS is not an option in this case. It works fine in Chrome and Opera, but not in Safari and Firefox.…
browsergarden
  • 113
  • 1
  • 12
3
votes
1 answer

Starting an object to move from a random point along an SVG path

Here trying to get some insight into SVGs. Is there any way of moving a circle along an SVG path, where the circle starts moving from a specific point determined by the length of the path? For instance, when the object reaches the end, it starts…
john_snow5214
  • 192
  • 1
  • 14
3
votes
1 answer

How to move svg elements over html5 video and control video playback at the same time?