SVG网格变换-水平翻转

在使用SVG进行图形设计时，有时需要对整个网格或其中的部分元素进行水平翻转。水平翻转可以通过transform属性中的scale变换来实现。以下是具体的方法和示例：

基本概念

transform属性：用于对SVG元素进行各种变换，如平移、旋转、缩放等。
scale变换：用于缩放元素。当scale的X轴参数为-1时，可以实现水平翻转；同时需要调整元素的transform-origin或使用translate来确保元素在翻转后保持在正确的位置。

示例代码

以下是一个简单的示例，展示如何对SVG中的网格进行水平翻转：

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 定义一个网格 -->
  <g id="grid">
    <line x1="0" y1="0" x2="400" y2="0" stroke="black" />
    <line x1="0" y1="0" x2="0" y2="200" stroke="black" />
    <line x1="100" y1="0" x2="100" y2="200" stroke="black" />
    <line x1="200" y1="0" x2="200" y2="200" stroke="black" />
    <line x1="300" y1="0" x2="300" y2="200" stroke="black" />
    <line x1="0" y1="50" x2="400" y2="50" stroke="black" />
    <line x1="0" y1="100" x2="400" y2="100" stroke="black" />
    <line x1="0" y1="150" x2="400" y2="150" stroke="black" />
  </g>

  <!-- 水平翻转网格 -->
  <use href="#grid" transform="scale(-1, 1) translate(-400, 0)" />
</svg>

解释

定义网格：
- 使用<g>标签将网格的所有线条组合在一起，并赋予一个ID（如grid）。
- 使用多条<line>元素绘制水平和垂直的网格线。
水平翻转网格：
- 使用<use>标签引用之前定义的网格。
- 应用transform="scale(-1, 1) translate(-400, 0)"：
  - scale(-1, 1)：将X轴缩放因子设为-1，实现水平翻转。
  - translate(-400, 0)：由于scale(-1, 1)会将图形沿X轴翻转并移动到左侧，因此需要通过平移将图形移回可视区域。这里的-400是SVG画布宽度的一半（因为翻转后图形会移动到负坐标）。

只翻转特定元素

如果只需要翻转SVG中的某些元素，而不是整个网格，可以为这些元素单独应用transform属性。例如：

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <g id="grid">
    <!-- 网格线条 -->
    <!-- ... -->
  </g>
  
  <rect x="50" y="50" width="100" height="100" fill="blue" />
  <rect x="200" y="50" width="100" height="100" fill="red" transform="scale(-1, 1) translate(-300, 0)" />
</svg>

在这个示例中，只有红色的矩形被水平翻转，而蓝色的矩形保持不变。

使用CSS进行翻转

除了在SVG内部使用transform属性，还可以通过CSS来实现翻转：

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .flip-horizontal {
      transform: scale(-1, 1);
      transform-origin: left center;
    }
  </style>
  
  <g id="grid">
    <!-- 网格线条 -->
    <!-- ... -->
  </g>
  
  <rect x="50" y="50" width="100" height="100" fill="blue" />
  <rect x="200" y="50" width="100" height="100" fill="red" class="flip-horizontal" />
</svg>

在这个示例中，通过为红色矩形添加flip-horizontal类，并在CSS中定义翻转效果，实现水平翻转。