svg黑色蒙版显示问题。

svg蒙版中 黑色白色分别代表不可见和可见，以下代码效果为 使目标矩形元素 由外向内以圆形效果缩小至消失，如果把蒙版颜色改为黑色，讲道理应该会使目标矩形元素 由外向内以圆形效果逐渐显示，但实际上没有任何效果，而且目标矩形也一直不显示。（蒙版尺寸是目标矩形的外接圆。）

css:
    #cir{
        animation:scale 1s linear 1;
    }
    @keyframes scale {
        0%{
            transform-origin: 260px 280px;
            transform: scale(1,1);
        }
        100%{
            transform-origin: 260px 280px;
            transform: scale(0,0);
        }
    }
body:
<svg width = "1820"  height = "720">
    <g id = "shape">
        <defs>
            <mask id = "mask">
                <circle id = "cir" cx = "260" cy = "280" r = "100" fill = "#fff"/>
            </mask>
        </defs>
        <rect id = "m_rect" x = "200" y = "200" width = "120" height = "160" fill = "yellow" stroke = "black" stroke-width = "1" style="mask: url(#mask);" />
    </g>
</svg>

有效果图吗

svg蒙版默认背景是黑色，如果mask标签里不写任何东西，蒙版就是全黑的，不会有任何显示。

你把circle改成黑色，那蒙板还是一直全黑的，矩形显示不出来。
可以加一个白色的背景把矩形衬出来，在它上面做动画。

<svg width = "1820"  height = "400">
      <g id = "shape">
          <defs>
              <mask id = "mask">
                  <!--第一个cicle是背景，也可以换成别的形状，只要是白色并且能盖住矩形就行-->
                  <circle id = "background" cx = "260" cy = "280" r = "100" fill="white"/>
                  <circle id="cir" cx="260" cy="280" r="100" fill="black"
              </mask>
          </defs>
          <rect id = "m_rect" x = "200" y = "200" width = "120" height = "160" fill = "yellow" stroke = "black" stroke-width = "1" style="mask: url(#mask);" />
          <rect x="0" y="0" width="100" height="100" style="mask: url(#mask);"/>
      </g>
  </svg>

css还用原来的就行
这里有写的codepen的实例https://codepen.io/vector341/pen/XWRZMeE