如何使这个 SVG 图案无缝？

Question

我正在尝试制作一个无缝的 SVG 图案，但没有成功

https://codepen.io/unlocomqx/pen/LYzbbNp

代码

<svg viewBox="0 0 100 100" width="300" height="300">
  <defs>
        <pattern id="grid2" width="10pt" height="10pt" patternUnits="userSpaceOnUse">
          <path d="M 0 0 L 0 10 10 10 10 0 0 0" fill="#f7f6f4" stroke="#DDD" stroke-width="0.5"/>
        </pattern>
      </defs>
      <rect x="0" y="0" width="100" height="100" fill="url(#grid2)"></rect>
</svg>

当我将大小从 10pt 改为 5pt 时，效果很好

<svg viewBox="0 0 100 100" width="300" height="300">
  <defs>
        <pattern id="grid1" width="5pt" height="5pt" patternUnits="userSpaceOnUse">
          <path d="M 0 0 L 0 10 10 10 10 0 0 0" fill="#f7f6f4" stroke="#DDD" stroke-width="0.5"/>
        </pattern>
      </defs>
      <rect x="0" y="0" width="100" height="100" fill="url(#grid1)"></rect>
</svg>

如何解决 10pt 的情况？

Answer 1

你运行遇到了问题，你仍然只能使用 SVG 的内置 userSpaceOnUse 或 objectBoundingBox 单位作为路径，所以你必须使用 rect，它支持更多的单位类型（喜欢积分）。

Not seamless
<svg viewBox="0 0 100 100" width="300" height="300">
  <defs>
        <pattern id="grid2" width="10pt" height="10pt" patternUnits="userSpaceOnUse">
          <rect x="0pt" y="0pt" width="10pt" height="10pt" fill="#f7f6f4" stroke="#DDD" stroke-width="0.5"/>
        </pattern>
      </defs>
      <rect x="0" y="0" width="100" height="100" fill="url(#grid2)"></rect>
</svg>

Seamless
<svg viewBox="0 0 100 100" width="300" height="300">
  <defs>
        <pattern id="grid1" width="5pt" height="5pt" patternUnits="userSpaceOnUse">
          <path d="M 0 0 L 0 10 10 10 10 0 0 0" fill="#f7f6f4" stroke="#DDD" stroke-width="0.5"/>
        </pattern>
      </defs>
      <rect x="0" y="0" width="100" height="100" fill="url(#grid1)"></rect>
</svg>

如何使这个 SVG 图案无缝？

How to make this SVG pattern seamless?

svg