Как использовать один файл SVG на странице более одного раза - PullRequest
Новая
       14

Как использовать один файл SVG на странице более одного раза

0 голосов
/ 15 ноября 2018

У меня есть простая сова карусель - 

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

И я пытаюсь включить файл SVG (inc / chart3.svg) вместо обычных точек.Проблема в том, что загружается только один файл, а остальные не отображаются.Есть ли способ отобразить каждый файл SVG и запустить его анимацию, когда установлен класс "активный"?

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)"/>
</svg>

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

(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";
kruznice.setAttribute( "d", anim );
setTimeout(draw, t); // Redraw
})();});
</script>

1 Ответ

0 голосов
/ 15 ноября 2018

Вы можете загрузить их обоих, но это не проблема.

Проблема в том, что querySelector возвращает только один элемент, и поэтому ваш скрипт применяется только к одному SVG элементу.

Вместо этого используйте getElementsByClassName (который возвращает список объектов), а затем используйте Object.values(), чтобы получить каждый элемент SVG, а затем примените свой атрибут для запуска анимации. 

$(document).ready(function() {
  var kruznice = document.getElementsByClassName("kruznice"),
    a = 0,
    p = Math.PI,
    t = 2;

  (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
  })();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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)"/>
</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)"/>
</svg>
...