样式化自定义 SVG 加载器

Question

我想要实现的目标

我已经创建了一个自定义 SVG 加载器，但是作为 SVG 的新手，我不太熟悉如何很好地设置它们的样式。我正在尝试让我的新加载器（如下面第一个代码段所示）与第二个代码段中看到的其他加载器的外观相匹配。

我的自定义 SVG 加载器目前的样子

$('#start').click(function() {
  $('#circle_1_top').toggleClass('circleAnimationOn');
  $('#circle_1_bottom').toggleClass('circleAnimationOn');
  $('#line_1').delay(1000).queue(function() {
    $(this).toggleClass('lineAnimationOn');
    $(this).dequeue();
  });

  $('#circle_2_top').delay(2000).queue(function() {
    $(this).toggleClass('circleAnimationOn');
    $(this).dequeue();
  });
  $('#circle_2_bottom').delay(2000).queue(function() {
    $(this).toggleClass('circleAnimationOn');
    $(this).dequeue();
  });
  $('#line_2').delay(3000).queue(function() {
    $(this).toggleClass('lineAnimationOn');
    $(this).dequeue();
  });

  $('#circle_3_top').delay(4000).queue(function() {
    $(this).toggleClass('circleAnimationOn');
    $(this).dequeue();
  });
  $('#circle_3_bottom').delay(4000).queue(function() {
    $(this).toggleClass('circleAnimationOn');
    $(this).dequeue();
  });
  $('#line_3').delay(5000).queue(function() {
    $(this).toggleClass('lineAnimationOn');
    $(this).dequeue();
  });

  $('#circle_4_top').delay(6000).queue(function() {
    $(this).toggleClass('lastCircleAnimationOn');
    $(this).dequeue();
  });
  $('#circle_4_bottom').delay(6000).queue(function() {
    $(this).toggleClass('lastCircleAnimationOn');
    $(this).dequeue();
  });
});

html,
body {
  background: #000000 !important;
}

