What I have is some svg element produced by JS code on the fly such as lines and circles that consist of some geometry figure, what I want to achieve is to try to rescale the figure continuously using svg animation feature. I mean of course I could recompute the coordinates of each point of the line and center point of the circle and start from there but that would be a too tedious solution how can I do better?
Thanks a lot!
Put them in a <g> element and then give that <g> a transform attribute like transform="scale(1)" and animate that using a child <animateTransform> element. Something like this perhaps...
<animateTransform attributeName="transform"
attributeType="XML" type="scale" from="1" to="3"
additive="sum" begin="1s" dur="5s" fill="freeze"/>
Related
<g id="Closed_Eyes">
<path d="Closed eye data" />
</g>
<g id="Open_Eyes">
<animate dur="0" attributeName="opacity" from="1" to="0" repeatCount="indefinite" />
<path d="Open eye data" />
</g>
I have an SVG face and like to animate blinking eyes. The animate does not work because the duration is zero, but if I change zero to some time, it is animate opacity. I should not be using opacity but I must use hiding on the open_Eyes object. The idea is that if we hide open_Eyes, the background close_Eyes shows and then shows. This will give if eyes are blinking. Kindly guide me on how we can animate blinking with animate.
I tried with opacity, but it changes the opacity with time. That is wrong. Perhaps I need two animations. First, hide the open_Eyes object and then show it.
Using dur="0" in animate won't work. If you just want to toggle the object you could either use a really small duration value (wouldn't recommend it though) or use the set tag like this:
<animate dur="0.001s" attributeName="opacity" from="1" to="0" repeatCount="indefinite" />
or this
<set attributeName="visibility" to="hidden" fill="freeze" />
You also dont need the repeatCount if you just want it to stay invisible or when using no duration. Use fill="freeze" instead, as seen in the second code example i made, to keep the state after the animation finished.
I'm trying to have two animations in my SVG run one after another.
This is the way they have been written in. They are written into a group with a few primitives inside. I'm trying to make the whole group rotate and then translate.
However when I run this, the transform seems to reset at the end of the first animation
<animateTransform attributeName="transform"
id="anim1"
type="rotate"
from="0 72 72"
to="40 72 72"
begin="0s; anim2.end"
dur="1s"
fill="freeze" repeatCount="1" />
<animateTransform attributeName="transform"
id="anim2"
type="translate"
from="0 0"
to="10 0"
begin="anim1.end" dur="0.4s" fill="freeze"/>
Define additive="sum" to apply one transformation on top of the other.
So if you want to start the second animation from the end point of the first, add the attribute to the second animation. The way the animations are chained, then the first animation will start again. If you want it to restart from the final position of the second animation, add the attribute also to the first animation.
I perform smil animation where I want fill to loop between two values ; this is what I use to
<polygon points="500,519 512.5,540 537.5,540 550,519 537.5,498 512.5,498" class="hex" id="259">
<animate attributeName="fill" values="#080808;#82A1FF;080808" dur="4s" fill="freeze" begin="0" repeatCount="indefinite"></animate>
</polygon>
It does loop but seem it stuck on fill#82A1FF for the most of the 4 seconds ,it only slighly appears to move towards fill #080808 but rolls back to fill#82A1FF again.
I want the animation to be more uniform ,like a blinking light.
But now it looks like it is easing too much.
This is probably really simple but I am starting to learn svg and am confused by the behavior of the following code:
<svg>
<defs>
<path id="thepath" fill="none" stroke="#000000" d="M25,0 L200,200" />
</defs>
<rect x="25" y="0" width="50" height="100" fill="slategrey">
<animateTransform id="one"
attributeType="xml"
attributeName="transform"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="1s"
repeatCount="indefinite"
end ="onemove.end"/>
<animateMotion id="onemove" dur="3s">
<mpath xlink:href="#thepath"/>
</animateMotion>
</rect>
What I am expecting to happen is the rectangle rotate in a circle on a center point. Which it does.
I expect it to also travel down the path. Which it does.
I expect it to stop rotating once it is down the path. Which I think it does.
I expect it to stay at the end of the path. Which it does not.
It resets to the start point and has stopped rotation. So I am not sure if the reset stopped the rotation or the actual end statement stopped rotation.
So my question is two fold: why does it reset and how do I prevent that.
Also, any links to good svg tutorials would be appreciated. While I am finding a lot tutorials, I think I am not finding quality because I have a feeling this is a very simple issue I should already know from my research.
I think I need something in the path to prevent the reset but I have no idea what.
Thanks in advance.
You need to add fill="freeze" to the <animateMotion> so it will freeze the effect at the end. See: SVG - Chapter 19 Animation, Timing Attributes:
<animateMotion id="onemove" dur="3s" fill="freeze">
<mpath xlink:href="#thepath"/>
</animateMotion>
See it working here: JSFiddle
There is a W3C SVG Tutorial written in SVG. A very good community-maintained SVG Tutorial at MDN and the SVG Specification itself which is very readable and has many examples. It's the best reference, but you should also try out everything in different browsers using CodePen or JSFiddle.
I am trying out some animations and transformations in an SVG image.
I am trying to translate and resize and translate a path as well as animate the rotation of it.
It appears I can only translate and resize or rotate at a time. If I try them all together then the translate and resize do not hold: if I remove the animation then they are moved and the right size.
This behavior is consistent across Linux and OSX as well as FF and Safari.
Example:
<use
id="tengear"
fill="#ffffff"
stroke="#E2E2E2"
stroke-width="3"
transform="scale(0.40) translate(62, 180)"
style="filter:url(#distanceBlurFar)"
xlink:href="#tengearuse"
>
<animateTransform
attributeType="XML"
attributeName="transform"
type="rotate"
from="0,162,280" to="360,162,280"
begin="0s" dur="11"
repeatCount="indefinite"
/>
</use>
This should be small and moved as well as rotating. However it is big and not moved but is rotating.
<use
id="tengear"
fill="#ffffff"
stroke="#E2E2E2"
stroke-width="3"
transform="scale(0.40) translate(62, 180)"
style="filter:url(#distanceBlurFar)"
xlink:href="#tengearuse">
</use>
This one is moved and rotated but not rotating.
Can someone help me out on how to get this working?
*you will need to assume that the use and other references are valid
Full source here
It turns out that it was a RTFM problem.
Go to the spec and read about additive="sum" and additive="replace"
Now it reads like:
<use id="tengear" fill="#ffffff" stroke="#E2E2E2" stroke-width="2.5" transform="scale(0.25) translate(390, 360)" style="filter:url(#distanceBlurClose)" xlink:href="#tengearuse">
<animateTransform
attributeType="XML"
attributeName="transform"
type="rotate"
from="0,390,360" to="360,390,360"
begin="0s" dur="11"
repeatCount="indefinite"
additive="sum"
/>
</use>
It is unclear what you are trying to do and it would help if you cut your example to a size where you could post it here. It sounds as if you should use animateTransform and animateMotion. I often start by finding an example which already works and then gradually modifying it to include my own requirements. And always only use as little functionality as possible
See http://www.w3schools.com/svg/el_animatetransform.asp