不使用pattern实现SVG根据设备宽度重复平铺的方法咨询

核心实现完全不需要用到SVG的pattern元素，共有两种常用实现方案：

方案1：CSS背景平铺（推荐） #

利用CSS原生的背景重复特性实现，无需额外JS代码，性能最优，窗口尺寸变化会自动适配。

• HTML代码：

<!-- 仅需要一个容器，原SVG的定位类直接放到容器上即可 -->
<div class="svg-tile-container absolute left-0 bottom-0 right-0 mx-auto -z-10 h-[124px]"></div>

• CSS代码：

.svg-tile-container {
  /* 直接使用转义后的SVG作为背景图 */
  background-image: url("data:image/svg+xml,%3Csvg width='54' height='124' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M1 22h2v-22h18v22h2v2h-22v-2zm7-3v4h3v-4h-3zm5 0v4h3v-4h-3zm-6-5h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2z'/%3E%3C/svg%3E");
  /* 仅横向平铺适配设备宽度，需要全屏平铺可以改为repeat */
  background-repeat: repeat-x;
  /* 和原SVG尺寸保持一致即可 */
  background-size: 54px 124px;
}

方案2：JS动态生成SVG实例 #

适合需要单独控制每一个平铺SVG元素的场景。

<div id="svg-container" class="absolute left-0 bottom-0 right-0 mx-auto -z-10 flex"></div>
<script>
const container = document.getElementById('svg-container');
const singleSvgWidth = 54;
let renderCount = 0;

function renderSvgs() {
  const currentWidth = window.innerWidth;
  const needCount = Math.ceil(currentWidth / singleSvgWidth);
  if (needCount === renderCount) return
  const svgTpl = `<svg width="54" height="124" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M1 22h2v-22h18v22h2v2h-22v-2zm7-3v4h3v-4h-3zm5 0v4h3v-4h-3zm-6-5h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2zm-12-4h-2v2h2v-2zm8 0h-2v2h2v-2zm-4 0h-2v2h2v-2zm8 0h-2v2h2v-2z"/></svg>`;
  container.innerHTML = svgTpl.repeat(needCount);
  renderCount = needCount;
}
// 初始化渲染
renderSvgs()
// 窗口尺寸变化时重新渲染
window.addEventListener('resize', renderSvgs)
</script>

内容的提问来源于stack exchange，提问作者Chandler Bing