.circle {
  cy: 37.5;
  r: 30;
  stroke: #3498db;
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 188.19107055664062px;
  stroke-dashoffset: -188.19107055664062px;
  transform-origin: center;
  filter: url(#dropshadow);
}

.top {
  transform: scale(-1, 1) rotate(1deg);
}

.bottom {
  transform: rotate(181deg);
}

.circleAnimationOn {
  stroke-dashoffset: -93px;
  transition: stroke-dashoffset 1s linear
}

.lastCircleAnimationOn {
  stroke-dashoffset: -93px;
}

.line {
  stroke: #3498db;
  stroke-width: 1;
  stroke-dasharray: 108px;
  stroke-dashoffset: 108px;
  filter: url(#dropshadow);
}

.lineAnimationOn {
  stroke-dashoffset: 0px;
  transition: stroke-dashoffset 1s linear
}


/* Trigger button for javascript */

a {
  text-decoration: none;
  color: #00c6ff;
}

.trigger,
.triggerFull,
.triggerBar {
  background: #000000;
  background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
  background: -webkit-linear-gradient(top, #161616 0%, #000000 100%);
  border-left: 1px solid #111;
  border-top: 1px solid #111;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.8em;
  text-decoration: none;
  text-transform: lowercase;
  text-align: center;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  display: block;
  margin: 0 205px;
  width: 140px;
}

.trigger:hover,
.triggerFull:hover,
.triggerBar:hover {
  background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
  background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
}

<link rel="stylesheet" type="text/css" href="https://tornhq.com/Assets/CSS/style.css" />
<script src="https://tornhq.com/Assets/JS/jquery-3.1.1.js"></script>
<ul class="Fetch-Data-Progress">
  <!--Bar Animation -->
  <svg style="position:absolute" width="597" height="75" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <filter id="dropshadow" height="200%" filterUnits="userSpaceOnUse">
   <feGaussianBlur in="SourceGraphic" stdDeviation="1"/>
   <feOffset dx="0" dy="0"/>
   <feMerge>
    <feMergeNode/>
    <feMergeNode in="SourceGraphic"/>
   </feMerge>
  </filter>
  <circle id="circle_1_top" class="circle top" cx="47"/>
  <circle id="circle_1_bottom" class="circle bottom" cx="47"/>
  <line id="line_1" class="line" x1="77" x2="185" y1="38" y2="38"/>

  <circle id="circle_2_top" class="circle top" cx="216"/>
  <circle id="circle_2_bottom" class="circle bottom" cx="216"/>
  <line id="line_2" class="line" x1="246" x2="354" y1="38" y2="38"/>

  <circle id="circle_3_top" class="circle top" cx="384"/>
  <circle id="circle_3_bottom" class="circle bottom" cx="384"/>
  <line id="line_3" class="line" x1="413" x2="521" y1="38" y2="38"/>

  <circle id="circle_4_top" class="circle top" cx="550"/>
  <circle id="circle_4_bottom" class="circle bottom" cx="550"/>

 </svg>
  <li><i class="fa fa-user-o"></i></li>
  <li><i class="fa fa-hand-rock-o"></i></li>
  <li><i class="fa fa-building-o"></i></li>
  <li><i class="fa fa-star-o"></i></li>
</ul>
<br><br>
<a class="trigger" href="#" id="start">Start</a>

我希望我的装载机生产线看起来像什么

$('#progress').removeClass('running');
$('.trigger').click(function() {
  $('#progress').removeClass('running').delay(10).queue(function(next) {
    $(this).addClass('running');
    next();
  });
  return false;
});

$('#content').removeClass('fullwidth');
$('.triggerFull').click(function() {
  $('#content').removeClass('fullwidth').delay(10).queue(function(next) {
    $(this).addClass('fullwidth');
    next();
  });
  return false;
});

$('#loadbar').removeClass('ins');
$('.triggerBar').click(function() {
  $('#loadbar').removeClass('ins').delay(10).queue(function(next) {
    $(this).addClass('ins');
    next();
  });
  return false;
});

html,
body {
  font: 12px normal Verdana, Arial, Helvetica, sans-serif;
  background: #161616;
}

* {
  margin: 0;
  padding: 0;
  outline: none;
}

a {
  text-decoration: none;
  color: #00c6ff;
}


/* Full Width Progress Bar */

#content {
  width: 100%;
  height: 5px;
  margin: 50px auto;
  background: #000;
}

.fullwidth .expand {
  width: 100%;
  height: 1px;
  margin: 2px 0;
  background: #2187e7;
  position: absolute;
  box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.7);
  -moz-animation: fullexpand 10s ease-out;
  -webkit-animation: fullexpand 10s ease-out;
}

@-moz-keyframes fullexpand {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
}

@-webkit-keyframes fullexpand {
  0% {
    width: 0px;
  }
  100% {
    width: 100%;
  }
}


/* Trigger button for javascript */

.trigger,
.triggerFull,
.triggerBar {
  background: #000000;
  background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
  background: -webkit-linear-gradient(top, #161616 0%, #000000 100%);
  border-left: 1px solid #111;
  border-top: 1px solid #111;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 0.8em;
  text-decoration: none;
  text-transform: lowercase;
  text-align: center;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  display: block;
  margin: 0 auto;
  width: 140px;
}

.trigger:hover,
.triggerFull:hover,
.triggerBar:hover {
  background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
  background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- FULL WIDTH -->
<div id="content">
  <span class="expand"></span>
</div>
<a class="triggerFull" href="#">Start/Restart Animation</a>
<!-- END FULL WIDTH -->

Answer 1

以下应该适合您。正如@Robert Longson 在对先前答案的评论中提到的那样，它使过滤器成为 userSpaceOnUse。这与动画的线段有关，因为它们除了笔划外没有 heights/widths。希望对您有所帮助！

      $('#start').click(function() {
        $('#circle_1_top, #circle_1_top_glow').toggleClass('circleAnimationOn');
        $('#circle_1_bottom, #circle_1_bottom_glow').toggleClass('circleAnimationOn');
        $('#line_1, #line_1_glow').delay(1000).queue(function() {
          $(this).toggleClass('lineAnimationOn');
          $(this).dequeue();
        });
        $('#circle_2_top, #circle_2_top_glow').delay(2000).queue(function() {
          $(this).toggleClass('circleAnimationOn');
          $(this).dequeue();
        });
        $('#circle_2_bottom, #circle_2_bottom_glow').delay(2000).queue(function() {
          $(this).toggleClass('circleAnimationOn');
          $(this).dequeue();
        });
        $('#line_2, #line_2_glow').delay(3000).queue(function() {
          $(this).toggleClass('lineAnimationOn');
          $(this).dequeue();
        });
        $('#circle_3_top, #circle_3_top_glow').delay(4000).queue(function() {
          $(this).toggleClass('circleAnimationOn');
          $(this).dequeue();
        });
        $('#circle_3_bottom, #circle_3_bottom_glow').delay(4000).queue(function() {
          $(this).toggleClass('circleAnimationOn');
          $(this).dequeue();
        });
        $('#line_3, #line_3_glow').delay(5000).queue(function() {
          $(this).toggleClass('lineAnimationOn');
          $(this).dequeue();
        });

        $('#circle_4_top, #circle_4_top_glow').delay(6000).queue(function() {
          $(this).toggleClass('lastCircleAnimationOn');
          $(this).dequeue();
        });
        $('#circle_4_bottom, #circle_4_bottom_glow').delay(6000).queue(function() {
          $(this).toggleClass('lastCircleAnimationOn');
          $(this).dequeue();
        });
      });

      body {
        background: black;
      }
      .circle {
        cy: 37.5;
        r: 30;
        stroke: white;
        stroke-width: 1;
        fill: none;
        stroke-dasharray: 188.19107055664062px;
        stroke-dashoffset: -188.19107055664062px;
        transform-origin: center;
      }
      .glow-circle {
        stroke: #2187E7;
        stroke-width: 3;
      }
      .line {
        height: 20px;
        stroke: white;
        stroke-width: 1;
        stroke-dasharray: 108px;
        stroke-dashoffset: 108px;
      }
      .glow-line {
        stroke: #2187E7;
        stroke-width: 3;
        fill: none;
      }

      .top {
        transform: scale(-1, 1) rotate(1deg);
      }

      .bottom {
        transform: rotate(181deg);
      }

      .circleAnimationOn {
        stroke-dashoffset: -93px;
        transition: stroke-dashoffset 1s linear;
      }

      .lastCircleAnimationOn {
        stroke-dashoffset: -93px;
      }

      .lineAnimationOn {
        stroke-dashoffset: 0px;
        transition: stroke-dashoffset 1s linear;
      }

      a {
        text-decoration: none;
        color: dimGray;
      }

      .trigger,
      .triggerFull,
      .triggerBar {
        background: dimGray;
        border: 1px solid #111;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 0.8em;
        text-decoration: none;
        text-align: center;
        color: #fff;
        padding: 10px;
        border-radius: 3px;
        display: block;
        margin-left: 260px;
        width: 140px;
      }

      .trigger:hover,
      .triggerFull:hover,
      .triggerBar:hover {
        opacity: .9;
      }

  <body>
    <script src="https://tornhq.com/Assets/JS/jquery-3.1.1.js"></script>

    <ul class="Fetch-Data-Progress">

      <svg style="position:absolute; padding-top: 20px; pointer-events: none;" width="597" height="75" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <circle id="circle_1_top" class="circle top reg" cx="47" />
        <circle id="circle_1_top_glow" class="circle top glow-circle" cx="47" style="filter: url(#glow)"/>
        <circle id="circle_1_bottom" class="circle bottom reg" cx="47"/>
        <circle id="circle_1_bottom_glow" class="circle bottom glow-circle" cx="47" style="filter: url(#glow)"/>
          <line id="line_1" class="line" x1="77" x2="185" y1="38" y2="38"/>
        <line id="line_1_glow" class="line glow-line" x1="77" x2="185" y1="38" y2="38" style="filter: url(#glow)"/>

        <circle id="circle_2_top" class="circle top reg" cx="216"/>
          <circle id="circle_2_top_glow" class="circle top glow-circle" cx="216" style="filter: url(#glow)"/>
        <circle id="circle_2_bottom" class="circle bottom reg" cx="216"/>
          <circle id="circle_2_bottom_glow" class="circle bottom glow-circle" cx="216" style="filter: url(#glow)"/>
        <line id="line_2" class="line reg_line" x1="246" x2="354" y1="38" y2="38"/>
          <line id="line_2_glow" class="line glow-line" x1="246" x2="354" y1="38" y2="38" style="filter: url(#glow)"/>

        <circle id="circle_3_top" class="circle top reg" cx="384"/>
         <circle id="circle_3_top_glow" class="circle top glow-circle" cx="384" style="filter: url(#glow)"/>
        <circle id="circle_3_bottom" class="circle bottom reg" cx="384"/>
        <circle id="circle_3_bottom_glow" class="circle bottom glow-circle" cx="384" style="filter: url(#glow)"/>
        <line id="line_3" class="line" x1="413" x2="521" y1="38" y2="38"/>
          <line id="line_3_glow" class="line glow-line" x1="413" x2="521" y1="38" y2="38"style="filter: url(#glow)"/>

        <circle id="circle_4_top" class="circle top reg" cx="550"/>
        <circle id="circle_4_top_glow" class="circle top glow-circle" cx="550" style="filter: url(#glow)"/>
        <circle id="circle_4_bottom" class="circle bottom reg" cx="550"/>
          <circle id="circle_4_bottom_glow" class="circle bottom glow-circle" cx="550" style="filter: url(#glow)"/>

          <g style="overflow:hidden; text-anchor: middle; font-size:50; font-family: Impact, sans-serif">
            <defs>
              <filter id="glow" x="-30%" y="-30%" width="160%" height="160%" filterUnits="userSpaceOnUse">
                <feGaussianBlur stdDeviation="4 4" result="glow"/>
                <feMerge>
                <feMergeNode in="glow"/>
                <feMergeNode in="glow"/>
                <feMergeNode in="glow"/>
                </feMerge>
              </filter>
            </defs>
          </g>

       </svg>

        <li><i class="fa fa-user-o"></i></li>
        <li><i class="fa fa-hand-rock-o"></i></li>
        <li><i class="fa fa-building-o"></i></li>
        <li><i class="fa fa-star-o"></i></li>
      </ul>
    <br><br>
    <a class="trigger" href="#" id="start">start</a>
  </body>

样式化自定义 SVG 加载器

Styling Custom SVG Loader

css

svg

svg-animate

我想要实现的目标

我的自定义 SVG 加载器目前的样子

我希望我的装载机生产线看起来像什么