I've embedded a <div> in a <svg> using <foreignObject>. I want to <animate>its CSS attribute opacity, fading it in when the page has loaded. So I specified an XLink locator, referring to the target element to be animated:
<g xmlns:xlink="http://www.w3.org/1999/xlink">
<animate xlink:href="#animateThis" attributeType="CSS" attributeName="opacity" from="0" to="1" begin="0s" dur="1s" fill="freeze" />
</g>
<foreignObject>
<body xmlns="http://www.w3.org/1999/xhtml">
<div id="animateThis" style="opacity:0">
The quick brown fox jumps over the lazy dog.
</div>
</body>
</foreignObject>
(The svg is embedded in a HTML5 document).
Testing it in chrome, It doesn't work. On native svg elements however, it does. How do I make this work in objects embedded with <foreignObject>?
width and height are mandatory attributes for foreignObject elements. If you don't set them the foreignObject should not be displayed at all. I'm not sure if this is what's happening in Chrome but it certainly prevents the testcase from working in Firefox. If I add it, as here: http://jsfiddle.net/longsonr/dLrAN/ everything works, at least in Firefox it does anyway.
However despite this working in Firefox, the SVG specification only says that CSS properties of SVG elements can be animated. If CSS properties on html elements are animatable by SVG animations that's a bonus, for instance it doesn't seem to work for me in Opera 11.6