Некоторые SVG не воспроизводят анимацию

159
27 мая 2019, 19:30

На сайте есть карусель Owl-carousel. Написал скрипт, что если переключать слайдеры карусели, то SVG картинка должна воспроизводиться заново.

Копирование SVG, вставка SVG и удаление последней SVG.

Проблема в том, что первая SVG в первом слайдере воспроизводится нормально, вторая SVG во втором слайдере тоже нормально работает, остальные не хотят воспроизводиться. Просто появляются без анимации. Код прилагаю

Чтобы моя страница нормально отображалась, в настройках выберите Bottom Results в JSFiddle

$("#top-owl-carousel").on('changed.owl.carousel', function(event) { 
 
  var mySvg1Anim = $("#svg1"); 
  var mySvg1AnimCopy = mySvg1Anim.clone(true); 
  var mySvg2Anim = $("#svg2"); 
  var mySvg2AnimCopy = mySvg2Anim.clone(true); 
  var mySvg3Anim = $("#svg3"); 
  var mySvg3AnimCopy = mySvg3Anim.clone(true); 
  var mySvg4Anim = $("#svg4"); 
  var mySvg4AnimCopy = mySvg4Anim.clone(true); 
  var mySvg5Anim = $("#svg5"); 
  var mySvg5AnimCopy = mySvg5Anim.clone(true); 
 
  mySvg1Anim.before(mySvg1AnimCopy); 
  mySvg1Anim.last().remove(); 
 
 
  mySvg2Anim.before(mySvg2AnimCopy); 
  mySvg2Anim.last().remove(); 
 
 
  mySvg3Anim.before(mySvg3AnimCopy); 
  mySvg3Anim.last().remove(); 
 
 
  mySvg4Anim.before(mySvg4AnimCopy); 
  mySvg4Anim.last().remove(); 
 
 
  mySvg5Anim.before(mySvg5AnimCopy); 
  mySvg5Anim.last().remove(); 
}); 
$("#top-owl-carousel").owlCarousel({ 
  items: 1, 
  smartSpeed: 1000, 
  loop: true, 
  mouseDrag: true, 
  touchDrag: true, 
  nav: true, 
  dots: true, 
  autoplay: true, 
  autoplayTimeout: 100000, 
  autoplayHoverPause: true, 
});
.terentev-code-1-list #top-owl-carousel { 
  width: 100%; 
  height: auto; 
  padding: 0; 
  margin: 0; 
} 
 
.terentev-code-1-list #top-owl-carousel .owl-dots { 
  position: absolute; 
  top: 360px; 
  right: 50px; 
} 
 
.terentev-code-1-list #top-owl-carousel .owl-prev span { 
  position: absolute; 
  top: 150px; 
  left: 20px; 
  font-size: 40pt; 
  color: #a8a8a8; 
  z-index: 20; 
} 
 
