SVG旋转详解

一、SVG旋转点

在SVG中，旋转操作是围绕一个旋转点完成的。默认情况下，SVG元素的旋转点位于元素的中心位置。如果你想要在其他位置进行旋转，可以使用transform-origin属性来指定旋转点的坐标值。

例如，以下代码将以左上角为旋转点，将一个正方形顺时针旋转45度：

<svg width="100" height="100">
  <rect x="10" y="10" width="50" height="50" fill="red" transform="rotate(45 10 10)" />
</svg>

二、SVG旋转属性

要将元素旋转，可以使用transform属性中的rotate（）函数。rotate函数的第一个参数表示旋转角度，第二个参数表示旋转点的x坐标，第三个参数表示旋转点的y坐标。如果省略后两个参数，则默认旋转点是元素的中心点。

例如，以下代码在SVG的画布中绘制了一个圆，并将元素顺时针旋转45度：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" transform="rotate(45 50 50)" />
</svg>

三、SVG旋转90度

如果你需要将SVG元素旋转90度或其它任何数量的90度，可以使用多个rotate函数。例如，以下代码将以左上角为旋转点，将正方形旋转90度：

<svg width="100" height="100">
  <rect x="10" y="10" width="50" height="50" fill="red" transform="rotate(90 10 10)" />
</svg>

四、SVG旋转的小球代码

以下代码演示了一个旋转的小球，当鼠标移动到小球上时，小球将以顺时针方向旋转360度：

<svg width="100" height="100">
  <circle id="ball" cx="50" cy="50" r="20" fill="blue" />
  <script>
    var ball = document.getElementById("ball");
    ball.addEventListener("mouseover", function() {
      ball.setAttribute("transform", "rotate(360 50 50)");
    });
  </script>
</svg>

五、SVG旋转代码

以下代码旋转一个图形，每隔1秒钟旋转45度：

<svg width="100" height="100">
  <g id="group">
    <rect x="10" y="10" width="50" height="50" fill="red" />
    <circle cx="35" cy="25" r="10" fill="yellow" />
  </g>
  <script>
    var group = document.getElementById("group");
    function rotate() {
      var transform = group.getAttribute("transform");
      var angle = transform ? Number(transform.match(/rotate\((\d+)\)/)[1]) : 0;
      angle += 45;
      group.setAttribute("transform", "rotate(" + angle + " 35 35)");
    }
    setInterval(rotate, 1000);
  </script>
</svg>

六、SVG旋转后宽高

如果旋转一个元素后，它的宽度和高度发生了变化，你需要手动更新元素的位置坐标。例如，以下代码将一个矩形旋转45度，并在旋转后更新矩形的位置坐标：

<svg width="100" height="100">
  <g id="group">
    <rect x="10" y="10" width="50" height="50" fill="red" transform="rotate(45 35 35)" />
  </g>
  <script>
    var group = document.getElementById("group");
    var rect = group.querySelector("rect");
    var width = rect.getAttribute("width");
    var height = rect.getAttribute("height");
    group.setAttribute("transform", "rotate(45 " + (Number(width) / 2 + 10) + " " + (Number(height) / 2 + 10) + ")");
  </script>
</svg>

七、SVG旋转动画

SVG支持内置动画，你可以使用animateTransform元素来创建一个旋转动画。以下代码演示了一个以中心轴为旋转点，顺时针旋转的三角形：

<svg width="100" height="100">
  <polygon points="50 10 10 90 90 90" fill="yellow">
    <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 50 50"
                      to="360 50 50"
                      dur="5s"
                      repeatCount="indefinite" />
  </polygon>
</svg>

八、SVG旋转中心

你可以通过设置transform-origin属性来改变SVG元素的旋转中心。默认情况下，旋转中心位于元素的中心位置。以下代码将一个正方形以右上角为旋转点，逆时针旋转45度：

<svg width="100" height="100">
  <rect x="10" y="10" width="50" height="50" fill="red" transform="rotate(-45)" style="transform-origin: top right;" />
</svg>

九、SVG旋转中心改变

如果你需要在动画过程中改变SVG元素的旋转中心，可以使用SMIL动画。SMIL动画支持动态更新属性值，例如以下代码将会以点(30,30)为旋转中心，逆时针旋转正方形：

<svg width="100" height="100">
  <rect id="rect" x="10" y="10" width="50" height="50" fill="red" transform="rotate(0)" />
  <animateTransform attributeName="transform"
                    attributeType="XML"
                    type="rotate"
                    from="0 50 50"
                    to="-360 50 50"
                    dur="5s"
                    repeatCount="indefinite"
                    calcMode="spline"
                    keyPoints="0;0.1;0.5;0.9;1"
                    keyTimes="0;0.2;0.5;0.8;1"
                    values="0;30 30;0;60 60;0" />
</svg>

结语

以上就是SVG旋转的详细阐述，包括旋转点、旋转属性、90度旋转、动画效果等等。通过这篇文章，相信你已经掌握了SVG旋转相关的知识和技能，可以应用到实际工作中。请遵循W3C标准，充分利用SVG的优点，编写出优雅的SVG代码！