70156

failure of `fill=“freeze”` in animation

Question:

i have an attempt at a SMIL animation of a simple SVG figure at <a href="http://jsfiddle.net/emanuensis/NNvjA/" rel="nofollow">http://jsfiddle.net/emanuensis/NNvjA/</a> The idea is that every mouseover the words up or down will cause the yellow puck to shuttle in that direction stoping a short ways, determined by the mouseout event ... and await further mouseovers, from that location.

Unfortunately the reality (in both FF & Chrome) is not so.

The form ABA (where A is any number of ups and B a down - or vv) results in a noop for the second A.

The first A freezes the value of the attribute at the first the value attained on the last event (there may be many always homeing anew) of its type (up or down). Ie the B starts (homes) from that position.

Even in the first A freezes are not additive. Ie every event homes before shuttling.

Perhaps there is another way of forcing an effective freeze for a short duration (ie <strong>not</strong> all the way to the end - which is a direction, not a magnitude.)

here da fiddly

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="500" version="1.1"> <text id="tup" x="48 " y="33" >up </text> <text id="tdn" x="235" y="33" >down</text> <rect id="trect" style="fill:yellow;stroke:red;" width="20" height="20" x="75" y="0" rx="5" ry="5" > <animate id="tr" begin="tdn.mouseover" end="tdn.mouseout+1s" attributeName="x" additive="sum" fill = "freeze" restart = "whenNotActive" from="" to="50" dur="3s" repeatCount="1" /> <animate id="rt" begin="tup.mouseover" end="tup.mouseout+1s" attributeName="x" additive="sum" fill = "freeze" restart = "whenNotActive" from="" to="250" dur="3s" repeatCount="1"/> </rect> </svg>.

Answer1:

What you want is <a href="http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Restart" rel="nofollow">not how SMIL works unfortunately</a>.

<em>If an additive animation is restarted while it is active or frozen, the previous effect of the animation (i.e. before the restart) is no longer applied to the attribute. Note in particular that cumulative animation is defined only within the active duration of an animation. When an animation restarts, all accumulated context is discarded, and the animation effect F(t) begins accumulating again from the first iteration of the restarted active duration.</em>

What you could do is listen for the animation end event using javascript and copy the animated value back into the base value.

Recommend

  • Copy javascript object with private member
  • N1QL Concatenate many children rows into single string
  • Git: how to separate out a feature branch after the fact
  • Is it possible to stop redirection to another link page?
  • Assigning actions to a variable
  • How use pandas concat in loop to merge large numbers of subCSVs
  • Verify LL(1) grammar with ANTLR
  • Debugging an ongoing .net process
  • Calling super.approveSelection() within a SwingWorker
  • How to access Default Idempotent Repository map from java dsl?
  • What does 0x0 indicate in the instruction
  • How to test a multi-threaded TCPServer with rspec
  • How to get message from MessageIDTerm for Yahoo IMAP profile?
  • Detecting a shift + click with Jquery on Chrome
  • Slow performance in hybrid AngularJS and Angular application in Safari
  • Change the font color of disabled input text box?
  • Is there a chance to get -splash: work for SWT applications that require -XstartOnFirstThread?
  • Problem in Loading xml from specified url using javascript in FF & Google Chrome
  • Firefox extension testing and developing - I'm confused
  • Understanding Intl.DateTimeFormat as a JavaScript object
  • Position Fixed in Chrome
  • Visual studio 2015 keystroke with mouse button
  • Cursor in wrong place in contenteditable
  • Unable to click on the next page button containing “>” sign
  • Is there a way to set up a fallback for the formAction attribute in HTML5?
  • Problems with toDataURL HTML5 other ways to get canvas data?
  • Automatically associate new Sonar project with custom quality profile and quality gate
  • Is playing sound in Javascript performance heavy?
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Chrome doesn't support silverlight anymore? How to solve this?
  • Ajax jQuery multiple calls at the same time - long wait for answer and not able to cancel
  • HTML download movie download link
  • Javascript convert timezone issue
  • SQL merge duplicate rows and join values that are different
  • Proper way to use connect-multiparty with express.js?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How to set the response of a form post action to a iframe source?
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Binding checkboxes to object values in AngularJs