0

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>?

4

1 に答える 1

2

widthとheightは、foreignObject要素の必須属性です。それらを設定しない場合、foreignObjectはまったく表示されないはずです。これがChromeで起こっていることかどうかはわかりませんが、Firefoxでテストケースが機能するのを確実に妨げています。ここに追加すると、http：//jsfiddle.net/longsonr/dLrAN/すべてが機能しますが、少なくともFirefoxでは機能します。

ただし、これがFirefoxで機能しているにもかかわらず、SVG仕様では、SVG要素のCSSプロパティをアニメーション化できるとしか規定されていません。html要素のCSSプロパティがSVGアニメーションでアニメーション化できる場合、それはボーナスです。たとえば、Opera11.6では機能しないようです。

于 2012-05-20T13:55:07.330 に答える