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

Question

我有一个使用我发现的示例动画的 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 来制作它？

谢谢。

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

每次单击时该动画都会运行一次。如果你希望它以固定的间隔重复，就像 CSSanimation-repeat: infinite规定的那样，请使用

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