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
3 years ago

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

    Perfect Jurgen. This opens up so many possibilities with animated SVG. Now figuring out how to trigger it with Javascript in Storyline...to start/stop SVG animations...and do other fabulous stuff.

  • MauraSullivan-9's avatar
    MauraSullivan-9
    Community Member
    3 years ago

    That looks great! I'm looking forward to see how you trigger it in SL.

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

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

    Hi Jurgen,

    So after a bit of experiment figured out that Dreamweaver does work decent showing code and live view..thus being able to test and figure it out somewhat better.

    So these lines do the animation..

    path style="animation: e9UiYNucQVs3__m 2000ms linear infinite normal forwards"
    this being a looping continuous animation of an SVG element...

    path style="animation-play-state: paused !important e9UiYNucQVs3__m 2000ms linear infinite normal forwards"
    this being a paused one...as in my bird 5...

    What i still miss somehow now is how and where to add the hover... so it works in Storyline...

    In my bird 5 this line makes the animation start at hover...
    #eBs67EIoKQu1:hover *
    {animation-play-state: running !important}

    Missing where to add that ;-)

Related Content