写一个点击旋转的svg

我可以帮您完成这个问题。您可以使用CSS3中的transform属性和@keyframes关键字来创建旋转的SVG。以下是一个简单的例子：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="none"/>
</svg>

<style>
  svg {
    animation: rotate 2s linear infinite;
  }
  
  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

将以上代码添加到您的HTML中，您将获得一个无限旋转的SVG圆形。您可以根据需要调整SVG的大小、颜色和动画速度等属性。希望这可以帮助到您！

相关问题

点击 svg 图标 旋转

抱歉，作为 AI，我无法直接操作页面元素。但是，你可以使用 CSS 动画和 JavaScript 来实现点击 SVG 图标旋转的效果。以下是一个简单的示例：

HTML 代码：

<svg class="icon" onclick="rotateIcon()">
  <path d="M10 5L20 15L10 25"></path>
</svg>

CSS 代码：

.icon {
  width: 30px;
  height: 30px;
  transition: transform 0.3s ease;
}

.icon.rotate {
  transform: rotate(180deg);
}

JavaScript 代码：

function rotateIcon() {
  var icon = document.querySelector('.icon');
  icon.classList.toggle('rotate');
}

这个示例将在 SVG 图标上添加一个点击事件处理程序，该处理程序会在点击时切换 `rotate` 类。这个类定义了一个旋转变换，通过 CSS 过渡动画可以实现平滑的旋转效果。

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属性值，从而实现旋转效果。你可以根据自己的需求进行修改和扩展。