Questions tagged [animatetransform]
22 questions
4
votes
1 answer
SVG: using "rotate" in animateTransform
In the file from https://upload.wikimedia.org/wikipedia/commons/9/97/Moire_Lines.svg
The animation rotates the lines with no issues in Chrome, Iron, Opera, Vivaldi browsers. It does not work in Firefox ver. 60.0.2 or Internet Explorer 11. It is…
Malae
- 43
- 4
3
votes
3 answers
Smoothly move an SVG line along a rectangular path
I am trying to recreate the following animation:
I am having trouble with getting a line to properly animate around corners. I've tried using an animateMotion-element like so:
…
HaakonFlaar
- 387
- 2
- 4
- 15
2
votes
1 answer
SVG animateTransform scaling keySplines to match Y component of rotating vector
I need to simulate a rotating arrow in 2D. It has to keep pace with the rotating blue arrow.
I started with keySplines shown by the red arrow that gave a nice quadrant when viewed using
http://franzheidl.github.io/keysplines/
But it didn't match the…
Peter Hill
- 43
- 1
- 6
2
votes
0 answers
Slide up/down animation on custom control in wpf
I have a panel which contains 3 custom controls. Now during runtime I only have only two of them visible at any given point in time i.e either top two or bottom two controls keeping the middle control visible at all times.
Hence, when top control is…
Kartik150
- 555
- 1
- 5
- 19
1
vote
0 answers
svg SMIL animation transform origin question
I cannot figure out where to put the transform origin and with what values at the second path (#tran) to resemble the first path (#drop). I want them both to move the same way. The path #tran is the one that I need to behave like the smooth…
Chromebook Acer
- 11
- 3
1
vote
1 answer
SVG feTurbulence filter will not animateTransform rotate on Firefox
This code is saved in a .SVG file and it animates as intended on most browsers, but not on Firefox.
The feTurbulence filter and the rotation animation work separately on any other shapes, but when combined the entire svg breaks and shows nothing.
I…
Cupcake_Ria
- 13
- 5
1
vote
2 answers
SVG AnimateTransform not working in Safari..?
Why is this animation, which works in FF and Chrome, not working in Safari (begin="click" does not trigger the animateTransform in Safari; replace click with for example 0s and you'll see it getting triggered)?
1
vote
1 answer
SVG animateTransform toggle only working once
If you click two subsequent times on the rectangle, you see an animation toggling on and off:
1
vote
1 answer
Save end of SVG animation as png (quickly)
The following animated svg shows a point that is translated from left to right:
1
vote
1 answer
IN SVG can I animate many objects (64) with different start times without having to create 64 different animations??
I know that the tag with xlink:href can run the same animation in many different positions and at different scales, angles, opacities, etc. But can I alter either the START time or DURATION of an xlinked instance of an animation?
I want a 10 x 10…
darrellart
- 11
- 2
1
vote
1 answer
SVG animateTransform not working same as css3 transform
SVG animateTransform not working same as the css3 transform.
svg.truck {
overflow: visible;
}
.smoke{
transform-origin: 50% 50%;
animation: smoke 1.5s infinite ease-out;
}
@keyframes smoke {
from {transform: translate(0, 5px)…
Mo.
- 26,306
- 36
- 159
- 225
0
votes
1 answer
Change svg speed of AnimateTransform speed
I'm trying to dynamically change the rotation speed of my circle, but can't find a solution for this. I want to spin it really fast in the beginning and change it to stand still in e.g. 4 seconds.
I've tried to change the speed with javascript, but…
user2051376
- 51
- 3
- 8
0
votes
1 answer
What am I doing wrong trying to rotate some SVG through an animateTransform tag with "spline" calcmode?
I'm trying to animate a triangle so that its rotation accelerates (and later comes to a stop after a full rotation) and I am trying to use the animateTransform SVG tag, with the calcmode attribute set to "spline".. I can easily get the triangle to…
Bert Meera
- 3
- 1
0
votes
1 answer
How to use animateTransform cx cy values properly?
I am trying to make an animated loading icon in svg, although whenever I check the result in Chrome, or Edge, the rotation animation doesn't react on the cx/cy values (only if I set them to zero, it will be properly rotated, otherwise there is a bit…
Mat
- 461
- 4
- 14
0
votes
0 answers
