I have a loader gif, but I want this animation using svg
[1]: https://i.stack.imgur.com/h3oJC.gif
Enjoy:
<svg>
<rect fill="blue" x="0" y="0" width="300" height="140"/>
<circle fill="white" cx="150" cy="70" r="60" stroke="blue" stroke-width="5" />
<path fill="none" stroke="blue" stroke-width="10" d="M0,0 Q 30,-30 60,0 Q 90,30 120,0 Q 150,-30 180,0 210,30 240,0">
<animateTransform attributeName="transform"
attributeType="XML"
type="translate"
from="-30 70"
to="90 70"
dur="1s"
repeatCount="indefinite"/>
</path>
</svg>
Related
If you view this SVG, I'm animating the transform property, and it moves from the top left by default. How do I change it to animate from the center instead?
<svg width="400" height="400" viewBox="0 0 400 400">
<rect width="400" height="400" fill="#495ade"/>
<g>
<circle cx="50" cy="50" r="50" fill="#49de7d"/>
<animateTransform attributeName="transform"
type="scale"
values="1 1;.5 .5;1 1"
begin="0s"
dur="1.5s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0.4 0 0.5 1; 0.5 0 0.5 1"
/>
</g>
</svg>
What I tried already:
This answer says to just throw X & Y coords after each of the values listed. So I tried values="1 1 50 50;.5 .5 50 50;1 1 50 50" but that kills the animation.
You can also use from and to instead of values, and include an X & Y origin, but I need 3 animation states, not two.
Instead of the animation animateTransform type =" scale ", you can use the animation of increasing the radius of the circle
In this case, it will not be necessary to define the transform-origin since the circle is in the center of the canvas.
<svg width="400" height="400" viewBox="0 0 400 400">
<rect width="400" height="400" fill="#495ade"/>
<g>
<circle cx="200" cy="200" r="50" fill="#49de7d">
<animate attributeName="r"
values="50;25;50"
begin="0s"
dur="1.5s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0.4 0 0.5 1; 0.5 0 0.5 1"
/>
</circle>
</g>
</svg>
Pause animation in intermediate states
<svg width="400" height="400" viewBox="0 0 400 400">
<rect width="400" height="400" fill="#495ade"/>
<g>
<circle cx="200" cy="200" r="50" fill="#49de7d">
<animate attributeName="r"
values="50;25;25;50;50"
begin="0s"
dur="1.5s"
repeatCount="indefinite"
/>
</circle>
</g>
</svg>
Update
Consider Implementing CSS Animations
#crc1 {
transform-origin:center;
transform-box:fill-box;
animation: scale 1.5s infinite;
}
#keyframes scale {
0%{transform:scale(1);}
50%{transform:scale(.5);}
100%{transform:scale(1);}
}
<svg width="400" height="400" viewBox="0 0 400 400">
<rect width="400" height="400" fill="#495ade"/>
<g>
<circle id="crc1" cx="200" cy="200" r="50" fill="#49de7d"/>
</g>
</svg>
Upd2
SMIL animation
On excellent advice from #Sphinxxx, add css rules to the group tag, thus keeping the animateTransform SVG
<svg width="400" height="400" viewBox="0 0 400 400">
<rect width="400" height="400" fill="#495ade"/>
<g style="transform-origin: center; transform-box: fill-box;">
<circle cx="200" cy="200" r="50" fill="#49de7d"/>
<animateTransform attributeName="transform"
type="scale"
values="1 1;.5 .5;1 1"
begin="0s"
dur="1.5s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0.4 0 0.5 1; 0.5 0 0.5 1"
/>
</g>
</svg>
It's easiest to have the circle at the origin, that way the scale works from its centre.
Then we need to translate the <g> element instead so the circle appears at the same place.
Finally we need to actually animate the circle and not the <g> element by wrapping the animateTransform by the <circle> element.
<svg width="400" height="400" viewBox="0 0 400 400">
<rect width="400" height="400" fill="#495ade"/>
<g transform="translate(50, 50)">
<circle cx="0" cy="0" r="50" fill="#49de7d">
<animateTransform attributeName="transform"
type="scale"
values="1 1;.5 .5;1 1"
begin="0s"
dur="1.5s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0.4 0 0.5 1; 0.5 0 0.5 1"
/>
</circle>
</g>
</svg>
Alternatively we could transform the circle itself and then use additive="sum" to apply the transform animation on top.
<svg width="400" height="400" viewBox="0 0 400 400">
<rect width="400" height="400" fill="#495ade"/>
<g>
<circle cx="0" cy="0" r="50" fill="#49de7d" transform="translate(50, 50)">
<animateTransform attributeName="transform"
type="scale"
values="1 1;.5 .5;1 1"
begin="0s"
dur="1.5s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0.4 0 0.5 1; 0.5 0 0.5 1"
additive="sum"
/>
</circle>
</g>
</svg>
below i create a simple fiddle with svg animation:
<svg width="250" height="250" viewbox="0 0 20 20">
<line x1="10" y1="0" x2="10" y2="10"style="stroke:rgb(255,0,0); stroke-width:1">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="7.5s" repeatCount="indefinite" />
</line>
<circle cx="5" cy="5" r="1" style="fill:rgb(0,255,0);"/>
<circle cx="15" cy="15" r="1" style="fill:rgb(0,0,255);"/>
</svg>
My question is: is there a way that I can make blue and red point bump (change their color for example) when red line hover them?
Thank you
This is my solution: I'm creating a mask with the line. There are 2 extra circles (fill:gold) that are masked by the line.
I'm putting the animated line inside a <g stroke="red"> because I want the used line to be white.
svg{border:1px solid;}
<svg width="250" height="250" viewbox="0 0 20 20">
<circle cx="5" cy="5" r="1" style="fill:rgb(0,255,0);" />
<circle cx="15" cy="15" r="1" style="fill:rgb(0,0,255);"/>
<mask id="mask">
<use xlink:href="#L" style="stroke:white"/>
</mask>
<g stroke="red">
<line id="L" x1="10" y1="0" x2="10" y2="10" >
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="7.5s" repeatCount="indefinite" />
</line>
</g>
<g style="fill:gold;mask: url(#mask)">
<circle cx="5" cy="5" r="1" />
<circle cx="15" cy="15" r="1"/>
</g>
</svg>
I want the yellow rectangle to be rotated 45 degrees (which it is), but I also want the direction of motion to rotate, so that the yellow rectangle appear to go "downhill" (down the blue line). I don't want it to keep moving horizontally.
<svg width="800" height="400" viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<!-- decorative circles for the ends of the blue line. -->
<g transform="rotate(45, 400, 200)">
<path id="myPath" d="M150,200 L650,200" fill="none"
stroke="blue" stroke-width="5.6" />
<circle cx="150" cy="200" r="8.94" fill="blue" />
<circle cx="650" cy="200" r="8.94" fill="blue" />
</g>
<g>
<rect x="0" y="0"
fill="yellow" stroke="red" width="84" height="56"></rect>
<animateMotion dur="4s" repeatCount="1" rotate="45"
path="M150,200 L650,200" >
</animateMotion>
</g>
</svg>
Another way to do this is to put <mpath xlink:href="#myPath" /> as a sub-element of the animateMotion SVG element. In that case you can leave out path="M150,200 L650,200".
You mean like this? I've moved the animateMotion so it only applies to the rect and added a transform to the containing <g> element. I could have just put the rect in the other <g> element I guess which would have been simpler.
<svg width="800" height="400" viewBox="0 0 800 400"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" >
<!-- decorative circles for the ends of the blue line. -->
<g transform="rotate(45, 400, 200)">
<path id="myPath" d="M150,200 L650,200" fill="none"
stroke="blue" stroke-width="5.6" />
<circle cx="150" cy="200" r="8.94" fill="blue" />
<circle cx="650" cy="200" r="8.94" fill="blue" />
</g>
<g transform="rotate(45, 400, 200)">
<rect x="0" y="0"
fill="yellow" stroke="red" width="84" height="56">
<animateMotion dur="4s" repeatCount="1"
path="M150,200 L650,200" >
</animateMotion>
</rect>
</g>
</svg>
How do I use animateTransform in an SVG to scale an object from the center point instead of the upper-left corner?
Example:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
<circle style="fill:blue;" cx="50" cy="50" r="45">
<animateTransform attributeName="transform"
type="scale"
from="0 0"
to="1 1"
begin="0s"
dur="1s"
repeatCount="indefinite"
/>
</circle>
</svg>
(Codepen: http://codepen.io/anon/pen/wKwrPg?editors=100)
Change your scaling transform to use additive="sum" and apply an additional transform that translates the circle to the center of the image. So instead of defining the shape at the center of the image, define its center to be 0 0 and then use the transform attribute to translate it to 50, 50 (the exact center of your particular image).
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
<circle style="fill:blue;" cx="0" cy="0" r="45" transform="translate(50 50)">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
from="0 0"
to="1 1"
begin="0s"
dur="1s"
repeatCount="indefinite"
/>
</circle>
</svg>
Here's another example using the defs and use tags to reuse the circle definition:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
<defs>
<circle id="def-circle" style="fill:blue;" cx="0" cy="0" r="45" />
</defs>
<use xlink:href="#def-circle" transform="translate(50 50)">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
from="0 0"
to="1 1"
beg="0s"
dur="1s"
repeatCount="indefinite" />
</use>
</svg>
You could also have done that with the help of CSS styles and transform-origin property.
The benefit is that you do not have to calculate coordinates and translate your objects.
<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<style>
#logo { transform-origin: center; }
</style>
<g id="logo">
<animateTransform attributeName="transform" begin="0s" type="scale" dur="2s" from="1" to=".5" repeatCount="indefinite"/>
<circle r="8" cx="12" cy="12" />
</g>
</svg>
#logo {
transform-origin: center;
}
<svg version="1.1" viewBox="0 0 24 24" width="100%" height="100px" xmlns="http://www.w3.org/2000/svg">
<g id="logo">
<animateTransform attributeName="transform" begin="0s" type="scale" dur="2s" from="1" to=".5" repeatCount="indefinite"/>
<circle r="8" cx="12" cy="12" />
</g>
</svg>
In your specific case, yet another way would be to animate the radius of the circle itself:
<circle r="0" cx="50" cy="50">
<animate attributeName="r" from="0" to ="10" begin="1s" dur="300ms" fill="freeze" />
</circle>
Thanks to Robert Longson for this answer.
I try to rotate rectangle around his central point but I can't understand how it is working.
Is there simple code in svg that make the issue without Cos Sin function or complex code.
I try after some alot of testing and I finally sucsses but if I want to resize the retangle or to move it to centeral page all be mess,can you give me intentness how to do that?
thanks.
jsfiddle.net
my code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect x="10" y="10" height="100" width="100"
style="stroke:#FF0000; fill: #9C4100">
<animateTransform
attributeName="transform"
begin="0s"
dur="40s"
type="rotate"
from="0 60 60"
to="360 60 60"
repeatCount="1"
/>
</rect>
<circle id="pointA" cx="60" cy="60" r="48" />
</svg>
Center your images on origo and "transform" them to the desired position.
I believe you want something like this;
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(250,200)">
<rect x="-50" y="-50" height="100" width="100"
style="stroke:#FF0000; fill: #9C4100">
<animateTransform
attributeName="transform"
begin="0s"
dur="20s"
type="rotate"
from="0"
to="360"
repeatCount="1"
/>
<animateTransform attributeName="transform"
type="scale" from="1" to="2"
additive="sum" begin="0" dur="20s" fill="freeze"/>
</rect>
<circle id="pointA" cx="0" cy="0" r="48" />
</g>
</svg>