0 Replies Latest reply on Jan 18, 2015 9:57 AM by kremisi

    Edge Commons to trigger CSS animation in SVG?

    kremisi Level 1

      Hi there,

      I have an SVG file that has a sequence of 2 CSS animations within it:

       

      <defs>
      <style type="text/css">
       
           .t1a {
       stroke-dasharray:537;
       stroke-dashoffset:537;
       -webkit-animation: t1a 2s linear forwards;
       }
       <!-- Animation lines-->
       @-webkit-keyframes t1a {
       from {
       stroke-dashoffset: -537;
       }
       to {
       stroke-dashoffset: 0;
       }
       }
       
           .t2a {
       stroke-dasharray:544;
       stroke-dashoffset:544;
       -webkit-animation: t2a 2s linear forwards;
       -webkit-animation-delay: 2s;
       }
       <!-- Animation lines-->
       @-webkit-keyframes t2a {
       from {
       stroke-dashoffset: -544;
       }
       to {
       stroke-dashoffset: 0;
       }
       }
       </style>
       </defs>
      
      

       

      The items touched by these CSS are 2 lines:

       

      <line id="t1a" fill="none" stroke="#000000" stroke-width="0.391" stroke-miterlimit="3.864" x1="282.5" y1="999" x2="423.2" y2="480.3"/> 
      <line id="t2a" fill="none" stroke="#000000" stroke-width="0.391" stroke-miterlimit="3.864" x1="949.1" y1="622.2" x2="423.2" y2="480.3"/>
      
      

       

      I'd like to have 2 buttons on Animate to start the 2 animations. I mean that I was thinking to apply and remove the classes to the ids in some way. I think that maybe with Edge Commons this is possible. So, summarizing, I need to manipulate some ids in the SVG and apply those classes to them. Is it possible?