How to make this SVG pattern seamless?-CodePudding

I'm trying to make a SVG pattern seamless but with no luck

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

Code

<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>

When I change the size to 5pt instead of 10pt, it works well

<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>

How to fix it for the 10pt case?

CodePudding user response：

You're running into the problem here that you can still only use SVG's built-in userSpaceOnUse or objectBoundingBox units for paths, so you'll have to use a rect, which does support more unit types (like pts).

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>