Javascript 如何在页面中多次使用一个SVG文件

我有简单的猫头鹰旋转木马-

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

---

您可以同时加载它们，这不是问题所在

问题是querySelector只返回一个元素，因此脚本只应用于一个SVG元素

改为使用GetElementsByCassName，它返回一个对象列表，然后使用object.values获取每个SVG元素，然后应用属性运行动画

$document.readyfunction{ var kruznice=document.getElementsByClassNamekruznice， a=0， p=Math.PI， t=2； 函数图{ a++； a%=360； var r=a*p/180， x=Math.sinr*125， y=Math.cosr*-125， mid=a>180？1:0， 动画=M 0 0 v-125 A 125 1+ 中期+1+ x++ y+z； Object.valueskruznice.forEachitem=>item.setAttributed，anim； setTimeoutdraw，t；//重新绘制 }; };

---

您可以同时加载它们，这不是问题所在

问题是querySelector只返回一个元素，因此脚本只应用于一个SVG元素

改为使用GetElementsByCassName，它返回一个对象列表，然后使用object.values获取每个SVG元素，然后应用属性运行动画

$document.readyfunction{ var kruznice=document.getElementsByClassNamekruznice， a=0， p=Math.PI， t=2； 函数图{ a++； a%=360； var r=a*p/180， x=Math.sinr*125， y=Math.cosr*-125， mid=a>180？1:0， 动画=M 0 0 v-125 A 125 1+ 中期+1+ x++ y+z； Object.valueskruznice.forEachitem=>item.setAttributed，anim； setTimeoutdraw，t；//重新绘制 }; };