<animate> CSS-attr su XHTML <foreignObject> in SVG

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

Domanda

Ho incorporato un file <div> in un <svg> utilizzando <foreignObject>.voglio <animate>il suo attributo CSS opacità, inserendolo in dissolvenza quando la pagina è stata caricata.Quindi ho specificato un localizzatore XLink, riferito all'elemento target da animare:

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

(Lo SVG è incorporato in un documento HTML5).

Provandolo in Chrome, non funziona.Sugli elementi SVG nativi, tuttavia, lo fa.Come faccio a farlo funzionare negli oggetti incorporati con <foreignObject>?

È stato utile?

Soluzione

larghezza e altezza sono attributi obbligatori per gli elementi foreignObject.Se non li imposti, foreignObject non dovrebbe essere visualizzato affatto.Non sono sicuro che questo sia ciò che sta accadendo in Chrome, ma sicuramente impedisce al test case di funzionare in Firefox.Se lo aggiungo, come qui: http://jsfiddle.net/longsonr/dLrAN/ funziona tutto, almeno in Firefox funziona comunque.

Tuttavia, nonostante questo funzioni in Firefox, le specifiche SVG dicono solo che le proprietà CSS degli elementi SVG possono essere animate.Se le proprietà CSS sugli elementi html sono animabili dalle animazioni SVG questo è un vantaggio, ad esempio non sembra funzionare per me in Opera 11.6

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top