调整大小后 SVG 动画非常滞后（专家）？答案

【问题标题】：SVG Animations Very Laggy after Resizing (Expert)?调整大小后 SVG 动画非常滞后（专家）？
【发布时间】：2017-01-04 06:15:19
【问题描述】：

所以我正在向我的网站添加一个 SVG。我还在调整这个 svg 的大小以适应我的大部分屏幕，方法是更改一个名为 "background-svg" 的类，您将在下面的代码中看到该类。

基本上，如果你将 SVG 放大，它会变得超级迟钝（就像它的动画超级迟钝一样），甚至页面上的其他动画也会变得超级迟钝。 Try On JSFIDDLE

如果您将 SVG 缩小，则动画会很平滑。在上面的 JSFIDDLE 链接上，尝试使窗口变小（您会看到动画更好），然后将窗口变大（再次出现滞后动画）。

问题仅在 Chrome 和 Safari 上出现...在 FireFox 上没有延迟

我的 SVG：

<svg class="background-svg"  viewBox="0 0 400 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
     <filter x="" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1">
        <feOffset dx="0" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
        <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
        <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.095 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></feColorMatrix>
        <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
        <feGaussianBlur stdDeviation="1.5" in="shadowOffsetInner1" result="shadowBlurInner1"></feGaussianBlur>
        <feComposite in="shadowBlurInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
        <feColorMatrix values="0 0 0 0 0.647959184   0 0 0 0 0.549016553   0 0 0 0 0.549016553  0 0 0 0.35 0" in="shadowInnerInner1" type="matrix" result="shadowMatrixInner1"></feColorMatrix>
        <feMerge>
           <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
           <feMergeNode in="SourceGraphic"></feMergeNode>
           <feMergeNode in="shadowMatrixInner1"></feMergeNode>
        </feMerge>
     </filter>
  </defs>
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">

     <g id="Artboard-1" fill="#8B65E4">
        <path d="M187.785156,200 L180,232 L66,232 L58.2148437,200 L187.785156,200 Z" id="Rectangle-1" filter="url(#filter-1)"></path>
        <path d="M349.760339,49.1234675 L375.905579,277.733833 L199.999999,277.733834 L43.9648432,143.710938 L349.760339,49.1234675 Z" id="Triangle-1" filter="url(#filter-1)"></path>
        <path d="M399.8936,96.1889997 L29.4623426,250.140552 L0,36.4302476 L399.8936,96.1889997 Z" id="Triangle-2" filter="url(#filter-1)"></path>

     </g>
    <foreignObject x="8%" y="20%" width="80%" height="100%"
           >
           <body xmlns="http://www.w3.org/1999/xhtml">
              <div xmlns="http://www.w3.org/1999/xhtml">
                 <h1>
                    Hey! <br />I'm <span>someperson</span> <span class="info">I like</span>
                 </h1>
              </div>
           </body>
        </foreignObject>
  </g>
</svg>

我的 CSS：

@import url(https://fonts.googleapis.com/css?family=Oswald|Roboto);
body {
  height: 100vh;
  overflow: hidden;
  text-align: center;
  font-family: "Roboto", sans-serif;
}

.background-svg{
  position: absolute;
  top: 0;
  left: 20%;
  width: 80%;
  height: 80%;
}


h1 {
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 2px;
  color: #fff;
  text-align: left;
}
h1 .info {
  display: block;
  color: #CFBDF9;
  font-size: 16px;
  letter-spacing: 0px;
}

.box {
  text-align: right;
  padding: 0px 40px;
}


.box-item {
  display: inline-block;
  color: #fff;
  font-size: 30px;
  padding-right: 20px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#Triangle-1 {
  -webkit-animation: box 2.5s infinite; /* Main Anim is super laggy on chrome and safary*/
  -moz-animation: box 2.5s infinite; /* Main Anim seems good on Firefox*/
}

#Triangle-2 { 
  -webkit-animation: box2 1s infinite; /* same as above */
  -moz-animation: box2 1s infinite; /* same as above */
}

@keyframes box2 {
  10% {
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -webkit-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  90% {
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
}
@keyframes box {
  10% {
    -moz-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  90% {
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -webkit-transform: rotate(2deg);
    transform: rotate(2deg);
  }
}

TL;DR：如果 SVG 很大，则超级滞后 SVG 动画，但如果 SVG 很小，则动画平滑。

【问题讨论】：

在 Chrome、Firefox 和 Safari 中测试。即使在 2000x2000 像素下也能流畅地制作动画。
这真的很奇怪。你有什么笔记本电脑？我在最新的 MacBook Pro 上运行 OSX，它看起来像这样（注意这是下面这个人的答案，但我的滞后完全相同）。 Streamable Link
^你可以在上面的小屏幕上看到，它根本没有滞后。在稍大一些的窗口中，它会滞后一些，而在 SVG 更大的一个非常大的窗口中，它确实滞后很严重。

标签： javascript html css svg cross-browser

【解决方案1】：

这与使用纯 CSS 制作动画时的 GPU 使用有关。尽管像变换这样的大多数属性都是“GPU 注入”的，但这并不能保证。如果您要使用 JavaScript 来执行此操作；您可能会看到显着的性能增强。

在运行这些动画时，我根本没有得到太多的“滞后”。

本文专门针对一个 JS 动画库，但也清楚地解释了这个概念。

How CSS animations are rendered

就性能随窗口缩放而变化而言，它与每个动画周期中更改/渲染的像素数有关。

例如，如果您使用矢量 SVG 在 500x500 像素的画布上绘制一个占 75% 区域的形状，那么如果您有一个 2000x2000 像素的画布，其形状为占面积的75%。

由于这是一遍又一遍地计算，然后在您使用 SVG 时重新绘制，因此在按比例放大时可能会出现显着的性能差异。

由于浏览器的构建和呈现方式不同，在这种情况下，FireFox 能够比其他浏览器更好地处理这些形状的重绘。

【讨论】：

【解决方案2】：

我注意到两个主要问题：

css 属性的顺序：transform 和 transition 属性在供应商特定的属性之后，所以我把它放在它们之前
使用 2D 变换，它不利用硬件加速，所以我用等效的 3D 变换它们

下面的sn-p包含了我修改的部分内容，你可以在这个fiddle试试，给我反馈

#Triangle-2 {
    animation: box2 1s infinite;
    -o-animation: box2 1s infinite;
    -moz-animation: box2 1s infinite;
    -webkit-animation: box2 1s infinite;
}

@keyframes box2 {
    10% {
        transform: rotate(1deg);
        -o-animation: rotateZ(1deg);
        -moz-animation: rotateZ(1deg);
        -webkit-transform: rotateZ(1deg);
    }
    90% {
        transform: rotate(-2deg);
        -o-animation: rotateZ(-2deg);
        -moz-animation: rotateZ(-2deg);
        -webkit-transform: rotateZ(-2deg);
    }
}

我过去使用过 html 元素翻译，在我的例子中，3D css 解决方案优于 2D 和 javascript 解决方案，主要是因为硬件加速而不通过 javascript 解释器。如果您想查看here 以了解有关硬件加速的更多详细信息以及与 javascript 解决方案的比较。

【讨论】：

感谢您的回答。问题仍然存在。这是您的 JSFiddle 的 streamable link。它在您的笔记本电脑上是否也同样滞后？