html svg加载动画

HTML5 SVG加载动画可以通过SVG的animation属性来实现。你可以在SVG元素中添加一个animation元素，然后通过设置动画的属性（比如持续时间、重复次数、缓动效果等）来定义动画的行为。通过改变SVG元素的属性值，比如位置、颜色、大小等，可以实现动画效果。

另外，还有一些SVG动画库可以帮助你更方便地创建和管理SVG加载动画。这些库提供了一些预定义的动画效果，你可以直接使用或者进行自定义。其中一些库还支持响应式设计，可以根据屏幕大小自动适应。你可以在网上搜索并找到适合你项目需求的SVG动画库。

下面是一个使用SVG绘制线条实现旋转效果的代码示例：

<svg width="800" height="800" id="svg">
  <line id="line" x1="100" y1="100" x2="400" y2="300" stroke="black" stroke-width="5"></line>
</svg>
<script>
  window.onload = function() {
    var line = document.getElementById("line");
    line.onclick = function() {
      let start = parseInt(line.getAttribute("x1"));
      let end = 400;
      let dis = start - end;
      requestAnimationFrame(next);
      let count = 0;
      function next() {
        count++;
        let a = count / 200;
        let cur = Math.abs(start - dis * a);
        line.setAttribute('x1', cur);
        if (count < 200) requestAnimationFrame(next);
      }
    }
  }
</script>

这段代码在点击线条时，会改变线条的x1属性值，从而实现旋转效果。你可以根据自己的需求进行修改和扩展。