SVG动画调整后非常滞后(专家)？
因此，我正在添加一个SVG到我的网站。我还通过更改一个名为"background-svg"的类来调整这个svg以适应我的大部分屏幕，您将在下面的代码中看到这个类。
基本上，如果你让SVG变大，它就会变成超级滞后(就像它的动画是超级滞后)，甚至页面上的其他动画也会变成超级滞后。试用JSFIDDLE
如果您使SVG小，动画是平滑的。在上面的JSFIDDLE链接上，尝试使您的窗口变小(您将看到动画更好)，然后使您的窗口更大(再次显示滞后动画)。
问题只发生在Chrome上，Safari...No滞后于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是小的，则是平滑的动画。
回答 2
Stack Overflow用户
发布于 2016-08-27 20:52:55
这与使用纯CSS动画时GPU的使用有关。虽然像transform这样的大多数属性都是“GPU注入的”，但这并不是一个保证。如果您要使用JavaScript进行此操作，您可能会看到显着的性能增强。
在运行这些动画时，我没有得到太多的“滞后”。
本文是针对一个JS动画库的，但也清楚地解释了这个概念。
就性能随窗口缩放而变化而言，它与每个动画周期中被更改/呈现的像素数有关。
例如，如果您是向量SVG，在占该区域75%的500x500px画布上绘制一个形状，那么如果您有一个2000 x2000px画布，其形状占该区域的75%，那么您将绘制大量较少的像素。
由于这是一次又一次的计算，然后在使用SVG时重新绘制，因此在扩展时可能存在显著的性能差异。
由于浏览器构建和呈现方式不同，在这种情况下，FireFox只需处理这些形状的重绘操作就比其他浏览器更好。
Stack Overflow用户
发布于 2016-08-27 23:13:01
我注意到了两个主要问题：
- css属性的顺序: transform和transform属性在特定于供应商的属性之后，所以我把它们放在前面。
- 2D转换的使用，它不利用硬件加速，所以我用等效的3D转换来更改它们。
下面的片段包含了我修改过的部分内容，您可以在这个小提琴中尝试并给我一个反馈
#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解释器。如果您想看一下这里，了解有关硬件加速的更多细节，并与javascript解决方案进行比较。
https://stackoverflow.com/questions/39185512
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号