<animate> CSS-Attribut auf XHTML <foreignObject> in SVG

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

Frage

Ich habe ein eingebettet <div> in einem <svg> verwenden <foreignObject>.Ich möchte <animate>sein CSS-Attribut Opazität, und wird eingeblendet, wenn die Seite geladen wurde.Deshalb habe ich einen XLink-Locator angegeben, der sich auf das zu animierende Zielelement bezieht:

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

(Das SVG ist in ein HTML5-Dokument eingebettet).

Beim Testen in Chrome funktioniert es nicht.Bei nativen SVG-Elementen ist dies jedoch der Fall.Wie mache ich das in eingebetteten Objekten möglich? <foreignObject>?

War es hilfreich?

Lösung

width und height sind obligatorische Attribute für ForeignObject-Elemente.Wenn Sie sie nicht festlegen, sollte das ForeignObject überhaupt nicht angezeigt werden.Ich bin mir nicht sicher, ob dies in Chrome der Fall ist, aber es verhindert auf jeden Fall, dass der Testfall in Firefox funktioniert.Wenn ich es hinzufüge, wie hier: http://jsfiddle.net/longsonr/dLrAN/ Alles funktioniert, zumindest in Firefox funktioniert es trotzdem.

Obwohl dies in Firefox funktioniert, besagt die SVG-Spezifikation jedoch nur, dass CSS-Eigenschaften von SVG-Elementen animiert werden können.Wenn CSS-Eigenschaften für HTML-Elemente durch SVG-Animationen animiert werden können, ist das ein Bonus, zum Beispiel scheint es bei mir in Opera 11.6 nicht zu funktionieren

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top