如何使用 JavaScript 触发 SVG 动画？（没有 jQuery）答案

【问题标题】：How to trigger an SVG animation with JavaScript? (No jQuery)如何使用 JavaScript 触发 SVG 动画？（没有 jQuery）
【发布时间】：2018-10-13 00:05:03
【问题描述】：

我有一个 SVG 线条路径，使用我找到的这个示例进行动画处理：

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  display: block;
  background: transparent;
}

.path {
  stroke: black;
  stroke-dasharray: 290;
  stroke-dashoffset: 130;
  animation: dash 6s 0s forwards infinite;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes dash {
  from {
    stroke-dashoffset: 290;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
<path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
</svg>

它工作正常，但在页面加载时触发。有没有办法（比如说用一个按钮）使用 JavaScript 触发这个动画？

我可以处理 JS，但我是 CSS 和 SVG 动画的菜鸟。

谁能给我一个例子，说明我如何使用我的实际 CSS 做到这一点？

【问题讨论】：

标签： javascript css svg

【解决方案1】：

您也可以使用 SMIL 动画语法代替 CSS 动画。不可否认，这具有无法在 Microsoft 浏览器（IE 和 Edge）中运行的缺点。

var animation = document.getElementById("dash");

function showSVG() {
  animation.beginElement();
}

svg {
  position: relative;
  width: 100%;
  height: 150px;
  left: 0%;
  top: 0%;
  display: block;
  background: transparent;
}

.path {
  stroke: black;
  stroke-dasharray: 290;
  stroke-dashoffset: 290;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<button id="button" onclick="showSVG()">Click</button>
<svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
  <path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent">
  <animate id="dash" 
    attributeName="stroke-dashoffset"
    from="290" to="0"
    begin="indefinite" 
    dur="6s" 
    fill="freeze" />
  </path>
</svg>

每次单击时，此动画都会运行一次。如果您希望它以固定间隔重复，如 CSS animation-repeat: infinite 规定，请使用

<animate id="dash" attributeName="stroke-dashoffset"
    from="290" to="0"
    begin="indefinite" dur="6s" repeatCount="indefinite" />

【讨论】：

【解决方案2】：

svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    display: block;
    background: transparent;
}

.path {
    stroke: black;
    stroke-dasharray: 290;
    stroke-dashoffset: 130;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dashoffset: 290;
}

.animated {
    animation: dash 6s 0s forwards infinite;
    stroke-dashoffset: 0;
}

@keyframes dash {
    from {
        stroke-dashoffset: 290;
    }
    to {
        stroke-dashoffset: 0;
    }
}

然后您可以在需要时使用 js 将 .animated 类添加到您的路径中。

【讨论】：

【解决方案3】：

您应该将动画包含在 css 类中：

    .dash-animate {
        animation: dash 6s 0s forwards infinite;
    }

    @keyframes dash {
      from {
        stroke-dashoffset: 290;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

然后只需在您想要使用 js 的时间/地点应用该类：

var button = getElementById('some-button');

button.addEventListner('click', function() {
  var elements = document.querySelectorAll('.path');
  Array.prototype.forEach.call(elements, function(el) {
    el.classList.add('dash-animate');
  });
});

【讨论】：

【解决方案4】：

var svgPattern = document.getElementById("svg")
svgPattern.style.display = "none";
function showSVG(){
svgPattern.style.display = "block";
}

                svg{
                    position:absolute;
                    width:100%;
                    height:100%;
                    left:0%;
                    top:0%;
                    display:block;
                    background:transparent;
                }
                
                .path {
                    stroke:black;
                    stroke-dasharray: 290;
                    stroke-dashoffset: 130;
                    animation: dash 6s 0s forwards infinite;
                    stroke-width:2px;
                    stroke-linecap:round;
                    stroke-linejoin:round;
                }
                
                @keyframes dash {
                  from {
                    stroke-dashoffset: 290;
                  }
                  to {
                    stroke-dashoffset: 0;
                  }
                }

<button id ="button" onclick="showSVG()">Click</button>
               <svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3.org/2000/svg">
                    <path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
                </svg>

【讨论】：