SVG Animation

by IanWing

HTML

<!DOCTYPE html>
<html>

  <head>
    <script src="jssvg.js"></script>
  </head>

  <body>
    <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 225.5 225.5" style="enable-background:new 0 0 225.5 225.5;" xml:space="preserve">

        <path id="Luna1" class="st0" d="M112.8,225.5C50.5,225.5,0,175,0,112.8S50.5,0,112.8,0V225.5z"/>
        <path id="Luna2" class="st1" d="M112.8,0C175,0,225.5,50.5,225.5,112.8S175,225.5,112.8,225.5V0z"/>
        <circle id="Cerchio1" class="st2" cx="46.4" cy="112.8" r="18.4"/>
        <circle id="Cerchio2" class="st2" cx="179.1" cy="112.8" r="18.4"/>
    </svg>
  </body>

</html>

CSS

.st0 {
      fill: #6DC06B;
    }

    .st1 {
      fill: #0B7660;
    }

    .st2 {
      fill: #17AF80;
      -webkit-transition: 1s ease-in-out;
      -moz-transition: 1s ease-in-out;
      -o-transition: 1s ease-in-out;
      transition: 1s ease-in-out;
    }

    svg {
      width: 200px;
      height: 200px;
      cursor: pointer;
      transform: rotate(45deg);
    }

JavaScript

function move() {
      var c1 = document.getElementById("Cerchio1");
      var c2 = document.getElementById("Cerchio2");

      c1.setAttribute("style", "transform:translate(29.5%,0px)");
      c2.setAttribute("style", "transform:translate(-29.5%,0px)");

    }

    var bottone;

    function gestoreLoad() {
      try {
        bottone = document.getElementById("Livello_1");
        bottone.onclick = move;
      } catch (e) {
        alert("gestoreLoad" + e);
      }
    }

    window.onload = gestoreLoad;