如何实现SVG图案中每隔一行水平重复时的镜像翻转？

完全可以通过嵌套<pattern>元素实现隔行镜像的重复效果。核心思路是先定义基础图案，再创建一个包含“原始行+镜像行”的父图案，让父图案重复时自动生成隔行镜像的效果。

修改后的完整代码 #

<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="148mm" height="148mm" version="1.1" style="shape-rendering:geometricPrecision; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 14880 14880" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <!-- 基础子图案：原始图像 -->
    <pattern id="basePattern" patternUnits="userSpaceOnUse" width="56" height="96">
      <image x="0" y="0" width="56" height="96" xlink:href="myimage.png" />
    </pattern>

    <!-- 父图案：高度为基础图案的2倍，包含原始行+镜像行 -->
    <pattern id="alternatingPattern" patternUnits="userSpaceOnUse" width="56" height="192" patternTransform="translate(5958.89 8242.19) scale(37.979 37.979)">
      <!-- 第一行：原始图案 -->
      <rect x="0" y="0" width="56" height="96" fill="url(#basePattern)" />
      <!-- 第二行：镜像图案，垂直偏移一个基础图案高度，同时做水平镜像变换 -->
      <rect x="0" y="96" width="56" height="96" fill="url(#basePattern)" transform="scale(-1, 1) translate(-56, 0)" />
    </pattern>
  </defs>
  <g>
    <path style="fill:url(#alternatingPattern)" stroke="#000000" stroke-width="0.00" d="M 2010.80,2815.20 L 12033.90,2815.20 L 12033.90,10023.20 L 2010.80,10023.20 L 2010.80,2815.20 Z "/>
  </g>
</svg>

关键逻辑说明 #

• 基础子图案basePattern：直接引用你的原始图像，定义单个图案的尺寸，是后续操作的基础单元。
• 父图案alternatingPattern：把高度设为基础图案的2倍（192），在这个图案容器里依次放置两行内容：第一行用原始图案，第二行对原始图案做水平镜像——scale(-1,1)实现x轴翻转，translate(-56,0)修正翻转后的位置偏移，保证图案对齐。当父图案重复平铺时，自然形成“原始→镜像→原始→镜像”的隔行效果。
• 保留了你原有的patternTransform参数，确保图案的缩放和位置与你最初的需求一致。

内容的提问来源于stack exchange，提问作者Joakim Vretlund