让SVG蒙版正确动画

Question

我想要做的是从svg底部向上滑动一个矩形，使svg看起来像是填满了。出于某种原因，我不能让我的面具工作。有人能看出我出错的地方并帮助我解决错误吗？

以下是代码和代码集供参考。

HTML

<svg  viewBox="0 0 600 600" >
    <defs>
      <mask id="mask">
        <path fill="#000" xmlns="http://www.w3.org/2000/svg" d="M110.1,318v-
    71.6c0,0,18.6,3.3,68.8-2.1c52-5.6,40.3-81.5,40.3-81.5h-
    109V88.3h158.6V8.7H6.8v390h262v-125  C230.8,329.9,110.1,318,110.1,318z"/>
        <g id="rect">
            <rect fill="#fff" x="0" y="0" width="500" height="500"></rect>
        </g>
      </mask>
    </defs>

      <g id="masked" mask="url(#mask)">
        <path fill="green" xmlns="http://www.w3.org/2000/svg" d="M110.1,318v-
    71.6c0,0,18.6,3.3,68.8-2.1c52-5.6,40.3-81.5,40.3-81.5h-
    109V88.3h158.6V8.7H6.8v390h262v-125  C230.8,329.9,110.1,318,110.1,318z"/>
        <rect x="0" y="0" width="500" height="500"></rect>
      </g>
    </svg>

CSS

body {
  background-color: #FFF;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  width: 100%;
  height:100%;
  visibility: visible;
}

svg rect {
  transform:translateY(100%);
  transition:all 1s ease;
}

.ready svg rect {
  transform:translateY(0);
}

Codepen

https://codepen.io/Jesders88/pen/yzOVBZ

Answer 1

我想你想要https://codepen.io/CrUsH20/pen/bopBmZ（分叉）

我改变了盒子的颜色，向上移动，变成白色，然后变成黑色，然后我改变了动作，因为你做了类似擦除的东西。它从底部移动到顶部，它显示我们有信，然后它隐藏。因此，我将初始translateY = 0和结束最终设置为-100％，以便移动到顶部并打开信件。

<svg  viewBox="0 0 600 600" >
    <defs>
      <mask id="mask">
        <path fill="#fff" xmlns="http://www.w3.org/2000/svg" d="M110.1,318v-71.6c0,0,18.6,3.3,68.8-2.1c52-5.6,40.3-81.5,40.3-81.5h-109V88.3h158.6V8.7H6.8v390h262v-125  C230.8,329.9,110.1,318,110.1,318z"/>
        <g id="rect">
            <rect fill="#000" x="0" y="0" width="500" height="500"></rect>
        </g>
      </mask>
    </defs>

      <g id="masked" mask="url(#mask)">
        <path fill="green" xmlns="http://www.w3.org/2000/svg" d="M110.1,318v-71.6c0,0,18.6,3.3,68.8-2.1c52-5.6,40.3-81.5,40.3-81.5h-109V88.3h158.6V8.7H6.8v390h262v-125  C230.8,329.9,110.1,318,110.1,318z"/>
        <rect x="0" y="0" width="500" height="500"></rect>
      </g>
  </svg>

CSS

body {
  background-color: #FFF;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  width: 100%;
  height:100%;
  visibility: visible;
}

svg rect {
  transform:translateY(0);
  transition:all 1s ease;
}

.ready svg rect {
  transform:translateY(-100%);
}

JS

$(document).ready(function(){
  $('html').addClass('ready')
})