SVG Mask 元素隐藏了屏幕上不应该放置在负坐标中的部分

Question

包含两个片段。从功能上来说，它们应该是相同的。它们都被设计为与使用蒙版的折线具有完全相同的点的蒙版，并且蒙版是白色的，因此从功能上讲，蒙版不应隐藏任何内容。

第一个片段的掩码位于负 Y 空间（从 -252 到 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>

第二个片段完全相同，但已向上移动 300 像素，以便所有内容都位于正 Y 空间中。

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

唯一的区别是第一个 SVG 在负 Y 空间中具有遮罩。然而，由于某种原因，即使遮罩点与折线点相同，并且遮罩是白色的，因此应该显示所有内容，第一个 SVG 也会剪掉部分线。完全相同的 svg 向上移动 300px 可以正常工作，并且不会剪掉部分线条。

您可以看到证据表明，这不是视图框将其从显示线应终止位置的圆圈中切掉的问题。

Answer 1

该解决方案似乎将

<svg viewBox

尺寸复制到

<mask>

元素中，因为它似乎不会自动继承它们。

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

我们必须指定

maskUnits="userSpaceOnUse"

的原因是 Chrome 的一个 bug，要求我们直接指定它，即使它应该有一个默认值。