-1

Am trying to animate the following SVG from the current size to smaller size like a dot in number of seconds. 

    <?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
       <style type="text/css">
        .st3{fill:#E8D99C;stroke:#0C3854;stroke-miterlimit:10;}
       </style>
       <path 
           class="st3" 
           d="M220.8,724.8l-12.6,13.1c-2,2-5.1,2-7.1,0l-12.6-13.1c-2-2-2-5.4,0-7.4l12.6-13.1c2-2,5.1-2,7.1,0l12.6,13.1
     C222.8,719.4,222.8,722.8,220.8,724.8z"
       />
    </svg>

How can I achieve that with JavaScript or CSS ?

enxaneta
  • 31,608
  • 5
  • 29
  • 42
ikuchris
  • 1,162
  • 1
  • 15
  • 33

1 Answers1

0

I would use CSS transitions for this: transition:transform, .5s. The main idea is to transform the shape around it's own center: transform-origin: center center; transform-box: fill-box;

svg{border:1px solid}
.st3{transform: scale(1, 1);
transform-origin: center center;
transform-box: fill-box;
transition:transform, .5s}
svg:hover path{ transform: scale(.1, .1);}
<svg viewBox="186 702 37 38" width="300">
   <style type="text/css">
       .st3{fill:#E8D99C;stroke:#0C3854;stroke-miterlimit:10;}
   </style>
   <path
       class="st3" 
       d="M220.8,724.8l-12.6,13.1c-2,2-5.1,2-7.1,0l-12.6-13.1c-2-2-2-5.4,0-7.4l12.6-13.1c2-2,5.1-2,7.1,0l12.6,13.1
    C222.8,719.4,222.8,722.8,220.8,724.8z"
   />
</svg>

As an observation: your svg element doesn't have a viewBox attribute making the shape fall outside the svg canvas. I've added a viewBox and a width attribute to be able to see the shape.

enxaneta
  • 31,608
  • 5
  • 29
  • 42