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

我使用<foreignObject>在<svg>中嵌入了<div>。我想<animate>其CSS屬性不透明度，在頁面加載時淡入。因此，我指定一個XLink定位器，指的是目標元件是動畫：<animate> SVG中的XHTML <foreignObject>上的CSS-attr

<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>的對象中進行這項工作？

來源

2012-05-20 Mathias

你是什麼意思，通過測試「On native svg elements」？除了託管瀏覽器之外，還有哪些其他選項可以運行？ –

像路徑，矩形，圓形的元素。我不知道有這樣的選擇。 – Mathias

你不清楚，請詳細說明預期結果VS實際結果。 –

寬度和高度是foreignObject元素的必需屬性。如果你不設置它們，foreignObject不應該被顯示。我不確定這是Chrome中發生了什麼，但它肯定會阻止測試用例在Firefox中運行。如果我添加它，如下所示：一切正常，至少在Firefox中它無論如何。

儘管在Firefox中有效，但SVG規範只是說SVG元素的CSS屬性可以是動畫的。如果html元素上的CSS屬性可以通過SVG動畫來獲得動畫效果，這是一個額外的功能，例如它在Opera 11.6中似乎不適用於我。

來源

2012-05-20 13:55:07

似乎也不支持鉻。 – Mathias

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

回答

相關問題