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

How to create an SVG animation by adding points to a curve

I have a set of points (2D), say A0, A1, A2, ..., A100 I would like to animate those points in a way to have a curve drawn from them, so in the first frame the curve will contain A0 (So a single points), then the next frame will have the next…
The Quantum Physicist
  • 24,987
  • 19
  • 103
  • 189
0
votes
1 answer

How to change the size of an animated circle onclick using raphael js

I've got a animated circle which looks like this: the blue part counts down, so for example from full to nothing in 10 seconds. The orange circle is just a circle. But I want that the circle will be smaller when you click on it. So i made an…
hgwd92
  • 69
  • 3
  • 11
0
votes
1 answer

Javascript event for SVG loaded in Iframe

How can i attach a Onclick event handler to all SVG path element? I have loaded my SVG in an iframe. I tried to use the following but the click event is not firing. jQuery(function ($) { debugger; $('path').click(function () { …
Anish
  • 872
  • 5
  • 21
  • 42
0
votes
1 answer

Trouble Animating svgX of HighCharts Column Label

BOUNTY UPDATE: I'm putting a bounty on this, so I wanted to give a little bit more information in case someone comes up with a different solution than modifying my code. The object is to animate the actual category position in HighCharts for bar and…
MatthewKremer
  • 1,549
  • 1
  • 14
  • 25
0
votes
0 answers

Weld overlapping svg paths into one path using javascript

Would there be a way to weld 2 overlapping svg paths together into one unified single path using javascript?
nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
0
votes
1 answer

SVG animateTransform does not start

I was writing a piece of SVG code and ran into the following issue: The animateTransform tag won't work (cannot start the animation) if the SVG isn't appended to the document with the window onload event. Example:…
WWen
  • 23
  • 2
-1
votes
1 answer

how to get center coordinates of rectangle in raphaeljs

I tried to get from rect.cx and rect.cy from RaphaelJS.rect API. But I am getting undefined in the console. I tried var cx = rect.cx; var cy = rect.cy; and console.info(rect.cx); console.info(rect.cy); all showing undefined. how to get center…
Sun
  • 3,444
  • 7
  • 53
  • 83
-1
votes
1 answer

Must an SVG be placed in the html file for it to be animated

I read that if an SVG file is referenced through the image tag it cannot be animated with CSS or JavaScript, does that mean that for an SVG to be animated, it must be placed in the HTML file.
YUSUF LAWAL
  • 1
  • 1
-1
votes
2 answers

How to draw letter R with SVG

I have a svg of letter B here is the code:
Nasyx Nadeem
  • 241
  • 2
  • 12
-1
votes
2 answers

svg circle color change at certain point

I have a svg that circle is moving around through path. I want the circles' color are changed at some points (ex. mid of the path) https://codepen.io/lzwdct/pen/poRYVXZ
Lee
  • 333
  • 3
  • 7
  • 19
-1
votes
1 answer

In SMIL, animate STROKE-WIDTH of all CIRCLES and LINES in same GROUP

Inkscape SVG Link is a map of locations from a web page. Note the location-dot (a CIRCLE) for Santa Fe New Mexico at 8 o'clock. See how it pulses. That is animating STROKE-WIDTH for that particular CIRCLE. What I am wanting to do, is call that same…
Gan Uesli Starling
  • 1
  • 1
-1
votes
2 answers

Animate the tuck with the road

I am trying to animate the truck over road on the image. I have made the snipped for it below. all of images are on svg file. But i am not sure how to animate the tuck within the road. how can i animate the truck so that it goes within the road…
umanga shrestha
  • 368
  • 2
  • 8
  • 29
-1
votes
1 answer

What's this weird gap in some corners in my svg text?

I'm testing svg animation with this outlined text that I created in Illustrator. Here is the animation I'm working on. https://jsfiddle.net/kaguraichi123/4rkucmL7/3/ First, I noticed this gap in some corners like the one in the image below. So I…
Ryo
  • 75
  • 8
-1
votes
1 answer

Part of SVG changing in animation on hover

Included here is an image of the svg file (could not upload svg file) I would like to hover mouse over, and radiantly change background (to blue) only of the circle, from the inner circle to the edges, as an animation. Even better if the animation…
Raf A.
  • 124
  • 1
  • 4
  • 9
-1
votes
1 answer

SVG SMIL animation not working in Firefox and Edge

I'm using the following SVG as a spinner in an HTML document:
HelloWorld
  • 3,381
  • 5
  • 32
  • 58
1 2 3
…
45
46