html - 为什么这个 SVG 蒙版动画在 Firefox 中不连贯，但在 Chrome 中流畅？

Question

我已经将我正在处理的 SVG 动画(它应该看起来像一个装满的容器)简化为下面的示例，该示例在 Chrome 中运行流畅，但在 Firefox 中断断续续/口吃。这是一个包含三层的 SVG:第一层是 <mask>最后一层是红色圆圈。 SVG 的中间层是一个灰色圆圈。因此，红色圆圈位于灰色圆圈的顶部，并通过通过 CSS 设置动画的蒙版可见:

#color-mask {
  fill: white;
}

#color-mask path {
  animation: waves .75s infinite linear;
}

@keyframes waves {
  from {
    transform: translateX(17rem);
  }
  to {
    transform: translateX(-17rem);
  }
}

#color-mask g {
  animation: raise 6s infinite ease-in-out;
  animation-direction: alternate;
}

@keyframes raise {
  from {
    transform: translateY(11rem);
  }
  to {
    transform: translateY(-18rem);
  }
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 400">
    <mask id="color-mask">
        <g>
            <path d="m 909.1,353.4 0,-67.6 c -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71.1,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 l 0,632.2 1419,0 z"/>
        </g>
    </mask>
    <g id="grey">
        <circle  id="top_grey" style="fill: rgb(180, 180, 180);" cx="200" cy="200" r="200"></circle>
    </g>
    <g id="color" mask="url(#color-mask)">
        <circle id="top_color" style="fill: rgb(196, 3, 3);" cx="200" cy="200" r="200"></circle>
    </g>
</svg>

CSS 动画翻译 <mask>水平和垂直，但速率不同。
我也试过使用 <clipPath>而不是 <mask>并得到相同的结果。我在 Windows 和 Linux 上的 Firefox 中得到相同的断断续续/口吃结果。
我在 Firefox 中注意到的一个非常奇怪的怪癖是，如果我打开了开发工具，动画偶尔会流畅运行。 Firefox 的开发工具似乎也没有表明任何问题，但我不是 SVG 动画方面的专家。为什么 Firefox 会卡住，而 Chrome 不会？

Answer 1

使用 CSS 掩码的不同想法，您不会遇到问题。我使用您提供的路径作为掩码。只需确保为 viewBox 设置正确的值

.box {
  display:inline-flex;
  width:300px;
  background: rgb(180, 180, 180);
  border-radius:50%;
  position:relative;
  overflow:hidden;
}
.box:after {
  content:"";
  padding-top:100%;
}
.box:before {
  content:"";
  position:absolute;
  left:0%;
  width:200%;
  height:30%;
  bottom:-10%;
  background:rgb(196, 3, 3);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="-500 0 1100 900"><path d="m 909.1,353.4 0,-67.6 c -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71.1,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 l 0,632.2 1419,0 z"/></svg>') top/100% auto;
          mask:url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="-500 0 1200 900"><path d="m 909.1,353.4 0,-67.6 c -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71.1,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 l 0,632.2 1419,0 z"/></svg>') top/100% auto; 
   animation:raise 6s infinite ease-in-out alternate,waves .75s infinite linear;
}
@keyframes waves {
  to {
    transform: translateX(-50%);
  }
}
@keyframes raise {
  to {
    height:160%;
  }
}

<div class="box">
</div>
<div class="box" style="width:200px;">
</div>

要仅使用转换，您可以添加一个额外的元素:

.box {
  width:300px;
  display:inline-block;
  background: rgb(180, 180, 180);
  border-radius:50%;
  overflow:hidden;
}
.box div {
  padding-top:100%;
  position:relative;    
  animation: raise 6s infinite ease-in-out alternate;
}
.box div:before {
  content:"";
  position:absolute;
  left:0%;
  width:200%;
  height:160%;
  bottom:-10%;
  background:rgb(196, 3, 3);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="-500 0 1100 900"><path d="m 909.1,353.4 0,-67.6 c -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71.1,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 l 0,632.2 1419,0 z"/></svg>') top/100% auto;
          mask:url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="-500 0 1200 900"><path d="m 909.1,353.4 0,-67.6 c -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 -71.1,0 -107.2,14.8 -142.1,29 -34.8,14.2 -70.9,29 -141.7,29 -70.8,0 -106.9,-14.7 -141.7,-29 -34.9,-14.3 -71,-29 -142.1,-29 l 0,632.2 1419,0 z"/></svg>') top/100% auto; 
   animation:waves .75s infinite linear;
}
@keyframes waves {
  to {
    transform: translateX(-50%);
  }
}
@keyframes raise {
  from {
    transform:translateY(120%);
  }
}

<div class="box">
<div></div>
</div>
<div class="box" style="width:200px;">
<div></div>
</div>