程序员经验分享-hwhale

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

2024-01-20

我将我正在处理的 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 mask 的不同想法不会出现问题。我使用您提供的路径作为掩码。只需确保为 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

firefox

SVG

cssanimations

为什么这个 SVG 蒙版动画在 Firefox 中不连贯，但在 Chrome 中却很流畅？ 的相关文章

  • 如何在 PHP 的 HTML 页面中显示错误消息？

    我有以下登录表单 login php 其中要求输入用户名和密码

  • 引导导航栏菜单与文本重叠

    我使用最新版本的引导程序 当我调整屏幕浏览器的大小时 使用小切换按钮下拉导航栏时 导航栏会重叠页面上的文本 而不是向下推页面内容 我已经多次研究过这个问题 我尝试将 padding bottom 放在导航栏上 将 padding top 放

  • 为什么我的列表项项目符号与浮动元素重叠

    我有一个 XHTML Strict 页面 我在其中将图像浮动在常规文本段落旁边 一切都很顺利 除非使用列表而不是段落 列表的项目符号与浮动图像重叠 更改列表或列表项的边距没有帮助 边距是从页面左侧开始计算的 但浮动会将列表项推到右侧insi

  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些

  • 如何消除 HTML 内容周围的边距？

    以下 HTML 显示正常 div style width 100px height 100px background red div Hello div div

  • html 选择列表 - 通过传入变量获取文本值？

    我有一个显示列表语言的选择列表

  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu

  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕

  • 我如何能够以两行显示标题，并且每行的字体大小不同？

    我正在使用 Google Chart API 创建时间线图 并希望将图的标题修改为两行 问题 我如何能够显示具有不同字体大小的两线图表标题 电流输出 理想输出 相关研究 我唯一能找到的是有人试图用饼图来做到这一点 但我尝试了但无法使其发挥作

  • 使用 css 简单地将对象居中，无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以

  • 有角度的动态背景图片

    在 html 模板中 我有这种带有动态图像的样式 div style background none width 200px height 150px div 它适用于网络浏览器和 Android 浏览器 但是 使用 style 的动态背景

  • 图像无法在带有 DOM 的 IE 中加载：控制台中的 7009 错误（无法解码）

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像

  • 最大宽度调整以适应文本？

    不是最好的标题 但无论如何 我有一个元素max width和一些文字 如果文本长度超过一行所能容纳的长度 我会得到以下结果 My text here hello everyone 换句话说 它占据了完整的最大宽度 但由于单词向下移动 右侧有

  • 为 Angular2 中的组件加载多个样式表

    我正在构建一个 angular2 应用程序 当我尝试为同一组件加载多个样式表时 我面临多个问题 这是我正在做的代码 import Component from angular core Component selector my tag t

  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o

  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu

  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde

  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区

  • 如何创建适合屏幕宽度的等宽/高框？ [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理

  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad

随机推荐

热门标签