为什么边框半径会影响CSS中的svg mask？

Question

我有一个 200px 大小的 div 和一个 200px 大小的 svg 矩形蒙版

• 背景中的div只是为了查看有多少div被屏蔽了

当我应用该矩形作为遮罩时，它的行为会随着边框半径的变化而变化

情况 1 - 边框半径导致遮罩缩小

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 无边框半径，掩模显示完整的正方形

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>

Answer 1

我想你想做这样的事情。您应该在 div 中添加 border-radius。

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

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