I am animating svg elements using <animate>. Is there an equivalent property to the animation-play-state property in CSS animation in SVG animation? I've looked at this documentation Mozilla docs and it seems that there isn't one, but I just want to make sure.
This website Introduction to SMIL animation in SVG is useful. From it I learned that beginElement() and endElement() in a JavaScript script, can be used to start and end animations.
The begin attribute should be set to indefinite. An example is shown below.
JS
function start(id){
D.getElementById(id).beginElement()
}
SVG
<ellipse fill="lightpink" onclick="start('A')" cx="40" cy="140" rx="22" ry="14">
<animate id="A" attributeName="cx" dur="3s" begin="indefinite" values="40;400;40"/>
</ellipse>
If an animation tag A contains the attribute end="indefinite" then A.endElement() will succeed in terminating that animation.
Also, a JavaScript call to document.documentElement.pauseAnimations() will stop all SMIL animations within an SVG document, freezing objects at their current position.
document.documentElement.unpauseAnimations() resumes SMIL animations from whatever position they were paused at. More about pauseAnimations() and unpauseAnimations() here at W3C and MDN Docs: SVGSVGElement.
Related
Context: I'm working on an infographic in SVG. I want to have the document come to life thanks to animations, especially by chaining animations. I'm already familiar with SVG but started learning SVG animation only recently.
Since SMIL is deprecated, I'm trying to produce animations in pure SVG.
Looking at this article (esp. the Handy Dandy Replacement Reference Chart at the end), I'm under the impression that I need to stop using suc hattributes:
fill="freeze"
repeatCount="indefinite"
begin="hover"
begin="circ-anim.begin + 1s"
…because they are part of SVG SMIL.
But, if I look at the SVG reference on Mozilla, I see <animate> and <animateTransform> inside the list, with no warning about them being SMIL, or the need to stop using them.
Moreover, it seems Chrome normally warns against the use of SMIL animations in the console but I can see no such warning when using <animate> or <animateTransform> (be it in an SVG document, or inside an HTML document that includes an inline or object SVG.)
Long story short, it's not clear to me what is SMIL and what is pure SVG. Can anyone shade some light on the topic? Can I use <animate> and <animateTransform>?
SMIL is no longer deprecated by Chrome.
We value all of your feedback, and it's clear that there are use cases serviced by SMIL that just don’t have high-fidelity replacements yet. As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.
Basically SMIL in SVG is everything in the Animation chapter of the specification.
That's the <animate> element, the <set> element, the <animateMotion> element and the <animateTransform> element. (the SVG specification also contains an <animateColor> element which should not be used, you can just replace that with animate).
I've enbedded d3's force directed graph layout into extjs tabs so that each time a new tab gets added a new graph svg gets generated.
No Problemo so far.
Now I intended to turn the graph into a directed one (by adding a marker and tell the lines to use it)
Each generated svg elements is following this pattern:
<svg width="100%" height="100%">
<defs><marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="3" markerHeight="3" orient="auto"><path d="M0,-5L10,0L0,5" fill="#ccc"></path></marker>
</defs>
<g transform="translate(4,0) scale(1)"><line class="link" sig="30.84" style="stroke-width: 3;" x1="538" y1="347" x2="409" y2="467" marker-end="url(#end-arrow)"></line>
...
</g>
</svg>
With Crome everything works just fine.
So I arrived at the concusion that the structur and
the way I generate the svgs should be more or less correct.
But with Firefox the Markers will only show for the first svg. (the first tab)
All other svgs won't show any Arrowheads.
"Inspect Elements" tells me the Markers are there and that the lines are refering to them.
And this is where I'm running out of Ideas where or what to look for. :(
You have multiple non-distinct IDs within the same html or svg document. This is invalid, different UAs respond differently but as you're not allowed to do this, it doesn't really matter that they are inconsistent.
I want to embed some SVG into SVG.
Therefor I want to use the <image> element since I want to keep my SVG separated.
But when I include my SVG like that:
<image xlink:href="svgs/munitionsmangel.svg" width="20" height="20" x="120" y="70" />
It works, but does not scale the SVG up when I zoom with my browser, it just stays small.
But when I embed just the same SVG file as a symbol and include it like that:
<use xlink:href="#munitionsmangel" width="20" height="20" x="80" y="70" />
it just scales up like a charm.
What is the problem here?
Edit: Seems like this is a bug with Firefox, in the current version 21
Chrome scales up the image as well...
Even more strange, if I include a raster image with image, both Firefox and Chrome scale it...
Edit 2: Even IE 9 has the desired behaviour, although its rendering of background colors is a bit strange, so its only Firefox which sucks
Since this really seems like a bug in Firefox, I will use the <use />-tag instead, maybe in combination with XMLHttpRequest to insert the <symbol /> dynamically.
Or even only XMLHttpRequest with inserting the node directly.
I cannot think of a better solution, so if there is really a better answer, just post it!
I am making an animated SVG donut chart. My best try for the moment is here. But this is not exactly what i want. I want the elements appear at the start, then fade out before another one has appeared on the screen, then wait for all other elements to appear and fade out, and then to start this cycle again from the first element. As you see, now elements are fading in/out together, only their animation start times differ. I tried values/keyTimes attributes in another try. But the animation is not working in any browser i know.
Here is the problem code in first SVG:
<animate
attributeName="opacity"
begin="0ms" //This is for the first element, for anothers it differs
//I wish there is `pause` attribute, to pause animation repiting...
dur="3000ms"
from="0.7"
to="0"
repeatCount="indefinite"/>
Here is another code sample
<animate
attributeName="opacity"
begin="0ms"
keyTimes="0,0.2,1"
values="0.7,0,0"
dur="15000ms"
repeatCount="indefinite"/>
As you see, i tried to increase animation duration, but to end fading of element at 20% (i have five elements to fade) of this time. But it does not work.
Tried reordering attributes, using from and to with two-valued keyTimes and long dur with no effect. There must be some cunning trick here...
P.S. This is almost what i want, but i need animation to repeat.
The problem is commas in keyTimes and value attributes - need to use semicolons and read docs twice.
I have a path that I want to animate an element (image in this case) along. But I just want it to animate along a part of the path. Wait there until the user interacts and then animate it along the rest of the path.
With other animations you could always specify from and to attributes. My thought was that you could do it like this:
JavaScript
//user press some key
animationElement.setAttribute("from", "0.0"); //beginning of path
animationElement.setAttribute("to", "0.5"); //middle of path
animationElement.beginElement();
...
//user presses another key
animationElement.setAttribute("from", "0.5"); //middle of path
animationElement.setAttribute("to", "1.0"); //end of path
animationElement.beginElement();
svg
<path id="myPath" d="m1119,29l-80,137l-601,52l-152,318l-381,218" stroke="#000000" fill="none" pathLength="1" />
<image xlink:href="someImage.png" width="231" height="262">
<animateMotion fill="freeze" begin="indefinite" end="indefinite" from="0" to="0.4">
<mpath xlink:href="#myPath" />
</animateMotion>
</image>
Have you considered splitting the motionpath in two parts, and then changing the xlink:href on the mpath element?
I have been trying to do the same thing without success.
I would not expect the from/to described in your question to work because these attributes are not appropriate.
I have been experimenting with keyTimes and keyPoints but these do not seem to work properly (when viewed in chrome or Firefox). Any inconsistent settings break the animation and any consistent settings just have the motion moving at a constant rate across the whole path whatever they are set to.
I'm not sure if this is a bug in the svg implementation or not. For example:
keyTimes="0;0.2;0.3;0.9;1" keyPoints="0;0.5;0.6;0.7;1" produces smooth movement across the path.
If they worked I think that keyTimes="0;1" keyPoints="0;0.5" would achieve the desired objective.
Currently I'm having to use multiple paths and thread the animations together appropriately which is complex and annoying but at least it gets the job done.