How to use one SVG file in page more than one time

Question

I have simple owl carousel -

<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>

And i am trying to include svg file (inc/chart3.svg) instead of normal dots. The problem is, that only one file is loaded and the others will not display. Is there any way to display every svg file and start his animation when class "active" is set?

Svg has this code :

<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>

score 4 · Accepted Answer · answered Nov 15 '18 at 15:01

You're able to load them both, which isn't the problem.

The problem is that querySelector only returns one element, and so your script only gets applied to one SVG element.

Use instead getElementsByClassName (which returns an object list) and then use Object.values() to get each SVG Element and then apply your attribute to run the animation.

$(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>

How to use one SVG file in page more than one time

1 Answers1