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

Animate SVG path to smaller size ( like a dot ) in number of seconds

Am trying to animate the following SVG from the current size to smaller size like a dot in number of seconds.
ikuchris
  • 1,162
  • 1
  • 15
  • 33
-1
votes
3 answers

Smooth animate for svg fill

I have an SVG thermometer and I'm trying to animate filling it smoothly for each class. I did thermometer with toggle classes. I'm trying to animate smoothly up-down, and down-up animation for each class I have. https://lore1ei.github.io/…
Александр
  • 187
  • 6
-1
votes
1 answer

Dynamic thermal image using CSS?

I have an illustration made by an illustrator. This is a static thermal image with 6 particular points that I would like to animate (according to the temperature obviously). For example, I would update a JSON file and according to this file, the…
ZazOufUmI
  • 3,212
  • 6
  • 37
  • 67
-1
votes
1 answer

How to animation to all path of SVG

I want to animate to a SVG and delay to any elements. Please see this link and lion SVG. The animation of this is simple but to delay to any path is very Time consuming.
Mehrdadam
  • 11
  • 3
-1
votes
1 answer

SVG paths stays after moving with javascript

I have a rectangle in my SVG, I have one graphic like aircraft and i would like to use mask and move it on random orbit. I'm looking for the sollution for this. EDIT: I would like to get a javascript which makes like the black paths as mask in SVG.…
Zsolt Janes
  • 800
  • 2
  • 8
  • 26
-1
votes
1 answer

SVG rhombus expand animation when clicked

I'm building a website and the customer wants a rhombus/diamond shaped button with text in it, and when it is clicked it should become bigger and push down the other content. I guess the best way to do it would be in SVG, but I have no experience…
Andreas Baggesgaard
  • 41
  • 1
  • 1
  • 5
-1
votes
1 answer

How can below link SVG polygon animation can be created

Would you please tell me how can this http://www.zwei14.de/en/ polygon SVG animation can be created?
Muddassir Hassan
  • 1
-2
votes
1 answer

SVG Animation should only start when on the right Page/ Part of the Website

as the title already says, I need help figuring out how to make my SVG Animation 'wait' or to be more precise trigger at the right page/ part of the Website. I was thinking about using javascript but due to the fact I'm not really good at it (yet…
Mika
  • 1
-2
votes
1 answer

Why is this SVG animation cut in half?

Here is the SVG animation (id="lottie404") that I'm trying to get to display full width. I'm trying to ammend the existing DOM via inspect mode. Is there something wrong with the CSS? I've tried for hours and can't seem to find a solution. Thanks in…
Ozge Cokyasar
  • 301
  • 1
  • 4
  • 16
-2
votes
1 answer

CSS animation: Stretch and compress arc

I need to create an animation effect where an arc is pulsing - alternating between a length of 180 and 102 degrees. Also it needs to elongate/compress symmetrically on both sides at the same time. I have the svg for this arc (src):
user1968919
  • 153
  • 3
  • 13
-2
votes
1 answer

apply rug frings on svg carpet

I have a svg carpet need to apply rug fringes on carpet. consider this circle as a carpet…
Suhel Rana
  • 1
  • 1
  • 6
-2
votes
1 answer

html content inside a SVG

i am trying to use a html content inside a svg code and for some reason SVG doesnt recognize this code. The html code works fine as a standalone. but when i copy this html code inside the SVG's tag it doesnt work. i have tried this foreigntag…
vinodhkumar ramamoorthy
  • 11
  • 2
-2
votes
1 answer

Sticky hover-effect onmouseover in FireFox

If I zoom in and slide my mouse on this rectangles someone of them will stay half-capacity. How can it to fix, to have got ideal situation, as it would be if slide mouse slowly. For example code like this, open with FireFox:
Artem.Borysov
  • 1,031
  • 2
  • 12
  • 29
-4
votes
1 answer

CSS Animations of SVG images not working in Internet Explorer

I need to animate images inside the svg. I am doing this with css3 animations. but somehow its not working in Internet Explorer. it is working fine in firefox and chrome. css3 animations supported in internet explorer for svg images? Below is my…
Jaimin Dave
  • 1,224
  • 10
  • 18
1 2 3
…
45
46