gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 02:34:17 26 4
gpt4 key购买 nike

我已经将我正在处理的 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 不会?

最佳答案

使用 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>

关于html - 为什么这个 SVG 蒙版动画在 Firefox 中不连贯,但在 Chrome 中流畅?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62578638/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com