[SOLVED] SVG Mask element is hiding portions of the screen that it should not when placed in negative coordinates

SVG Mask element is hiding portions of the screen that it should not when placed in negative coordinates

Two snippets are included. Functionally, they should be the same. They are both designed to be a mask that has the exact same points as the polyline using the mask, and the mask is white, so functionally, the masks should NOT hide anything.

This first snippet has the mask in the negative Y space (from -252 to 252).

<svg viewBox="-410 -377 820 709">
  <circle cx="122" cy="-252" r="5" fill="red"/>
  <polyline points="122,252 122,-252" style="stroke: rgb(79, 64, 255);" mask="url(#mask)"/>
  <mask maskUnits="userSpaceOnUse" id="mask">
    <polyline points="122,252 122,-252" fill="white" stroke-width="2" stroke="white" />
  </mask>
</svg>

This second snippet is the exact same, but has been shifted up 300px so that everything is in the positive Y space.

<svg viewBox="-410 -77 820 709">
    <circle cx="122" cy="52" r="5" fill="red"/>
  <polyline points="122,552 122,52" style="stroke: rgb(79, 64, 255);" mask="url(#mask)"/>
  <mask maskUnits="userSpaceOnUse" id="mask">
    <polyline points="122,552 122,52" fill="white" stroke-width="2" stroke="white" />
  </mask>
</svg>

The ONLY difference is that the first SVG has the mask in the negative Y space. However, for some reason, even though the mask points are IDENTICAL to the polyline points, and the mask is white, and should therefore show everything, the first SVG cuts out part of the line. The exact same svg shifted up by 300px works properly and does not cut out part of the line.

You can see evidence that this is not a problem with the viewbox cutting it out b.c of the circle that shows where the line should terminate.

Solution

The solution seems to copy the <svg viewBox dimensions into the <mask> element, as it doesn't appear to inherit them automatically.

<mask maskUnits="userSpaceOnUse" id="mask" x="-410" y="-377" width="820" height="709">

The reason we had to specify maskUnits="userSpaceOnUse" was due to a Chrome bug that required us to specify it directly, even though it should have a default value.