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
0 answers

How to animate between paths in SVG file with D3?

I have a SVG file with 5 paths, each one has a different id assigned. The paths are exported from Illustrator. How…
Jure Srpcic
  • 612
  • 1
  • 7
  • 11
0
votes
1 answer

Why when I add function into Snap.load(...loading SVG... my method...) I cannot then call this method, which is inside to Snap.Load()?

Why when I add function into Snap.load(...loading SVG... my method...) I cannot then call this method, which is inside to Snap.Load()? function myComponent() { var paper = Snap("#svg3"); Snap.load("svg/thermometer_o.svg", function (f) { …
kat1222
  • 3
  • 4
0
votes
1 answer

Zooming in/out with animate on hover with snap.svg

I'm building an SVG and animating it in snap.svg because of a lack of IE support for animations (thanks IE). What I have in it's most basic form is a pentagon I'd like to rotate on hover, on mouse out it then resets itself. Code is located in the…
George Wilson
  • 5,595
  • 5
  • 29
  • 42
0
votes
1 answer

SVG animation using inkscape

Im new to SVG animation i have made a cloud using inkscape and i am trying to animate its color. This is my code :
undefinedtoken
  • 921
  • 1
  • 8
  • 26
0
votes
0 answers

How to use snap.svg draw the loading icon

How to use snap.svg draw the loading as this https://jxnblk.github.io/loading/, I think that may use the method Snap.load, but I want it centered in the container. I try to use pager.group to wrap it, but they are all smaller than the original…
Terry
  • 127
  • 1
  • 11
0
votes
1 answer

SVG animation working properly in Chrome but not in Firefox

The SVG animation is working properly in chrome but not in firefox. I am trying to start the animation 0.4 secs after the page loads. Here is the code
matuag
  • 3
  • 1
0
votes
1 answer

Animation in callback not firing, SnapSVG

I'm trying to create a bounce animation that repeats forever. Problem I'm having is that snap doesn't seem to execute animations I put in callbacks. There seem to be some issues on github describing this problem with Snap back at 0.1.1, but they've…
scoob
  • 367
  • 2
  • 14
0
votes
1 answer

how to optimize snap svg animations

I have a snap svg animation which animates a bunch of circles, and draws a line between them if they are within a certain proximity of each other. However, I realize that there is a lot of optimizing I can do, but I'm not exactly sure how to do it.…
mheavers
  • 29,530
  • 58
  • 194
  • 315
0
votes
2 answers

How do I set the style of SVG CSS attributes in Javascript?

I'm trying to dynamically determine the length of an array of SVG paths and then insert this value into the HTML DOM style object for the attributes stroke-dasharray and stroke-dashoffset. var horizontals =…
Orun
  • 4,383
  • 3
  • 26
  • 44
0
votes
0 answers

How to animate text in SVG (possibly without using javascript)

I doing SVG animation of some physical process using svg (basically I want whole animation as a single svg file). Example can be seen here: https://s3.amazonaws.com/public-bucket-vzi0CDPFDE4ywJfvfylfpnDW/dwg.svg . Now I'd like to add label…
jb.
  • 23,300
  • 18
  • 98
  • 136
0
votes
2 answers

SVG border animation

I've found this cool SVG border animation and i tried to apply this to my website, however my website contains images that are of different sizes and thus animation is limited by the width and height. Is there any way to edit the code so that i can…
JustinC
  • 3
  • 3
0
votes
0 answers

Debugging SVG performance on IE 10

I have a pretty complicated SVG doc I'm displaying on IE 10. It's stretched to the full size of the viewport and uses the viewBox attribute. I'm noticing that transforming layers in the doc is EXTREMELY slow (like, 1fps slow). This does not happen…
Dany Joumaa
  • 2,030
  • 6
  • 30
  • 45
0
votes
1 answer

Designing 2d animation

i have been asked to compare the following languages and come up with the best to generate 2d graphics.can u please suggest me the best out of them . Languages are-->webgl,opengl,svg,canvas using html5 My project is basically to design a 2d…
tar16feb
  • 35
  • 7
0
votes
0 answers

D3.js stacked area chart resizing issue

I have a stacked area chart using d3.js. I have a function that resizes & redraws the visualization on window.resize. The logic is to remove 10% margin and scale x/y axis according to window size. You can see it…
workwise
  • 1,003
  • 16
  • 33
0
votes
4 answers

Animated semicircles in logo with SVG

I would like to make this graphic in SVG. I can use tags and I can manipulate the SVG document with javascript. I would prefer to do it all in SVG if possible.
Sean Clark Hess
  • 15,859
  • 12
  • 52
  • 100
1 2 3
…
45 46