为 SVG 图案背景设置动画答案

【问题标题】：Animating an SVG pattern background为 SVG 图案背景设置动画
【发布时间】：2021-08-23 03:49:55
【问题描述】：

我目前正在使用 NextJS 和 Tailwind 设计一个新网站，我想制作一个无限平移到右下角的背景，就像在这个示例中一样（但使用我自己的模式）：

实际上我以前从未使用过 SVG 模式。虽然我设法显示如下 SVG 模式，但我似乎无法找到如何为其设置动画。

SVG 显示在 flexbox div 中，如下所示：

<div className="opacity-50 absolute inset-0 scale-150">
   <svg width="100%" height="100%">
      <defs>
         <pattern id="p" width="100" height="100" patternUnits="userSpaceOnUse">
            <path id="a" data-color="fill" fill="#FFF" d="M0 50v50h50C22.386 100 0 77.614 0 50zM100 50C72.386 50 50 27.614 50 0v50h50zM50 25V0C22.386 0 0 22.386 0 50h25c0-13.807 11.193-25 25-25zM100 75V50c-27.614 0-50 22.386-50 50h25c0-13.807 11.193-25 25-25zM25 50c0 13.807 11.193 25 25 25V50H25zM75 0c0 13.807 11.193 25 25 25V0H75z"></path>
</pattern>
      </defs>
      <rect fill="#EEB400" width="100%" height="100%"></rect>
      <rect fill="url(#p)" width="100%" height="100%"></rect>
   </svg>
</div>

我尝试在其上应用 CSS 类、自定义 React 组件，但无济于事。

非常感谢您的宝贵时间:)

【问题讨论】：

一种解决方案是使用 SMIL 将模式的 x 和 y 属性从 0 设置为 100：<animate attributeName="x" from="0" to="100" dur="5s" repeatCount="indefinite" />，y 也是如此

标签： html css reactjs svg next.js

【解决方案1】：

<svg width="100%" height="100%">
    <defs>
        <pattern id="p" width="100" height="100" patternUnits="userSpaceOnUse">
            <path data-color="fill" fill="#FFF" d="M0 50v50h50C22.386 100 0 77.614 0 50zM100 50C72.386 50 50 27.614 50 0v50h50zM50 25V0C22.386 0 0 22.386 0 50h25c0-13.807 11.193-25 25-25zM100 75V50c-27.614 0-50 22.386-50 50h25c0-13.807 11.193-25 25-25zM25 50c0 13.807 11.193 25 25 25V50H25zM75 0c0 13.807 11.193 25 25 25V0H75z"></path>
            <animateTransform attributeName="patternTransform" type="translate" by="100 100" dur="10s" repeatCount="indefinite"></animateTransform>
        </pattern>
    </defs>
    <rect fill="#EEB400" width="100%" height="100%"></rect>
    <rect fill="url(#p)" width="100%" height="100%"></rect>
</svg>

【讨论】：