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

html svg animation doesnt work on firefox (working on chrome)

I found this svg animation example: http://codepen.io/hbuchel/pen/qLxAB?editors=110 it is working on chrome, but not working on firefox.. I can only see the image without animation.. I don't understand why.. How can I make it working on…
neoDev
  • 2,879
  • 3
  • 33
  • 66
0
votes
1 answer

SMIL Animate SVG "to" value

I'm trying to animate this SVG rect to end on width 100 but for some reason it keeps resetting to the original value. Help! http://codepen.io/corysimmons/pen/RNmNQE
corysimmons
  • 7,296
  • 4
  • 57
  • 65
0
votes
1 answer

Automatically fill color after a delay time - svg

I want to automatically fill color after a fixed delay time (after the animation) Now color is filling only in hover and only when we click it.. I want to automatically fill color after a delay…
Athul Noble
  • 25
  • 1
  • 9
0
votes
1 answer

What if I want the fill color instead of stroke in svg

I watched a video tutorial on youtube about animating an svg and I followed it all it worked well.. BUT the image that I need to animate does not have a stroke it has a fill. Can someone pls help me on how to do this? This is the code that I used…
Nnn
  • 69
  • 4
  • 12
0
votes
0 answers

Why doesn't this svg path animate?

I have a simple SVG with just one path in it and two elements that are supposed to change the d attribute with a 250ms transition and back. When the parent is clicked, the JavaScript triggers the animation. This works to change the d…
Ian
  • 5,704
  • 6
  • 40
  • 72
0
votes
2 answers

SVG SMIL HTML5 Bad value `none` for attribute fill on element set

I've received a SVG SMIL file that I want to use within a HTML5 project. I'm not to familiar when using SVG SMIL files and upon opening the file I can see it's in XML format and I've done all necessary changes to get it working in HTML5, however it…
Simon Hayter
  • 3,131
  • 27
  • 53
0
votes
0 answers

animate svg with css without using inline svg

i'm quite a newbie (started one week ago) to html, css and so on and i wanna create an animated svg graphic in my website. so far i managed to create a good result with an inline svg: http://codepen.io/einserpasch/pen/xbWwOR …
einserpasch
  • 9
  • 3
0
votes
1 answer

SVG transform circle into simple line

I'm trying to animate a simple SVG circle (white background or any other color) so that when you hover over it it becomes a simple vertical line (in other words, it sort of flattens into a line) and on mouse out, well, then it animates into a circle…
deathandtaxes
  • 5
  • 1
0
votes
2 answers

SVG Animation on a ring outside of an icon

I am trying to animate the outer ring of an SVG. Since it's not filled circle, I can't change the element and spell it out with cx and cy and then change it via the animateTransform in the code. What I' trying to do is make the outer ring "pulse"…
Steve UXD
  • 3
  • 3
0
votes
1 answer

Restart Animation with Keyframes

I can't for the life of me figure out how to restart my animation. Here's where I've gotten so far. It's built with svg masking animations. http://codepen.io/djmaller/pen/myrrbd I want it to animate on as it currently is. But I want it to hold for a…
dMaller
  • 113
  • 1
  • 12
0
votes
0 answers

Modifying an SVGAnimateElement at runtime with Batik

I have an SVG document that I display in a JSVGCanvas. The user will be able to select a bunch of elements by dragging a a rectangle around them. I am trying to visualize this selection of elements. I wanted to let them blink while they are…
radlan
  • 2,393
  • 4
  • 33
  • 53
0
votes
1 answer

unable to set transform origin in firefox

I am trying to Create an animation with SVG and CSS3 And it works fine on Chrome but doesn't work on Firefox I have tried adding -moz- prefix to transform-origin: but yet it's not working here is the live sample I have created Css Rules I have…
user3452098
  • 268
  • 1
  • 3
  • 17
0
votes
1 answer

SVG SMIL or RequestAnimationFrame animation

I have 2 options of animating a SVG shape transform attribute. The first one is trough SMIL. The downside is a less browser support. The second one is trough JavaScript, I get a better browser support but add complexity. Are there any performance…
Mircea
  • 11,373
  • 26
  • 64
  • 95
0
votes
1 answer

what is best practice to create an svg with clickable objects

For a website, i'm looking to create a clickable svg (i would love to post an image but i apparently need credit for that - a shame - the svg image is posted in code belo), an image with a central circle and 7 circles surrounding it, where when i…
Justin Othername
  • 111
  • 2
  • 3
  • 9
0
votes
1 answer

D3 speed issue with link animation in directed graph

I am trying to animate the links on a force layout directed graph using the code below. The links are simple lines and not paths. I initiate the animation with a button press. The style change (in onTick) happens immediately but the problem is that…
gaitat
  • 12,449
  • 4
  • 52
  • 76
1 2 3
…
45 46