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代碼！