<animate> XHTML上的CSS-attr <foreignObject> 在SVG中

StackOverflow https://stackoverflow.com//questions/10673074

题

我嵌入了一个 <div> 在一个 <svg> 使用 <foreignObject>.我想 <animate>它的CSS属性 不透明度, ，在页面加载时将其淡入。所以我指定了一个XLink定位器，指的是要动画的目标元素:

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

（Svg嵌入在HTML5文档中）。

在chrome中测试它，它不起作用。然而，在本机svg元素上，它确实如此。我如何使这在嵌入的对象中工作 <foreignObject>?

有帮助吗？

解决方案

width和height是foreignObject元素的强制属性。如果您不设置它们，则根本不应显示foreignObject。我不确定这是否是Chrome中发生的事情，但它肯定会阻止testcase在Firefox中工作。如果我添加它，就像这里一样: http://jsfiddle.net/longsonr/dLrAN/ 一切正常，至少在Firefox中它无论如何都是如此。

然而，尽管这在Firefox中工作，SVG规范只说SVG元素的CSS属性可以动画。如果html元素上的CSS属性可以通过SVG动画进行动画处理，这是一个额外的好处，例如，它在Opera11.6中似乎不适合我

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top