Is it possible to access the SMIL timer from javascript?

Question

I'm trying to use SMIL to animate the typing of text into a field embedded in a SVG. I tried the following code in both Chrome and a SMIL-enable Firefox nightly, but it has no effect:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:html="http://www.w3.org/1999/xhtml"&gt;
  <foreignObject>
    <html:input type="text" value="">
      <set attributeName="value" to="Hello World"
           begin="0" dur="10s" fill="freeze" />
    </html:input>
  </foreignObject>
</svg>

The text field appears, but remains empty. So, I thought I would register for the beginEvent and do the substitution manually. To test the events, I added:

<rect id="rect" x="0" y="0" width="10" height="10">
  <animate id="dx" attributeName="x" attributeType="XML"
           onbegin="console.log('onbegin')"
           begin="0s" dur="1s" fill="freeze" from="0" to="-10" />
</rect>

As well as the javascript that made sense from the event model:

window.addEventListener( 'load', function() {
  function listen( id ) {
    var elem = document.getElementById( id )
    elem.addEventListener( 'beginEvent', function() {
      console.log( 'begin ' + id )
    }, false )
    elem.addEventListener( 'endEvent', function() {
      console.log( 'end ' + id )
    }, false )
  }
  listen( 'rect' )
  listen( 'dx' )
})

But there's no events fired on either the rect or the animate in either browser. The next logical step seems to be to simulate the animation (ala. FakeSmile), but I want to use the browser's animation timer if at all possible.

Answer 1

RE your <set attributeName="value"> — you can't use SMIL to animate attributes of HTML elements, even if they're HTML elements embedded in SVG. (That would be a cool future extension, but its behavior isn't defined[1], so it would be a bit experimental at this point.)

RE the onbegin — yeah, Firefox doesn't fire animation events yet — that's yet-to-be-implemented.

[1] The SVG spec explicitly defines which SVG attributes and properties are animatable and which aren't. (see e.g. the "Animatable: " field below every attribute on w3.org/TR/SVG11/text.html) It does not define that for other languages (e.g. HTML), nor does HTML (because HTML doesn't have an animation component), so it's unclear which HTML attributes would be animatable in the first place.

Answer 2

If the textfield appears but the foreignObject element lacks a width and height attribute technically the browser that does that doesn't follow the SVG spec, since those attributes are required for the foreignObject to be visible inside the SVG.

Also the animations elements in SVG can be used on svg elements, but the SVG spec doesn't define if/how they apply to other types of markup.

An option if you want to use the animation timer might be to create an short repeating animation, e.g an animate element that animates some random attribute that isn't visible, and use the repeatEvent events as a trigger, calling back to a javascript function that modifies the html element(s).