我嵌入了一个 <div>在<svg>使用 <foreignObject> .我要<animate>它的 CSS 属性 opacity，在页面加载时淡入。所以我指定了一个 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> 的对象中使用它？ ？
最佳答案
宽度和高度是 foreignObject 元素的强制属性。如果您不设置它们，则根本不应显示 foreignObject。我不确定这是否是 Chrome 中发生的事情，但它肯定会阻止测试用例在 Firefox 中工作。如果我添加它，如下所示:http://jsfiddle.net/longsonr/dLrAN/一切正常，至少在 Firefox 中是这样。
然而，尽管这在 Firefox 中有效，但 SVG 规范仅说明 SVG 元素的 CSS 属性可以是动画的。如果 html 元素上的 CSS 属性可以通过 SVG 动画进行动画处理，那将是一个额外的好处，例如它在 Opera 11.6 中似乎对我不起作用
关于css - <animate> CSS-attr on XHTML <foreignObject> in SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10673074/