Сова-карусель использовать SVG для анимированных точек

Question

У меня есть простая сова-карусель с круговой анимацией точек, где анимация сделана с помощью SVG.Вот мой пример http://slider.farmadodomu.cz/.Проблема в том, что обе анимации запускаются одновременно, поэтому не имеет значения, на каком слайде я нахожусь.Я действительно застрял, мне нужно запустить анимацию только тогда, когда активация класса находится в родительском элементе html кнопки.

HTML-код

     <div id="header-slider" class="owl-carousel owl-theme">
                <div class="single_slide" data-dot='<button role="button" class="owl-dot">
                <?php include("inc/chart3.svg")?></button>'>
                    <img src="assets/images/banner.jpg" alt="" title=""></div>
                <div class="single_slide" data-dot='<button role="button" class="owl-dot">
                <?php include("inc/chart3.svg")?></button>'>
                    <img src="assets/images/banner.jpg" alt="" title="">
                 </div>
              </div>

SVG-код

<svg version="1.1"  xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16" height="16" viewbox="0 0 250 250" enable-background="new 0 0 
426.667 410" xml:space="preserve">
<path class="kruznice" transform="translate(125, 125) scale(.84)"/>

<script>
 jQuery(document).ready(function() {
 var kruznice = document.getElementsByClassName("kruznice"),
a = 0,
p = Math.PI,
t = 4;

(function draw() {
a++;
a %= 360;
var r = (a * p / 180),
  x = Math.sin(r) * 125,
  y = Math.cos(r) * -125,
  mid = (a > 180) ? 1 : 0,
  anim = "M 0 0 v -125 A 125 125 1 " +
  mid + " 1 " +
  x + " " +
  y + " z";

 Object.values(kruznice).forEach(item=>item.setAttribute("d", anim));
 setTimeout(draw, t); // Redraw

})();
});