Forum Discussion

KevinKameda's avatar
KevinKameda
Community Member
4 years ago

SVG File Issues

I'm having trouble incorporating .svg files to my storyline file.  When I add the .svg files (Picture 1), the color and fill is perfect on the screen.  When I preview/publish the file, the fill seem...
storyline 360
Jürgen_Schoene_'s avatar
Jürgen_Schoene_
Community Member

Hi,
here are the corrected SVGs, Storyline doesn't seem to support putting the animation instructions in a separate style tag. The animation description can stay there.


not stoyline compatible:

<style>
   #eteEOPbDcB539 {
      animation: eteEOPbDcB539_tr__tr 1500ms linear infinite normal forwards
      }
      @keyframes eteEOPbDcB539_tr__tr {
         ...
      }
   }
</style>

<g id="eteEOPbDcB539_tr" ... >

storyline compatible

<style>
  @keyframes eteEOPbDcB539_tr__tr {
    ...
  }
}
</style>

<g style="animation: eteEOPbDcB539_tr__tr 1500ms linear infinite normal forwards" ... >

 

https://360.articulate.com/review/content/2a574975-8760-42f3-81ba-117825a979aa/review

Jürgen

 

MathNotermans-9's avatar
MathNotermans-9
Community Member
3 years ago

Jurgen ? Can you tell me how you that quickly convert/fix the SVGs. When i open them in Sublime its just a lot of text hard to decipher what needs to be changed to get it working properly.

Added a animated SVG in which a mouseover the SVG element starts the animation... following up on that a next step might be triggering it from Storyline...

Related Content