Animated SVG plays in Safari but not in Firefox

svg

#1

I have a strange issue, I have added an animated SVG to Hype, when I preview this plays fine in Safari but is static is Firefox as per the attached document.

If I just drag the icon to the browser FF and Safari the icon plays fine - am I doing something wrong?

Here is a link to the Hype file:

Thanks


Firefox problems
Hype animation, InDesign and Publish Online
(Hans-Gerd Claßen) #2

you shouldn’t load the svg as a backgroundimage.
place the svg-code as innerHtml or use an object-Tag or a src-Attribute with img-tag …
there are some other possibilities … google will be your friend :slight_smile:


(drewbullen) #3

Putting the SVG inline will be enough to make this work.

Here is a screenshot of it working in FF.

Here is the revised HYPE file demonstrating how.

AnimatedSVGTest_Revised.hype.zip (28.3 KB)


Extract Pasted SVG Files from Hype
#4

Many thanks drew,

I see from the example that the inline works.

Regards,


(Andrey Kolchin) #5

The difference between import of the svg file and inline html in a widget is. And essential. If we take svg with animation in one cycle, instead of around:

  • the imported file is played once, how many times not to repeat a scene anew
  • inline each time repeats the animation cycle anew when the scene is again active
    It solves actually a problem of difficult animation scenarios in case of a combination of html5 and animation svg.

To your attention the file with an example, which I слелал for few minutes, for experiment.
testsvg.hype.zip (14,0 КБ)


(Jonathan Deutsch) #6

Thanks for the above example! I thought this would have been fixed from the firefox issue but it looks like it is still a problem. I may need to investigate further and figure out the difference.