Question

所以我在我的网站上添加了一个SVG。我也通过改变你在下面的代码中看到的名为“background-svg”的类来调整这个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较大，则为超级Laggy SVG动画，但如果SVG较小，则为平滑动画。

Answer 1

这与使用纯CSS制作动画时的GPU使用情况有关。虽然像变换这样的大多数属性都是“GPU注入”和“＃39;这不是保证。如果你用JavaScript做到这一点;您可能会看到显着的性能增强。

我没有得到太多的延迟＆＃39;在运行这些动画的时候。

本文特定于JS动画库，但也清楚地解释了这个概念。

How CSS animations are rendered

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

例如，如果你的矢量SVG在占据75％面积的500x500px画布上绘制一个形状，那么如果你有一个2000x2000px的画布，你将会在那里绘制更少的像素形状占据了75％的面积。

由于这是一次又一次计算，然后在您使用SVG时重新绘制，因此在扩展时可能会有显着的性能差异。

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

Answer 2

我注意到两个主要问题：

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

以下代码段包含我修改过的内容的一部分，您可以在此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解决方案的比较。

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

2 个答案: