小贝子编程

如何激活在视口上出现的分层SVG的动画



我已经研究了有关触发动画的其他Stackoverflow问题，但所有类似的问题仅使用单层SVG。

我的SVG是分层的(不同的部分(，因此我无法(或者，不知道如何(SVG的所有部分出现在视口上。

这是我指的是：https：//codepen.io/aahlfeeyann/full/rmlmke/

<svg class="birthday-cake" version="1.1" viewBox="0 0 58 53" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!--Generated by IJSVG (https://github.com/curthard89/IJSVG)-->
            <defs>
                <path id="path-4" d="M0,0v6"></path>
                <path id="path-6" d="M3,3l-3,-3"></path>
                <path id="path-1" d="M12.5,0c0,3.452 -2.798,6.25 -6.25,6.25c-3.452,0 -6.25,-2.798 -6.25,-6.25"></path>
                <path id="path-3" d="M0,5h10.45c-0.133,-2.781 -2.411,-5 -5.225,-5c-2.814,0 -5.092,2.219 -5.225,5v0Z"></path>
                <path id="path-2" d="M10.45,0h-10.45c0.133,2.781 2.411,5 5.225,5c2.814,0 5.092,-2.219 5.225,-5v0Z"></path>
                <path id="path-5" d="M0,3l3,-3"></path>
            </defs>
            <g transform="translate(-841, -1680)">
                <g transform="translate(842, 1681)">
                    <g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                        <!-- Candles -->
                        <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-5"></use>
                        <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-5"></use>
                        <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-5"></use>
                        <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-5"></use>
                        <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-6"></use>
                        <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-6"></use>
                        <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-6"></use>
                        <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-6"></use>      
                        <!-- Main Cake Shape -->
                        <path class="cake-shape animate" d="M50,14h-50v-12c0,-1.1 0.9,-2 2,-2h46c1.1,0 2,0.9 2,2v12v0Z" transform="translate(3, 34)"></path>
                        <path class="cake-shape animate" d="M42,14h-42v-12c0,-1.1 0.9,-2 2,-2h38c1.1,0 2,0.9 2,2v12v0Z" transform="translate(7, 20)"></path>
                        <path class="cake-shape animate" d="M34,14h-34v-12c0,-1.1 0.9,-2 2,-2h30c1.1,0 2,0.9 2,2v12v0Z" transform="translate(11, 6)"></path>                    
                        <!-- 1st Layer Deco -->
                        <path class="first-deco animate" d="M4.475,0h-4.475c0.133,2.781 2.411,5 5.225,5c0.433,0 0.847,-0.067 1.25,-0.166v-2.834c0,-1.1 -0.9,-2 -2,-2v0Z" transform="translate(38.525, 6)"></path>
                        <path class="first-deco animate" d="M1.25,5c2.814,0 5.092,-2.219 5.225,-5h-4.475c-1.1,0 -2,0.9 -2,2v2.834c0.403,0.099 0.817,0.166 1.25,0.166v0Z" transform="translate(11, 6)"></path>
                        <use class="first-deco animate" transform="translate(17.525, 6)" xlink:href="#path-2"></use>
                        <use class="first-deco animate" transform="translate(28.025, 6)" xlink:href="#path-2"></use>
                        <use class="first-deco animate" transform="translate(28.025, 15)" xlink:href="#path-3"></use>
                        <use class="first-deco animate" transform="translate(17.525, 15)" xlink:href="#path-3"></use>
                        <path class="first-deco animate" d="M2,5h4.475c-0.133,-2.781 -2.411,-5 -5.225,-5c-0.433,0 -0.847,0.067 -1.25,0.166v2.834c0,1.1 0.9,2 2,2v0Z" transform="translate(11, 15)"></path>
                        <path class="first-deco animate" d="M5.225,0c-2.814,0 -5.092,2.219 -5.225,5h4.475c1.1,0 2,-0.9 2,-2v-2.834c-0.403,-0.099 -0.817,-0.166 -1.25,-0.166v0Z" transform="translate(38.525, 15)"></path>
                        <!-- 2nd Layer Deco -->
                        <use class="second-deco animate" transform="translate(10, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(14, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(18, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(22, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(26, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(30, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(34, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(38, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(42, 24)" xlink:href="#path-4"></use>
                        <use class="second-deco animate" transform="translate(46, 24)" xlink:href="#path-4"></use>
                        <!-- 3rd Layer Deco -->
                        <use class="third-deco animate" transform="translate(3, 37.75)" xlink:href="#path-1"></use>
                        <use class="third-deco animate" transform="translate(15.5, 37.75)" xlink:href="#path-1"></use>
                        <use class="third-deco animate" transform="translate(28, 37.75)" xlink:href="#path-1"></use>
                        <use class="third-deco animate" transform="translate(40.5, 37.75)" xlink:href="#path-1"></use>
                        <!-- Bottom Plate -->
                        <path class="bottom-plate animate" d="M0,0h56" transform="translate(0, 48)"></path>
                        <path class="bottom-plate animate" d="M0,0h48" transform="translate(4, 51)"></path>    
                    </g>
                </g>
            </g>

此代码将帮助您在Scrolldown时对蛋糕进行动画动画。我正在使用卷轴v2.0.5进行滚动检测。首先，您需要启动控制器：

var controller = new ScrollMagic.Controller();

然后，您为操作构建scene添加setClassToggle，而addTo添加controller：

var scene = new ScrollMagic.Scene({triggerElement: "#trigger", duration: 300});
scene.setClassToggle("#birthday-cake", "ontrigger");
scene.addTo(controller);

我在具有info-title类的div中添加了id="trigger"：

最后，在CSS中，我从.animate类中删除了animation-name: draw;，然后创建了一个.ontrigger .animate规则：

.ontrigger .animate{
    animation-name: draw;
}

update

使用 scrollmagic 的想法是控制您何时要触发event也可以控制您要触发该事件的次数。

因此，我用on()方法替换了scene.setClassToggle()，以添加两个事件侦听器。第一个事件将是触发 enter到屏幕中间，另一个事件将在end。

scene.on('enter', function(e) {
  ...
})
scene.on('end', function(e) {
  ...
});

最后一个元素是我们需要使用remove()方法从scene删除控制器，因此它将停止触发enter和end事件

这是Codepen中的实现

$(function() { // wait for document ready
  // init controller
  var controller = new ScrollMagic.Controller();
  // build scene
  var scene = new ScrollMagic.Scene({
    triggerElement: "#trigger",
    duration: 300
  });
  scene.on('enter', function(e) {
    console.log('onEnter');
    $('#birthday-cake').addClass('ontrigger');
  });
  scene.on('end', function(e) {
    console.log('onEnd');
    scene.remove();
  });
  scene.addTo(controller);
});
h4{
    font-size: 1.750em;
}
.info-box{
    width: 400px;
    height: 500px;
    
    margin: 50px 0;
    
    border: 1px solid burlywood;
    border-radius: 10px;
    text-align: center;
    transition: all 0.4s;
}
.info-box:hover{
    box-shadow: 0px 10px 50px -10px rgba(0,0,0,0.4);
}
.info-title{
    margin-top: 30px;
}
.info-title p{
    width: 70%;
    margin: 30px auto;
}
/* Cake Panel */
svg{
    max-width: 60%;
    max-height: 60%;
    margin-top: 20px;
}
.animate {
    stroke-width: 2;
    stroke: #000;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.ontrigger .animate {
    animation-name: draw;
}
.candles{
    stroke-dasharray: 5;
    stroke-dashoffset: 5;
    animation-duration: 1s;
    animation-delay: 2s;
}
.cake-shape{
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation-duration: 2s;
}
.first-deco{
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation-duration: 1s;
    animation-delay: 2s
}
.second-deco{
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    animation-duration: 1s;
    animation-delay: 2s
}
.third-deco{
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation-duration: 1s;
    animation-delay: 2s
}
.bottom-plate{
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation-duration: 1s;
    animation-delay: 2s
}
/* Icon Keyframes*/
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
/* Footer */
footer{
    min-width: 100%;
    height:100px;
    background-color: burlywood;
}
.hero{
  height: 100vh;
  width:100%;
  background-color: #ff0000;
  display: flex;
  align-items:center;
}
.hero p{
  margin: 0 auto;
}
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i|Playfair+Display:900" rel="stylesheet">
<body>
  <!-- Hero -->
  <div class="hero">
    <p>FULL SCREEN DIV</p>
  </div>
  <!-- Main Content -->
  <section class="detail">
    <h1 class="section-header">What We Do</h1>
    <div class="info-box">
      <div id="trigger" class="info-title">
        <h4>We have the greatest collections of cakes</h4>
        <p>Our cakes are oven-baked to golden-brown, with handpicked ingredients to ensure 100% quality.</p>
      </div>
      <svg id="birthday-cake" version="1.1" viewBox="0 0 58 53" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!--Generated by IJSVG (https://github.com/curthard89/IJSVG)-->
        <defs>
          <path id="path-4" d="M0,0v6"></path>
          <path id="path-6" d="M3,3l-3,-3"></path>
          <path id="path-1" d="M12.5,0c0,3.452 -2.798,6.25 -6.25,6.25c-3.452,0 -6.25,-2.798 -6.25,-6.25"></path>
          <path id="path-3" d="M0,5h10.45c-0.133,-2.781 -2.411,-5 -5.225,-5c-2.814,0 -5.092,2.219 -5.225,5v0Z"></path>
          <path id="path-2" d="M10.45,0h-10.45c0.133,2.781 2.411,5 5.225,5c2.814,0 5.092,-2.219 5.225,-5v0Z"></path>
          <path id="path-5" d="M0,3l3,-3"></path>
        </defs>
        <g transform="translate(-841, -1680)">
          <g transform="translate(842, 1681)">
            <g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
              <!-- Candles -->
              <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-5"></use>
              <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-5"></use>
              <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-5"></use>
              <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-5"></use>
              <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-6"></use>
              <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-6"></use>
              <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-6"></use>
              <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-6"></use>
              <!-- Main Cake Shape -->
              <path class="cake-shape animate" d="M50,14h-50v-12c0,-1.1 0.9,-2 2,-2h46c1.1,0 2,0.9 2,2v12v0Z" transform="translate(3, 34)"></path>
              <path class="cake-shape animate" d="M42,14h-42v-12c0,-1.1 0.9,-2 2,-2h38c1.1,0 2,0.9 2,2v12v0Z" transform="translate(7, 20)"></path>
              <path class="cake-shape animate" d="M34,14h-34v-12c0,-1.1 0.9,-2 2,-2h30c1.1,0 2,0.9 2,2v12v0Z" transform="translate(11, 6)"></path>
              <!-- 1st Layer Deco -->
              <path class="first-deco animate" d="M4.475,0h-4.475c0.133,2.781 2.411,5 5.225,5c0.433,0 0.847,-0.067 1.25,-0.166v-2.834c0,-1.1 -0.9,-2 -2,-2v0Z" transform="translate(38.525, 6)"></path>
              <path class="first-deco animate" d="M1.25,5c2.814,0 5.092,-2.219 5.225,-5h-4.475c-1.1,0 -2,0.9 -2,2v2.834c0.403,0.099 0.817,0.166 1.25,0.166v0Z" transform="translate(11, 6)"></path>
              <use class="first-deco animate" transform="translate(17.525, 6)" xlink:href="#path-2"></use>
              <use class="first-deco animate" transform="translate(28.025, 6)" xlink:href="#path-2"></use>
              <use class="first-deco animate" transform="translate(28.025, 15)" xlink:href="#path-3"></use>
              <use class="first-deco animate" transform="translate(17.525, 15)" xlink:href="#path-3"></use>
              <path class="first-deco animate" d="M2,5h4.475c-0.133,-2.781 -2.411,-5 -5.225,-5c-0.433,0 -0.847,0.067 -1.25,0.166v2.834c0,1.1 0.9,2 2,2v0Z" transform="translate(11, 15)"></path>
              <path class="first-deco animate" d="M5.225,0c-2.814,0 -5.092,2.219 -5.225,5h4.475c1.1,0 2,-0.9 2,-2v-2.834c-0.403,-0.099 -0.817,-0.166 -1.25,-0.166v0Z" transform="translate(38.525, 15)"></path>
              <!-- 2nd Layer Deco -->
              <use class="second-deco animate" transform="translate(10, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(14, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(18, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(22, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(26, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(30, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(34, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(38, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(42, 24)" xlink:href="#path-4"></use>
              <use class="second-deco animate" transform="translate(46, 24)" xlink:href="#path-4"></use>
              <!-- 3rd Layer Deco -->
              <use class="third-deco animate" transform="translate(3, 37.75)" xlink:href="#path-1"></use>
              <use class="third-deco animate" transform="translate(15.5, 37.75)" xlink:href="#path-1"></use>
              <use class="third-deco animate" transform="translate(28, 37.75)" xlink:href="#path-1"></use>
              <use class="third-deco animate" transform="translate(40.5, 37.75)" xlink:href="#path-1"></use>
              <!-- Bottom Plate -->
              <path class="bottom-plate animate" d="M0,0h56" transform="translate(0, 48)"></path>
              <path class="bottom-plate animate" d="M0,0h48" transform="translate(4, 51)"></path>
            </g>
          </g>
        </g>
      </svg>
    </div>
    <div class="info-box">
      <div class="info-title">
        <h4>Our cookies are irresistible</h4>
        <p>From almonds to hazelnuts, we have a variety of mouth-watering cookies for you to choose from. </p>
      </div>
    </div>
    <div class="info-box">
      <div class="info-title">
        <h4>Island-wide outlets to cater to your needs</h4>
        <p>We have 40 outlets islandwide, so you don't worry about not finding an outlet near you!</p>
      </div>
    </div>
  </section>
  <!-- Footer -->
  <footer>
  </footer>
  <!-- Scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
</body>

选择您喜欢的JS代码的位，以确定您的SVG何时在屏幕上。然后将其添加到SVG中，以触发动画。

然后确保您的动画CSS规则仅在SVG具有"屏幕上"类时触发。

.animate{
    stroke-width: 2;
    stroke: #000;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.onscreen .animate{
    animation-name: draw;
}

示例在这里：

document.getElementById("test").addEventListener('click', function(evt) {
  $("#birthday-cake").addClass("onscreen");
  // Note: addClass() on SVG elements requires jQuery 2.2+
})
h4{
    font-size: 1.750em;
}
.info-box{
    width: 400px;
    height: 500px;
    
    margin: 50px 0;
    
    border: 1px solid burlywood;
    border-radius: 10px;
    text-align: center;
    transition: all 0.4s;
}
.info-box:hover{
    box-shadow: 0px 10px 50px -10px rgba(0,0,0,0.4);
}
.info-title{
    margin-top: 30px;
}
.info-title p{
    width: 70%;
    margin: 30px auto;
}
/* Cake Panel */
svg{
    max-width: 60%;
    max-height: 60%;
    margin-top: 20px;
}
.animate{
    stroke-width: 2;
    stroke: #000;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.onscreen .animate{
    animation-name: draw;
}
.candles{
    stroke-dasharray: 5;
    stroke-dashoffset: 5;
    animation-duration: 1s;
    animation-delay: 2s;
}
.cake-shape{
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation-duration: 2s;
}
.first-deco{
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation-duration: 1s;
    animation-delay: 2s
}
.second-deco{
    stroke-dasharray: 10;
    stroke-dashoffset: 10;
    animation-duration: 1s;
    animation-delay: 2s
}
.third-deco{
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation-duration: 1s;
    animation-delay: 2s
}
.bottom-plate{
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation-duration: 1s;
    animation-delay: 2s
}
/* Icon Keyframes*/
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
/* Footer */
footer{
    min-width: 100%;
    height:100px;
    background-color: burlywood;
}
.hero{
  height: 100vh;
  width:100%;
  background-color: #ff0000;
  display: flex;
  align-items:center;
}
.hero p{
  margin: 0 auto;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="info-box">
                <div class="info-title">
                    <h4>We have the greatest collections of cakes</h4>
                    <p>Our cakes are oven-baked to golden-brown, with handpicked ingredients to ensure 100% quality.</p>
                </div>
                <svg id="birthday-cake" version="1.1" viewBox="0 0 58 53" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <!--Generated by IJSVG (https://github.com/curthard89/IJSVG)-->
                <defs>
                    <path id="path-4" d="M0,0v6"></path>
                    <path id="path-6" d="M3,3l-3,-3"></path>
                    <path id="path-1" d="M12.5,0c0,3.452 -2.798,6.25 -6.25,6.25c-3.452,0 -6.25,-2.798 -6.25,-6.25"></path>
                    <path id="path-3" d="M0,5h10.45c-0.133,-2.781 -2.411,-5 -5.225,-5c-2.814,0 -5.092,2.219 -5.225,5v0Z"></path>
                    <path id="path-2" d="M10.45,0h-10.45c0.133,2.781 2.411,5 5.225,5c2.814,0 5.092,-2.219 5.225,-5v0Z"></path>
                    <path id="path-5" d="M0,3l3,-3"></path>
                </defs>
                <g transform="translate(-841, -1680)">
                    <g transform="translate(842, 1681)">
                        <g fill="none" fill-rule="evenodd" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                            <!-- Candles -->
                            <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-5"></use>
                            <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-5"></use>
                            <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-5"></use>
                            <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-5"></use>
                            <use class="candles animate" transform="translate(37, 0)" xlink:href="#path-6"></use>
                            <use class="candles animate" transform="translate(30, 0)" xlink:href="#path-6"></use>
                            <use class="candles animate" transform="translate(23, 0)" xlink:href="#path-6"></use>
                            <use class="candles animate" transform="translate(16, 0)" xlink:href="#path-6"></use>      
                            
                            <!-- Main Cake Shape -->
                            <path class="cake-shape animate" d="M50,14h-50v-12c0,-1.1 0.9,-2 2,-2h46c1.1,0 2,0.9 2,2v12v0Z" transform="translate(3, 34)"></path>
                            <path class="cake-shape animate" d="M42,14h-42v-12c0,-1.1 0.9,-2 2,-2h38c1.1,0 2,0.9 2,2v12v0Z" transform="translate(7, 20)"></path>
                            <path class="cake-shape animate" d="M34,14h-34v-12c0,-1.1 0.9,-2 2,-2h30c1.1,0 2,0.9 2,2v12v0Z" transform="translate(11, 6)"></path>                    
                            <!-- 1st Layer Deco -->
                            <path class="first-deco animate" d="M4.475,0h-4.475c0.133,2.781 2.411,5 5.225,5c0.433,0 0.847,-0.067 1.25,-0.166v-2.834c0,-1.1 -0.9,-2 -2,-2v0Z" transform="translate(38.525, 6)"></path>
                            <path class="first-deco animate" d="M1.25,5c2.814,0 5.092,-2.219 5.225,-5h-4.475c-1.1,0 -2,0.9 -2,2v2.834c0.403,0.099 0.817,0.166 1.25,0.166v0Z" transform="translate(11, 6)"></path>
                            
                            <use class="first-deco animate" transform="translate(17.525, 6)" xlink:href="#path-2"></use>
                            <use class="first-deco animate" transform="translate(28.025, 6)" xlink:href="#path-2"></use>
                            <use class="first-deco animate" transform="translate(28.025, 15)" xlink:href="#path-3"></use>
                            <use class="first-deco animate" transform="translate(17.525, 15)" xlink:href="#path-3"></use>
                            
                            <path class="first-deco animate" d="M2,5h4.475c-0.133,-2.781 -2.411,-5 -5.225,-5c-0.433,0 -0.847,0.067 -1.25,0.166v2.834c0,1.1 0.9,2 2,2v0Z" transform="translate(11, 15)"></path>
                            <path class="first-deco animate" d="M5.225,0c-2.814,0 -5.092,2.219 -5.225,5h4.475c1.1,0 2,-0.9 2,-2v-2.834c-0.403,-0.099 -0.817,-0.166 -1.25,-0.166v0Z" transform="translate(38.525, 15)"></path>
                            
                            <!-- 2nd Layer Deco -->
                            <use class="second-deco animate" transform="translate(10, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(14, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(18, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(22, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(26, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(30, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(34, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(38, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(42, 24)" xlink:href="#path-4"></use>
                            <use class="second-deco animate" transform="translate(46, 24)" xlink:href="#path-4"></use>
                            
                            <!-- 3rd Layer Deco -->
                            <use class="third-deco animate" transform="translate(3, 37.75)" xlink:href="#path-1"></use>
                            <use class="third-deco animate" transform="translate(15.5, 37.75)" xlink:href="#path-1"></use>
                            <use class="third-deco animate" transform="translate(28, 37.75)" xlink:href="#path-1"></use>
                            <use class="third-deco animate" transform="translate(40.5, 37.75)" xlink:href="#path-1"></use>
                                                      
                            <!-- Bottom Plate -->
                            <path class="bottom-plate animate" d="M0,0h56" transform="translate(0, 48)"></path>
                            <path class="bottom-plate animate" d="M0,0h48" transform="translate(4, 51)"></path>    
                                           
                        </g>
                    </g>
                </g>
</svg>
              <button id="test">Trigger onscreesn</button>
            </div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium