Why is the pattern mask in this SVG cutting off at 300 units?

Question

Starting with an answer from here: How to change color of SVG pattern on usage? I am trying to use a pattern in a mask.

From the answer, this code:

<svg width="300" height="300" viewBox="0 0 300 300"
    xmlns="http://www.w3.org/2000/svg">
  <defs>  
    <pattern id="checked" width="2" height="2" stroke="white" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)"
        patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2"></line>
      <line x1="0" y1="0" x2="2" y2="0"></line>
    </pattern>
    <mask id="checked-mask" x="0" y="0" width="1" height="1" >
      <rect x="0" y="0" width="1000" height="1000" fill="url(#checked)" />
    </mask>
  </defs>  
  <circle cx="60" cy="60" r="50" stroke="red" mask="url(#checked-mask)" fill="green" />
  <circle cx="120" cy="60" r="50" stroke="blue" mask="url(#checked-mask)" fill="magenta" />
</svg>

Does what one might expect, drawing a green and magenta circle, masked.

However, the following code, which is adjusting the origin by 200 units and moving the circles appropriately, shows the mask stopping at 300 units (blue box). (Red box is to confirm that svg canvas extends past the 300s)

<svg width="300" height="300" viewBox="200 200 300 300"
  xmlns="http://www.w3.org/2000/svg">
  <defs>  
    <pattern id="checked" width="2" height="2" stroke="white"
      stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)"
      patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2" />
      <line x1="0" y1="0" x2="2" y2="0" />
    </pattern>
    <mask id="checked-mask" x="0" y="0" width="1" height="1" >
      <rect x="0" y="0" width="100%" height="100%" fill="url(#checked)" />
    </mask>
  </defs>  
  <circle cx="260" cy="260" r="50" stroke="red" mask="url(#checked-mask)" fill="green" />
  <circle cx="320" cy="260" r="50" stroke="blue" mask="url(#checked-mask)" fill="magenta" />
  <rect x='200' y='200' width='200' height='200' fill='transparent' stroke='red' />
  <rect x='200' y='200' width='100' height='100' fill='transparent' stroke='blue' />
</svg>

If I remove the mask then the circles fully draw so it definitely seems like the mask is stopping.

I'm pretty sure I'm not understanding how the coordinate systems are changing as things move from pattern to mask to canvas, but I'm stumped as to how I'm confused.

Answer 1

Updated answer: Actually it is just the mask that is not large enough. If you change the width and height to the total size of the canvas it works.

Some say that this is a bug (see comments for this question, btw. more or less the same issue). I don't know, but a pragmatic solution would be to use transform/translate instead of large values for cx and cy.

<svg width="300" height="300" viewBox="200 200 300 300"
  xmlns="http://www.w3.org/2000/svg">
  <defs>  
    <pattern id="checked" width="2" height="2" stroke="white"
      stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)"
      patternUnits="userSpaceOnUse">
      <line x1="0" y1="0" x2="0" y2="2" />
      <line x1="0" y1="0" x2="2" y2="0" />
    </pattern>
    <mask id="checked-mask">
      <rect width="500" height="500" fill="url(#checked)" />
    </mask>
  </defs>  
  <circle cx="260" cy="260" r="50" stroke="red" mask="url(#checked-mask)" fill="green" />
  <circle cx="320" cy="260" r="50" stroke="blue" mask="url(#checked-mask)" fill="magenta" />
  <rect x='200' y='200' width='200' height='200' fill='transparent' stroke='red' />
  <rect x='200' y='200' width='100' height='100' fill='transparent' stroke='blue' />
</svg>