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

Styling Custom SVG Loader

What I Am Trying To Achieve I've created a custom SVG loader, however being new to SVG's I'm not too familiar with styling them too well. I am trying to get my new loader, as seen below in the first snippet, to match the looks of my other loader…
Tyler
  • 854
  • 1
  • 10
  • 26
4
votes
2 answers

Animated growing arrow link

Hi, I was wondering how one would go about animating an svg arrow like above (on hover). I have tried playing around with CSS transforms, but they also scale the arrow-head which is no good. I assume the correct way to do this is using SVGs…
phil
  • 526
  • 6
  • 16
4
votes
1 answer

Why does the SVG animation stop when using xlink:href for external file

For some reason my spinner.svg is not animating when using xlink:href. Embedding the SVG on the page and using xlink:href seems to work fine, as the snippet below shows. The problem: static (and solid!) spinner instead of animation Why are the…
oligofren
  • 20,744
  • 16
  • 93
  • 180
4
votes
1 answer

How to alternate-reverse loop an SVG animation?

I am new to SVG specially in SVG animation so I don't know how to do this. I need to reverse the animation once it is finished and start it over again. I found this one How to reverse the moving direction of the SVG animation? and tried the accepted…
droymanz
  • 343
  • 8
  • 18
4
votes
2 answers

:hover not working on svg when svg is in external file

So I'm learning SVG animation. Basically all I'm trying to do is change the color of a circle when it's hovered over.
Sean Peterson
  • 368
  • 4
  • 15
4
votes
1 answer

Moving image on scroll through svg path

I want to move object through svg path on scroll=) I was trying to add parts of path on scroll into path, but it still doesn't work. Help!!!=) https://jsfiddle.net/YuriiBielozertsev/Ltx9ed0L/
Юра Белозерцев
  • 153
  • 1
  • 2
  • 7
4
votes
1 answer

Dynamically add a shape / mask to an inline svg

I have a site with a series of elements that, when clicked on, add inline svg code to that element. The svg essentially animates an "iris wipe" to tunr the element white. Code from a separate html document is the loaded into a series of divs. When…
GtwoK
  • 497
  • 4
  • 16
4
votes
1 answer

Why does CSS selector only style first matching svg path

I'm working with an inline SVG element that's made of two paths. jsfiddle HTML: …
tjfwalker
  • 494
  • 3
  • 18
4
votes
1 answer

svg animateTransform trigger multiple animations simultaneously

In the following example I need all animations to be executed simultaneously. But works only last one.
Sergey Onishchenko
  • 6,943
  • 4
  • 44
  • 51
4
votes
1 answer

How to animate image inside SVG (with CSS?)

I've got an svg with an image inside, and I'm wondering can I animate this with CSS? I've got it to transform when hovered over, but it's jumping a little which is a weird effect, but then I thought I guess there might be the possibility to make it…
Louis Maddox
  • 5,226
  • 5
  • 36
  • 66
4
votes
1 answer

SVG radial-wipe animation using CSS3/JS

How can i achieve a radial wipe animation in CSS3 or JS? It's seems so simple but I can't figure it out.
Lapidus
  • 925
  • 1
  • 10
  • 16
3
votes
1 answer

How to rotate svg element around the center of another element that is moving?

I dont know how to set up a rotating center of an svg element to be a center of another svg element that is moving. What should i do so that the rotate center of the element "c2" (red circle) would be center of the circle "c1" (blue circle), so that…
kims9
  • 45
  • 1
  • 4
3
votes
0 answers

Inspect SVG animation with DevTools

I've written a small example of SVG animation. https://codepen.io/mental-dev/pen/YzNvwWR @keyframes{} And trying to inspect it with DevTools > Animations. But it shows nothing. Please help. Thank you
Ilyas Seisov
  • 31
  • 3
3
votes
0 answers

Can we change SVG Image width and height dynamically in react native?

I'm trying to find the way to change the dimensions of the SVG when the KeyboardWillShow and KeyboardWillHide listener occurs. For example, using React native Animated prop we can change the image dimensions using Animated.Image. So how can we do…
The Dude
  • 41
  • 5
3
votes
2 answers

SVG animation endEvent not firing after migrating from Vue 2 to Vue 3

I'm currently migrating a vue 2 / Quasar 1 project to vue 3 / Quasar 2 and I'm struggling with an event on an SVG animation element that doesn't seem to fire in the new version....
skmbr
  • 123
  • 5
1 2 3
…
45 46