У меня есть простой SVG с анимацией. Приведенный ниже код: проблема через 4-5 м или в случайное время она перестает анимироваться или делает полную веб-страницу белой.
Я говорю, что SVG является причиной этой проблемы, потому что все было хорошо, но когда я помещаю анимацию в этот SVG, это начинает создавать проблему. Есть ли проблема или ошибка с этой анимацией?
ellipse:not(.dont-edit) {
fill: none;
-webkit-animation-name: brandAnimation;
animation-name: brandAnimation;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
stroke-dasharray: 1800;
stroke-width: 3px;
stroke: #61adf3
}
@keyframes brandAnimation {
from {
opacity: 0;
stroke-dasharray: 700
}
to {
opacity: 0;
stroke-dasharray: 700
}
50% {
opacity: 1;
stroke-dasharray: 0
}
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="461px" height="356px" viewBox="0 0 461 356" enable-background="new 0 0 461 356" xml:space="preserve"> <g> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="319.378" cy="183.306" rx="131.864" ry="120.988"/> <text transform="matrix(1.0899 0 0 1 238.8838 264.1611)" fill="orange" stroke="#000000" stroke-miterlimit="10" font-family="'TimesNewRomanPSMT'" font-size="236.4204">T</text> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="143.672" cy="71.571" rx="43.842" ry="40.226"/> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="194.245" cy="207.019" rx="18.461" ry="16.938"/> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="270.726" cy="55.542" rx="36.922" ry="33.877"/> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="100.358" cy="211.859" rx="23.735" ry="21.778"/> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="52.887" cy="104.422" rx="20.571" ry="18.874"/> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="58.161" cy="247.188" rx="5.275" ry="4.84"/> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="103.522" cy="155.721" rx="3.692" ry="3.388"/> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="193.253" cy="15.316" rx="5.739" ry="5.265"/> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="40.755" cy="39.088" rx="8.439" ry="7.743"/> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="28.096" cy="183.306" rx="14.769" ry="13.551"/> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="167.872" cy="162.98" rx="7.912" ry="7.259"/> <ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="207.41" cy="246.723" rx="31.647" ry="29.037"/> <ellipse id="hides" fill="#FFFFFF" cx="199.393" cy="76.043" rx="48.526" ry="44.524" class="dont-edit"/> <ellipse id="hide" fill="#FFFFFF" cx="216.398" cy="301.426" rx="40.614" ry="37.264" class="dont-edit"/> </g> </svg>