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

Question

我有简单的 owl 轮播 -

<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 文件并在设置 class "active" 时启动他的动画？

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>

Answer 1

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

问题是 querySelector 只有 returns 一个元素，因此您的脚本只应用于一个 SVG 元素。

改用 getElementsByClassName（returns 一个对象列表），然后使用 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>

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

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

html

javascript

svg

owl-carousel

owl-carousel-2