动画 svg 蒙版在 Firefox 中不起作用

Question

h1 大家，我正在尝试为 svg 元素制作基于 svg 掩码的跨浏览器动画。起初，我发现了一个 css 的错误，在 Firefox 中，掩码不适用于 css 的“宽度”和“高度”，只能用于内联属性。所以，下一个问题 - 如何为 firefox 制作蒙版动画，没有比“调整宽度”更难的了。 https://codepen.io/flyby/pen/KmYOgb

<div id='cont'>
  <svg>
    <defs>
      <mask id='rectMask' maskUnits='userSpaceOnUse' maskContentUnits='userSpaceOnUse' transform='scale(1)'>
        <rect x='0' y='0' id='maskRect' width='700' height='850'/>
      </mask>
    </defs>
    <path id='maskedPath' d='m 0,0 l 650,0 -100,850 -550,0 z' mask='url(#rectMask)'/>
    <path id='riverPath' d='m 653,0 l -100,850' mask='url(#rectMask)'/>
    <path id='notMaskedPath' d='m 655,0 l 650,0 0,850 -750,0 z'/>
  </svg>
</div>

CSS：

body {
  margin:0;
  padding:0;
  overflow:hidden;
}
#cont {
  width:100vw;
  height:100vh;
  background-color:rgb(50,50,50);
}
svg {
  width:100%;
  height:100%;
}
#maskedPath {
  stroke:none;
  fill:rgb(230,230,230);
}
#notMaskedPath {
  stroke:none;
  fill:rgb(230,230,230);
}
#riverPath {
  stroke:rgb(50,160,240);
  stroke-width:8;
  fill:none;
}
#maskRect {
  width:0px;
  height:850px;
  fill:white;
  stroke:none;
  animation: resize 3s linear infinite;
}
@-moz-keyframes resize {
  50% {width: 700px !important;}
  0%,100% {width: 0px !important;}
}

Answer 1

正如您所发现的，您不能（还）设置几何属性，例如 Firefox 中 SVG 元素的 width 和 height。这不是一个错误。这只是一个 SVG 2 的东西，Firefox 还没有实现，但 Chrome 已经实现了。

解决方案是使用内置的 SVG（“SMIL”）动画元素，而不是 CSS 动画。

body {
  margin:0;
  padding:0;
  overflow:hidden;
}
#cont {
  width:100vw;
  height:100vh;
  background-color:rgb(50,50,50);
}
svg {
  width:100%;
  height:100%;
}
#maskedPath {
  stroke:none;
  fill:rgb(230,230,230);
}
#notMaskedPath {
  stroke:none;
  fill:rgb(230,230,230);
}
#riverPath {
  stroke:rgb(50,160,240);
  stroke-width:8;
  fill:none;
}
#maskRect {
  fill:white;
  stroke:none;
}

<!--this animation doesn't work in FIREFOX, and not tested in IE11 ad Edge YET, WILL BE FIXED SOON (I HOPE)-->
<div id='cont'>
  <svg>
    <defs>
      <mask id='rectMask' maskUnits='userSpaceOnUse' maskContentUnits='userSpaceOnUse' transform='scale(1)'>
        <rect x='0' y='0' width="0" height="850" id='maskRect'>
          <animate attributeName="width"
                   keyTimes="0; 0.4; 0.5; 1"
                   values="0; 670; 670; 0"
                   dur="4s" repeatCount="indefinite"/>
        </rect>
      </mask>
    </defs>
    <path id='maskedPath' d='m 0,0 l 650,0 -100,850 -550,0 z' mask='url(#rectMask)'/>
    <path id='riverPath' d='m 653,0 l -100,850' mask='url(#rectMask)'/>
    <path id='notMaskedPath' d='m 655,0 l 650,0 0,850 -750,0 z'/>
  </svg>
</div>