0
Итак, я добавляю SVG на свой сайт. Я также изменяю размер этого svg, чтобы соответствовать большинству моего экрана, изменив класс «background-svg», который вы увидите в моем коде ниже.SVG-анимация Очень лаги после изменения размера (эксперта)?
В принципе, если вы сделаете SVG больше, он станет супер лагги (как его анимация супер лагги), и даже другие анимации на странице становятся супер лагги. Try On JSFIDDLE
Если вы сделаете SVG маленьким, анимации будут Smooth. В приведенной выше ссылке JSFIDDLE попробуйте сделать ваше окно меньше (вы увидите, что анимация будет лучше), а затем сделайте ваше окно больше (laggy animations снова).
проблема возникает только на Chrome и Safari ... Нет Лаги на FireFox
My 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: Super Laggy SVG Animations, если SVG - большая, но гладкая анимация, если SVG мала.
Протестировано в Chrome, Firefox и Safari. Он анимирует плавно даже при 2000x2000 пикселей. –
Это действительно странно. Какой у вас ноутбук? Я запускаю OSX на последнем MacBook Pro, и это похоже на это (обратите внимание, что это ответ парня ниже, но мой лаг точно такой же). [Streaming Link] (https://streamable.com/0lc6) –
^Вы можете видеть выше, что на маленьком экране он вообще не отстает. В несколько большем окне он немного отстает и в действительно большом окне, где SVG намного больше, он сильно отстает. –