为何CSS中的border-radius会影响SVG mask效果？

我有一个尺寸为200px的div，以及一个尺寸为200px的SVG矩形mask。背景中的div用于观察目标div被遮罩的范围。当将该矩形作为mask应用时，其表现会随border-radius发生变化：

案例1 - border-radius导致mask收缩 #

div {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: magenta;
}

#ref {
  background: green;
  mask: url('#mask');
  border-radius: 60px;
}

<svg width=0 height=0>
  <defs>
    <mask id="mask">
      <rect id="oneRect" fill="#fff" x=0 y=0 width=200 height=200 />
    </mask>
  </defs>
</svg>
  
<div></div>
<div id=ref></div>

案例2 - 无border-radius时，mask显示完整正方形 #

div {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: magenta;
}

#ref {
  background: green;
  mask: url('#mask')
}

<svg width=0 height=0>
  <defs>
    <mask id="mask">
      <rect id="oneRect" fill="#fff" x=0 y=0 width=200 height=200 />
    </mask>
  </defs>
</svg>
  
<div></div>
<div id=ref></div>

内容的提问来源于stack exchange，提问作者ashish singh