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">
<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"
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.
