为什么我的 css svg 动画在 Firefox 上卡顿而不在其他浏览器上卡顿？答案

【问题标题】：Why is my css svg animation stuttering on Firefox and not on other browsers?为什么我的 css svg 动画在 Firefox 上卡顿而不在其他浏览器上卡顿？
【发布时间】：2022-01-10 11:41:08
【问题描述】：

我的目标是做一个摆动的星摆。

它在 Chrome 和 Opera 浏览器中按预期工作，但在 Firefox 中卡顿。

我已经尝试添加 -moz 前缀以实现兼容性，但问题仍然存在。

感谢任何见解。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<style>
  #path1086 {
     position: relative;
     animation-name: star;
     animation-duration: 2s;
     animation-iteration-count: infinite;
     transform-origin: center center;
     -moz-transform-origin: center;
     transform-box: fill-box;
  }

   #target {
      transform-origin: center top;
      -moz-transform-origin: center top;
      -moz-transform-box: fill-box;
      transform-box: fill-box;
      position: absolute;
      animation-name: example;
      animation-duration: 4s;
      animation-iteration-count: infinite;
   }
   @keyframes example {
      0%, 100% {transform: rotate(45deg);}
      50% {transform: rotate(-45deg);}
      }
   @keyframes star {
      0%, 100% {transform: rotate(45deg);}
      50% {transform: rotate(-45deg);}
      }

</style>
</style>
<body>

<svg
   width="100%"
   height="100vh"
   viewBox="0 0 1366.0 768.0"
   version="1.1"
   id="SVGRoot"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs824" />
  <g
     id="layer1">
    <rect
       style="opacity:1;fill:#0000ff;fill-opacity:0.517647;stroke:#000000;stroke-width:4.73953"
       id="rect2147"
       width="100%"
       height="766.33557"
       x="-4.3173833"
       y="2.1586916" />
    <path
       style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:none;fill-opacity:0.517647;fill-rule:evenodd;stroke:#000000;stroke-width:4.73953;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
       id="path1040"
       d="m 1228.2955,753.38337 -42.523,-82.92194 -92.416,-11.98026 65.7231,-66.06609 -17.1642,-91.59499 83.1421,42.09085 81.808,-44.62855 -14.3385,92.07966 67.7244,64.01303 -92.0038,14.81751 z" />
    <g
       id="target"
       transform="translate(-47.491217,94.982435)"
       >
      <rect
         style="fill:#0000ff;fill-opacity:0.517647;stroke:#000000;stroke-width:4.73953"
         id="rect936"
         width="10.793459"
         height="317.32767"
         x="319.48636"
         y="64.76075"
          />
      <path
         style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:#00ff00;fill-opacity:0.517647;fill-rule:evenodd;stroke:#000000;stroke-width:4.73953;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000000;stop-opacity:1"
         id="path1086"
         d="m 272.8891,413.16778 20.88967,-33.55431 -15.79857,-36.23086 38.3673,9.4984 29.57557,-26.22129 2.82264,39.42465 34.07728,20.02521 -36.62283,14.86737 -8.51465,38.59755 -25.45678,-30.2361 z" />
    </g>
  </g>
</svg>
</body>
</html>

https://jsfiddle.net/zqh8jk5e/

【问题讨论】：

标签： css svg

【解决方案1】：

Firefox 似乎在嵌套填充框上下文方面存在问题。

作为一种解决方法，尝试将 pedulum 父元素与 x="50%" 和 y="0" 对齐。
这样，您的父元素就不需要特定的轴心点（否则必须通过 transform-box: fill-box; 进行调整）

function startPendulum() {
  let animEls = document.querySelector('[class*="animate-pendulum"]');
  animEls.classList.replace('--animate-pendulum', 'animate-pendulum');
}

function startPendulumStar() {
  let animEls = document.querySelector('[class*="animate-star"]');
  animEls.classList.replace('--animate-star', 'animate-star');
}

function addTransform() {
  let animEls = document.querySelector('[class*="pendulum-transform"]');
  animEls.classList.replace('--pendulum-transform', 'pendulum-transform');
}

.pendulum-wrp {
  background-color: rgba(0, 0, 255, 0.517);
  display: inline-block;
  width: 50%;
}

.transformBox-fill-box {
  transform-box: fill-box;
}

.pendulum-star {
  fill: #00ff00;
  transform-origin: center center;
  fill: #00ff00;
  fill-opacity: 0.517647;
  stroke: #000000;
  stroke-width: 4;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.pendulum-rod {
  fill: rgba(0, 0, 255, 0.5);
  stroke: #000000;
  stroke-width: 4
}

.pendulum-group {
  transform-origin: center top;
}

.pendulum-transform {
  transform: translate(-20%, 5%);
}

.animate-star .pendulum-star {
  animation-name: pendulum-anim;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

.animate-pendulum .pendulum-group {
  animation-name: pendulum-anim;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

@keyframes pendulum-anim {
  0%,
  100% {
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(-45deg);
  }
}

<div class="pendulum-wrp --animate-pendulum  --animate-star">
  <svg viewBox="0 0 1366 768" id="SVGRoot" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
  <g id="pendulum-transform" class="--pendulum-transform">
    <g id="pendulum-group" class="pendulum-group --transformBox-fill-box">
      <rect id="pendulum-rod" class="pendulum-rod" x="673" y="0" width="10" height="354" />
      <g id="pendulum-star" class="pendulum-star transformBox-fill-box">
        <path class="pendulum-star-shape" d="M677.667 383.157l-34.609 18.195l6.609-38.539l-28-27.293l38.694-5.623l17.306-35.064l17.306 35.064l38.693 5.623l-28 27.293l6.609 38.539l-34.608-18.195z" />
      </g>
    </g>
  </g>
</svg>
</div>
<p>
  <button  onclick="startPendulum()">Start pendulum animation</button>
  <button  onclick="startPendulumStar()">Start star animation</button>
  <button  onclick="addTransform()">shift by transform</button>
</p>

【讨论】：