Is it possible to access the SMIL timer from javascript?
I am trying to use SMIL to animate text input to a field, embedded in SVG. I tried the following code in both Chrome and SMIL-Firefox, but it has no effect:
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:html="http://www.w3.org/1999/xhtml">
<foreignObject>
<html:input type="text" value="">
<set attributeName="value" to="Hello World"
begin="0" dur="10s" fill="freeze" />
</html:input>
</foreignObject>
</svg>
The text box appears but remains blank. So, I thought I would register for beginEvent and do the replacement manually. To check for 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>
Just like javascript, which makes sense in 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 no events are fired either in rect
or animate
in any browser. The next logical step seems to be to simulate the animation (ala. FakeSmile ), but I want to use the browser animation timer if possible.
a source to share
RE your <set attributeName="value">
- You cannot use SMIL to animate the attributes of HTML elements, even if they are HTML elements embedded in SVG. (This would be a cool future extension, but its behavior is undefined [1], so it would be a little experimental at this stage.)
RE onbegin
- yes, Firefox doesn't fire animation events yet - this hasn't been implemented yet.
[1] The SVG specification explicitly defines which SVG attributes are animatable and which are not. (see, for example, the "Animatable:" field below each attribute on w3.org/TR/SVG11/text.html ) It does not define that for other languages (eg HTML) nor HTML (since HTML does not have an animation component) so it's not clear which HTML attributes will be animated in the first place.
a source to share
If the textbox appears, but the foreignObject element does not have a width and height attribute, technically the browser that does this is not SVG spec, as those attributes are required for the foreignObject to be visible inside the SVG.
Also animation elements in SVG can be used for svg elements, but the SVG spec does not dictate whether / how they apply to other types of markup.
The parameter, if you want to use an animation timer, could be to create a short, repeating animation, for example, an animation element that animates some random attribute that is not displayed, and use repeatEvent events as a trigger, referring to javascript that changes the html element.
a source to share