.terentev-code-1-list #top-owl-carousel .owl-next span { 
  position: absolute; 
  top: 150px; 
  right: 20px; 
  font-size: 40pt; 
  color: #a8a8a8; 
  z-index: 20; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  padding: 0 60px 20px 60px; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
  color: white; 
  font-weight: 1000; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide h2 { 
  font-size: 30pt; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide .description { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
  width: 60%; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide .img { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
  position: relative; 
  width: 40%; 
  overflow: hidden; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide .img #svg1 { 
  width: 200%; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide .img #svg2 { 
  width: 200%; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide .img #svg3 { 
  width: 200%; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide .img .svgObject { 
  width: auto; 
  margin: auto; 
  position: absolute; 
  top: 25%; 
  left: 25%; 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  -ms-flex-align: center; 
  align-items: center; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide button { 
  color: white; 
  border: 1px white solid; 
  background: transparent; 
  padding: 10px 15px 10px 15px; 
  -webkit-transition: all 0.4s ease; 
  transition: all 0.4s ease; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide button:hover { 
  color: white; 
  background: transparent; 
  border-radius: 5px; 
  padding: 15px 20px 15px 20px; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide-1 { 
  background: #36d1dc; 
  background: -webkit-gradient(linear, left top, right top, from(#30b7c1), to(#5b86e5)); 
  background: linear-gradient(to right, #30b7c1, #5b86e5); 
  height: 450px; 
  width: 100vw; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide-2 { 
  background: #1c92d2; 
  background: -webkit-gradient(linear, left top, right top, from(#5b86e5), to(#7f51a7)); 
  background: linear-gradient(to right, #5b86e5, #7f51a7); 
  height: 450px; 
  width: 100vw; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide-3 { 
  background: #ef3b36; 
  background: -webkit-gradient(linear, left top, right top, from(#7f51a7), to(#355C7D)); 
  background: linear-gradient(to right, #7f51a7, #355C7D); 
  height: 450px; 
  width: 100vw; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide-4 { 
  background: #4ac29a; 
  background: -webkit-gradient(linear, left top, right top, from(#355C7D), to(#C06C84)); 
  background: linear-gradient(to right, #355C7D, #C06C84); 
  height: 450px; 
  width: 100vw; 
} 
 
.terentev-code-1-list #top-owl-carousel .slide-5 { 
  background: #ef3b36; 
  background: -webkit-gradient(linear, left top, right top, from(#C06C84), to(#30b7c1)); 
  background: linear-gradient(to right, #C06C84, #30b7c1); 
  height: 450px; 
  width: 100vw; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet" /> 
 
<div class="terentev-code-1-list"> 
  <div class="slider-top owl-carousel owl-theme" id="top-owl-carousel"> 
    <div class="slide slide-1"> 
      <div class="bottom-particles"> 
 
      </div> 
      <div class="description"> 
        <div> 
          <h2> 
            ЦИФРОВЫЕ БИЛБОРДЫ<br> НОВОГОДНИЙ PRE-SALE 
          </h2><br> 
          <h4> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, qui! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quidem nesciunt rerum cum numquam vero repudiandae optio nostrum incidunt reprehenderit. 
          </h4><br> 
          <button>Подробнее</button> 
        </div> 
      </div> 
      <div class="img"> 
        <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:relative" class="svg" preserveAspectRatio="xMinYMin meet" viewBox="-30 0 500 500"> 
    <set id="b" attributeName="visibility" begin="0s" dur="1s" to="hidden" xlink:href="#a" /> 
    <g id="a" fill="none" stroke="#fff" stroke-width="2"> 
        <path stroke-dasharray="540" d="M0 0h180v90H0z"> 
            <animate attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" values="540; 0" /> 
        </path> 
        <path stroke-dasharray="516" d="M5 5h170v80H5z"> 
            <animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="516; 0" /> 
        </path> 
        <path stroke-dasharray="100" d="M85 90v100"> 
            <animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0" /> 
        </path> 
        <path stroke-dasharray="100" d="M95 90v100"> 
            <animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0" /> 
        </path> 
        <path stroke-dasharray="150" d="M75 190h30v5H75v-5z"> 
            <animate fill="freese" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="150; 0" /> 
        </path> 
    </g> 
</svg> 
      </div> 
    </div> 
    <div class="slide slide-2"> 
      <div class="description"> 
        <div> 
          <h2> 
            ЦИФРОВЫЕ БИЛБОРДЫ<br> НОВОГОДНИЙ PRE-SALE 
          </h2><br> 
          <h4> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, qui! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quidem nesciunt rerum cum numquam vero repudiandae optio nostrum incidunt reprehenderit. 
          </h4><br> 
          <button>Подробнее</button> 
        </div> 
      </div> 
      <div class="img"> 
        <svg id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:relative" class="svg" preserveAspectRatio="xMinYMin meet" viewBox="-30 0 500 500"><set id="b" attributeName="visibility" begin="0s" dur="1s" to="hidden" xlink:href="#a"/><g id="a" fill="none" stroke="#fff" stroke-width="2"><path stroke-dasharray="540" d="M0 0h180v90H0z"><animate attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" values="540; 0"/></path><path stroke-dasharray="516" d="M5 5h170v80H5z"><animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="516; 0"/></path><path stroke-dasharray="100" d="M85 90v100"><animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0"/></path><path stroke-dasharray="100" d="M95 90v100"><animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0"/></path><path stroke-dasharray="150" d="M75 190h30v5H75v-5z"><animate fill="freese" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="150; 0"/></path></g></svg> 
      </div> 
    </div> 
    <div class="slide slide-3"> 
      <div class="description"> 
        <div> 
          <h2> 
            ЦИФРОВЫЕ БИЛБОРfgfДЫ<br> НОВОГОДНИЙ PRE-SALE 
          </h2><br> 
          <h4> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, qui! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quidem nesciunt rerum cum numquam vero repudiandae optio nostrum incidunt reprehenderit. 
          </h4><br> 
          <button>Подробнее</button> 
        </div> 
      </div> 
      <div class="img"> 
        <svg id="svg3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:relative" class="svg" preserveAspectRatio="xMinYMin meet" viewBox="-30 0 500 500"><set id="b" attributeName="visibility" begin="0s" dur="1s" to="hidden" xlink:href="#a"/><g id="a" fill="none" stroke="#fff" stroke-width="2"><path stroke-dasharray="540" d="M0 0h180v90H0z"><animate attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" values="540; 0"/></path><path stroke-dasharray="516" d="M5 5h170v80H5z"><animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="516; 0"/></path><path stroke-dasharray="100" d="M85 90v100"><animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0"/></path><path stroke-dasharray="100" d="M95 90v100"><animate fill="remove" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="100; 0"/></path><path stroke-dasharray="150" d="M75 190h30v5H75v-5z"><animate fill="freese" attributeName="stroke-dashoffset" begin="b.end" calcMode="linear" dur="1s" repeatCount="1" values="150; 0"/></path></g></svg> 
      </div> 
    </div> 
    <div class="slide slide-4"> 
      <div class="description"> 
        <div> 
          <h2> 
            ЦИФРОВЫЕ БИЛБОРДЫ<br> НОВОГОДНИЙ PRE-SALE 
          </h2><br> 
          <h4> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, qui! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quidem nesciunt rerum cum numquam vero repudiandae optio nostrum incidunt reprehenderit. 
          </h4><br> 
          <button>Подробнее</button> 
        </div> 
      </div> 
      <div class="img"> 
        <object data="img/city.svg" type="image/svg+xml" id="svg4" class="svgObject"></object> 
      </div> 
    </div> 
    <div class="slide slide-5"> 
      <div class="description"> 
        <div> 
          <h2> 
            ЦИФРОВЫЕ БИЛБОРДЫ<br> НОВОГОДНИЙ PRE-SALE 
          </h2><br> 
          <h4> 
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, qui! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quidem nesciunt rerum cum numquam vero repudiandae optio nostrum incidunt reprehenderit. 
          </h4><br> 
          <button>Подробнее</button> 
        </div> 
      </div> 
      <div class="img"> 
        <object data="img/city.svg" type="image/svg+xml" id="svg5" class="svgObject"></object> 
      </div> 
    </div> 
  </div>

Answer 1

Я нашел решение, написал скрипт

$("#top-owl-carousel").on('translated.owl.carousel', function(event){ 
        $(this).find(".active #svg1, #svg2, #svg3, #svg4, #svg5").css("display","none"); 
        $(this).find(".active #svg1").css("display","block"); 
        $(this).find(".active #svg2").css("display","block"); 
        $(this).find(".active #svg3").css("display","block"); 
        $(this).find(".active #svg4").css("display","block"); 
        $(this).find(".active #svg5").css("display","block"); 
    }); 
    $("#top-owl-carousel").on('changed.owl.carousel', function(event){ 
        $(this).find(".active #svg1").css("display","none"); 
    });

READ ALSO
Поменять значение Input при выборе select
jQuery

Поменять значение Input при выборе select

Всем привет есть такой input:

 141
Помогите не работает код jQuery!
jQuery

Помогите не работает код jQuery!

Помогите пожалуйста с кодом,при нажатии на кнопку должен выводиться текст но такого не происходит вот код :

 153
Не могу обновить таблицу
c#

Не могу обновить таблицу

Не могу при вставке в таблицу resultsell обновить значение в таблице productsСуть такая: я при вставке в таблицу resultsell должен отнять 1 у определенного...

 134
Unity 3D проблемы с кодом
c#

Unity 3D проблемы с кодом

У меня есть программа обучалка для детейСуть такова: генерируется случайный пример из чисел a и b и генерируется случайный знак

 133