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

SVG animation won't re-fire animation

i have two SVG animate's appended to a path element. I want to mouseover and have Anim1 fire then mouseout and Anim2 fire and I want this to be repeatable. I'm using begin=X.mouseover, begin=X.mouseleave and fill="freeze". It works well the first…
user1456958
  • 59
  • 1
  • 8
0
votes
1 answer

SVG: animateMotion along animated path

When I use animateMotion along an animated path, Firefox (26) follow the original path while Opera (17) and Chrome (32) follow the changing path. For example, in the following svg the red rectangle ends at position of 100,10 in FF while at 50,10 in…
Leos Ondra
  • 1,575
  • 3
  • 11
  • 16
0
votes
1 answer

How can I debug HTML elements and javascript in Android and iOS?

I have been working on a project which uses SVG animation. I works perfectly on PC browsers but it doesn't work in iOS safari and chrome. And it partially works in android stock browser. Please help me how to debug it.
Anish Shah
  • 7,669
  • 8
  • 29
  • 40
0
votes
0 answers

episodic movement using SMIL in SVG

i have an attempt at a SMIL animation of a simple SVG figure at http://jsfiddle.net/emanuensis/H68jS The idea is that every mouse over the words up or down will cause the yellow puck to move for 1 second in that direction and stop ... and await…
emanuensis
  • 133
  • 2
  • 10
0
votes
1 answer

feGaussianBlur, feOffset and other SVG tags not working in Pyside WebView

Does PySide WebView not support these tags? Or is there anyway to support these tags? This is my SVG Code. I have made an SVG circle which takes this filter and performs some color transition using javascript
Anish Shah
  • 7,669
  • 8
  • 29
  • 40
0
votes
2 answers

SVG animation in browser

I have a bunch of svg circles in a group. I would like them to move to the left a little bit 30 times a second to create a scrolling effect. I am using requestAnimationFrame at an interval of 1/30 of a second, and I apply setAttribute('transform',…
rustybeanstalk
  • 2,722
  • 9
  • 37
  • 57
0
votes
1 answer

scale to the right side

I'm trying an animation where a rectangle scales from 1 to 3 and then should scale back to 1. But, the catch is the scaling should begin at top left corner and end at top right corner.
Sanjeev
  • 1,838
  • 1
  • 16
  • 28
0
votes
1 answer

Animate SVG Path Data

I am trying to animate an SVG's path data attribute using jQuery. At the moment, I have created the SVG, and stored two paths, with a button that adds an animate element. I have success when I alter the attribute directly (shown by the first svg),…
Sj.
  • 1,402
  • 1
  • 12
  • 9
0
votes
1 answer

Animate a Raphael element and its set of glow paths

This answer has been accepted but it does not work as glowSet.animate({cx: 100}) will not move the glow as well as the circle. Additionally to animate the glowSet path objects, you need to apply a transformation, something like this but a simple…
AJP
  • 26,547
  • 23
  • 88
  • 127
0
votes
1 answer

How do I transform polygon into rect on hover?

I would like to create an interactive map of the USA. Whenever a user puts their mouse over a state, I would like the polygon to transform into a hovering rectangle filled with information that the user can click. Would I need to create a rect that…
Jay
  • 185
  • 2
  • 7
  • 21
0
votes
0 answers

Make SVG animation moving as the video is playing

I have a HTML5 video tag and a SVG animation. What I want to achieve - When the video is playing i want the animation moving with the same speed as the video. The animation looks like this
Bankin
  • 777
  • 1
  • 16
  • 31
0
votes
1 answer

Know if there are some elements on other element in SVG?

I am trying to simulate movement of elements in SVG i have some circles and i need to get event when one circle is touching other Circle , or starting to hide it. Is there an attribute or function ? thanks in advance
shay levi
  • 319
  • 3
  • 11
0
votes
1 answer

is there a resizing animation for SVG element

What I have is some svg element produced by JS code on the fly such as lines and circles that consist of some geometry figure, what I want to achieve is to try to rescale the figure continuously using svg animation feature. I mean of course I could…
user1935724
  • 554
  • 1
  • 6
  • 18
0
votes
1 answer

SVG loading animation - can I combine and and ?

I have an SVG-based loading animation, aka "spinning weasel" but I'm wondering if I can code this more efficiently by utilizing a base animation (the fading out attributes) and referencing it in my tags?
tim
  • 3,823
  • 5
  • 34
  • 39
0
votes
1 answer

Animate infographic SVG with CSS (donut chart)

I'd like to make a 'dashboard' page and show some figures in a graphical nice way. My idea is to use an Illustrator design, export it as SVG and change the charts with CSS according to the values from the database. Like these elements:…
Sander Goorden
  • 3
  • 1
  • 3
1 2 3
…
45 46