如何创建适配网页背景的可复用SVG六边形重复图案？

核心改进思路 #

放弃手动复制<use>标签的低效方式，改用SVG的<pattern>定义可重复的六边形单元，再结合CSS将SVG设置为全屏背景——既能自动平铺重复，又能完美适配任意屏幕尺寸，彻底解决手动维护元素的繁琐问题。

实现代码示例 #

方案1：纯SVG内置重复网格（适配全屏）

直接在SVG内部用<pattern>构建六边形交错网格，同时设置SVG占满视口：

body {
  margin: 0;
}
svg {
  width: 100vw;
  height: 100vh;
  display: block;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 103.92">
  <!-- 定义基础六边形路径 -->
  <defs>
    <path id="hex" fill="#D4C1DE" fill-opacity="0.3" 
          d="M0 25.98L15 0L45 0L60 25.98L45 51.96L15 51.96Z" />
    
    <!-- 定义重复图案：实现六边形交错排列 -->
    <pattern id="hexPattern" width="60" height="51.96" 
             patternUnits="userSpaceOnUse" patternTransform="translate(30 25.98)">
      <use href="#hex" />
      <use href="#hex" x="60" />
      <use href="#hex" x="30" y="25.98" />
      <use href="#hex" x="90" y="25.98" />
    </pattern>
  </defs>
  
  <!-- 用矩形填充整个SVG，应用重复图案 -->
  <rect width="100%" height="100%" fill="url(#hexPattern)" />
</svg>

方案2：SVG作为CSS背景图（更灵活）

如果需要用CSS控制背景属性（比如固定背景、调整图案大小），可以把SVG转成内联背景图：

body {
  margin: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 103.92"><defs><path id="hex" fill="%23D4C1DE" fill-opacity="0.3" d="M0 25.98L15 0L45 0L60 25.98L45 51.96L15 51.96Z"/><pattern id="hexPattern" width="60" height="51.96" patternUnits="userSpaceOnUse" patternTransform="translate(30 25.98)"><use href="%23hex"/><use href="%23hex" x="60"/><use href="%23hex" x="30" y="25.98"/><use href="%23hex" x="90" y="25.98"/></pattern></defs><rect width="100%" height="100%" fill="url(%23hexPattern)"/></svg>');
  background-size: 120px 103.92px; /* 自定义图案大小 */
  background-repeat: repeat;
}

方案3：保留六边形缩放渐变效果

如果需要复刻你原代码中“单列缩放渐变”的视觉，只需修改<pattern>内部的<use>标签，给不同位置的六边形设置不同缩放比例，再让这个单元重复铺满屏幕：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 200">
  <defs>
    <path id="hex" fill="#D4C1DE" fill-opacity="0.3" 
          d="M0 25.98L15 0L45 0L60 25.98L45 51.96L15 51.96Z" />
    
    <pattern id="scaledHexPattern" width="120" height="200" patternUnits="userSpaceOnUse">
      <use href="#hex" transform="scale(0.2)" x="30" y="10" />
      <use href="#hex" transform="scale(0.3)" x="30" y="40" />
      <use href="#hex" transform="scale(0.4)" x="30" y="70" />
      <use href="#hex" transform="scale(0.5)" x="30" y="100" />
      <use href="#hex" transform="scale(0.6)" x="30" y="130" />
      <use href="#hex" transform="scale(0.7)" x="30" y="160" />
      <!-- 右侧列镜像缩放效果 -->
      <use href="#hex" transform="scale(0.2) scaleX(-1)" x="90" y="10" />
      <use href="#hex" transform="scale(0.3) scaleX(-1)" x="90" y="40" />
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#scaledHexPattern)" />
</svg>

关键细节说明 #

• <pattern>的尺寸基于正六边形的外接矩形计算：宽度60px，高度约51.96px（正六边形高度=边长×√3，此处边长为30px）。
• patternTransform="translate(30 25.98)用来偏移奇数行，实现六边形无间隙的交错排列。
• 用全屏矩形或CSS背景填充，确保图案自动铺满屏幕，无需手动复制任何元素。

内容的提问来源于stack exchange，提问作者Chris Barr