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 动画进行动画处理，这是一个额外的好处，例如，它在 Opera 11.6 中似乎对我不起作用

于 2012-05-20T13:55:07.330 回答