svg怎么实现坐标系统变换附代码

什么是SVG？

SVG，即可缩放矢量图形，是一种基于XML语言的向量图形，可以被用来描述二维图形和动态交互效果。与像素图形不同，SVG图像可以在不失真地放大或缩小的情况下，保持清晰度和细节，因此常用于Web端和移动端的图形展示和动画效果实现。

什么是坐标系统变换？

坐标系统变换指对原有的坐标系进行位移、旋转、缩放等变换操作，从而得到新的坐标系。在SVG中，原点（0, 0）为图像左上角，为了方便进行变换操作，可以将原点位移到图像的中心，这样就可以在中心点进行旋转和缩放操作。

<svg viewBox="-50 -50 100 100">
  <circle cx="0" cy="0" r="10" fill="red" />
</svg>

在上述代码中，通过设置viewBox属性，将图像的中心点(0,0)移动到坐标系中心，即(-50,-50)，视口的大小为(100,100)。通过circle元素创建一个半径为10的圆，填充颜色为红色。

如何进行坐标系统变换？

在SVG中，可以通过transform属性对图形进行平移、旋转和缩放变换。transform可以设置一个或多个transform函数进行组合使用。常用的transform函数包括translate、rotate、scale和skewX/skewY。

<svg viewBox="-50 -50 100 100">
  <g transform="translate(20, 0) rotate(45) scale(2) skewX(30)">
    <circle cx="0" cy="0" r="10" fill="red" />
  </g>
</svg>

在上述代码中，通过设置transform属性，在原点(0,0)处先向右平移20，再顺时针旋转45度，接着在横向上进行缩放2倍，最后在X轴方向上倾斜30度。最终形成的图形如下：

实现思路和代码

要实现坐标系统变换，首先需要了解SVG的坐标系和视口的概念。坐标系是一个以原点(0,0)为起点的二维直角坐标系统；视口是一个可视的矩形区域，决定了图像在屏幕上显示的大小。在进行变换时，需要先明确原始图像的坐标系和视口的设置，然后再通过transform函数对图像进行变换操作。

<svg viewBox="-100 -100 200 200" height="500">
  <g id="group-1">
    <rect x="0" y="0" width="50" height="50" fill="red" />
    <circle cx="0" cy="0" r="25" fill="blue" />
  </g>

  <g id="group-2" transform="translate(0, 100)">
    <rect x="0" y="0" width="50" height="50" fill="yellow" />
    <circle cx="0" cy="0" r="25" fill="green" />
  </g>

  <g id="group-3" transform="rotate(45)">
    <rect x="0" y="0" width="50" height="50" fill="orange" />
    <circle cx="0" cy="0" r="25" fill="purple" />
  </g>
</svg>

在上述代码中，创建一个高度为500的SVG元素，设置了viewBox属性为(-100,-100,200,200)，即原点设置在坐标轴中心，可视矩形大小为(200,200)。通过定义三个组(group)，分别为group-1, group-2和group-3，分别设置了不同的变换操作，如水平移动、旋转以及同时缩放和旋转。通过对组进行变换操作，实现图像的坐标系统变换效果。