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.
Related
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.
This is the example https://codesandbox.io/s/4xwv953mv0
There are three lines. The original one is hidden the second linked to it by id xlink:href="#line", the third links the second the same way.
Move the slider, the lines will go up in the Chrome, and only one will go up in the Firefox.
If it is a Firefox bug what to do? Is there a way to update SVG with Vue?
Yes. This is a known Firefox bug. Firefox bug report here and here.
There is a simple fix here though. Just change your second use so that it points to the <line> directly, rather than at the <use>.
<use
id="Svg"
xlink:href="#line"
transform="translate(40,10)"
></use>
As an aside. I recommend that you put your line in a <defs> section, rather than hiding it with display:none. This is what <defs> is for, and using display:none can have unintended consequences in some cases.
<defs>
<line
id="line"
x1="0"
y1="0"
x2="100"
:y2="value"
vector-effect="non-scaling-stroke"
/>
</defs>
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.