Не работает анимация svg, когда сайт выкладывается на сервер
Проблема следующая
У меня есть условная html страница на которой есть куча svg, анимация которых относительно скролла, часть анимации прописана в отдельном css файле, а другая часть которая касается отдельных (частей) прописана прямо внутри svg-шки.
На компе, когда я открываю html страницу, и те и другие анимации прекрасно работают. Когда я выкладываю на сервер данные html страницы, анимации, которые прописаны для всей svg, так же прекрасно работают, но анимации, css которых прописан прямов svg-шке (в ) работают просто через раз. Точнее даже не так. Обычно она при первой загрузке сайта сработает, а дальше раз 10 не срабатывает и так далее. Думал, что браузер как-то не правильно кэширует картинку уже проанимированную, и вставил Но ничего не поменялось!
Очень буду благодарен за решение проблемы! Всем заранее спасибо!
Подключение картинки:
<img src="img/flower1.svg" class="flower flower-1">
Код внутри svg:
<svg width="110" height="140" viewBox="0 0 110 140" fill="none"
xmlns="http://www.w3.org/2000/svg">
<style>
Здесь код из animate.css (библиотека анимаций)
<style>
<path class='animate__animated animate__fadeIn animate__slower'
opacity="0.2" d="M58.1824 139.677C72.6425 139.677 84.3647 138.63
84.3647 137.338C84.3647 136.047 72.6425 135 58.1824 135C43.7222
135 32 136.047 32 137.338C32 138.63 43.7222 139.677 58.1824
139.677Z" fill="#31415e"/>
<path d="M21.8789 27.999C21.8789 27.999 63.7524 58.5967 42.2498
121.32L48.104 121.675C48.104 121.675 65.6326 58.8992 21.8789
27.999Z" fill="#0083C7"/>
<path d="M99.2719 33.2339C99.2719 33.2339 56.1623 54.3556 65.6072
114.983L60.2172 114.357C60.2172 114.357 54.4204 54.319 99.2719
33.2339Z" fill="#0083C7"/>
<path d="M24.6146 38.7457C28.839 31.5435 31.2145 22.0231 32.1768
17.5041C30.7765 16.1846 30.3514 14.1976 30.0046 12.148C29.6213
9.87418 27.397 4.35646 27.397 4.35646C26.6668 0.0486789 21.96
-1.44285 18.7291 1.61327L8.70014 11.0997C1.0832 18.2994 -1.92083
29.6451 1.24746 39.2307L9.0026 57.0877C9.49284 58.5688 10.4055
63.372 11.7224 66.1518C12.004 65.1478 12.2726 63.0226 12.5047
62.0552C15.6938 49.0406 18.8778 48.5216 24.6146 38.7457Z"
fill="#85D2DA"/>
<path d="M14.9976 64.5603L34.3255 53.6266C44.2842 47.9941 51.1397
37.0682 52.1723 25.1853L52.9181 16.5801C53.3249 11.8864 50.154
10.0246 45.1629 10.9399C43.2385 11.2919 41.288 12.0846 37.6242
13.8369C36.0075 14.6192 33.8535 17.1277 32.1742 17.4876C31.2146
22.0066 28.839 31.527 24.612 38.7293C18.8752 48.5052 15.6913
49.0241 12.5047 62.0388C12.27 62.9958 12.0014 65.1314 11.7224
66.1353C12.8959 65.1575 13.9076 65.1757 14.9976 64.5603Z"
fill="#38B9C6"/>
<path d="M89.1228 23.7289C87.8737 24.2296 86.3717 23.9897 85.0809
22.7954L78.8564 17.0586C76.0219 14.451 73.2891 15.5827 73.6777
19.6506C73.8185 21.1239 73.4664 26.2348 73.4664 26.2348C73.3934
36.5897 77.005 43.2443 83.8031 50.0919C86.9323 53.2419 92.085
60.2825 95.6966 63.2604C96.552 63.967 100.466 67.5603 101.334
67.4143C99.861 59.2733 97.475 49.8885 94.4919 42.7306C91.9876
36.6207 90.1864 30.2459 89.1228 23.7289Z" fill="#38B9C6"/>
<path d="M103.812 60.6809C105.963 57.0876 109.262 48.6858 109.786
43.6375C110.399 37.7078 108.959 29.1574 103.486 21.9708C101.681
19.6057 101.447 14.3696 100.409 11.9654C98.8885 8.45036 94.0696
10.101 93.2195 14.2184C92.8231 16.1428 91.4646 20.8287 91.4646
20.8287C91.0969 22.315 90.2025 23.2955 89.1177 23.7284C90.1822
30.2409 91.9835 36.6113 94.4868 42.717C97.4699 49.8749 99.8559
59.2597 101.329 67.4007C102.325 64.6105 100.745 65.8074 103.812
60.6809Z" fill="#85D2DA"/>
<path d="M66.1545 25.8668C66.1545 25.8668 62.8089 39.8619 59.6354
66.1519C58.2351 77.7036 58.608 90.5304 58.0708
102.964H59.9848C59.9848 102.964 58.6262 84.6607 60.5637
66.3266C62.8063 45.0823 66.1936 29.4054 66.796 25.4366C67.9798
17.5147 66.1545 25.8668 66.1545 25.8668Z" fill="#0083C7"/>
<path d="M64.1153 38.404C62.2743 38.0259 62.11 35.0715 62.7228
32.636C64.2326 26.6385 66.4465 16.4062 68.2719 11.1831C69.0854
8.85974 69.4896 6.92748 70.1806 6.96138L70.5613 6.99789C71.3045
7.38642 71.5418 9.11268 71.3619 10.6329C70.6552 16.5965 68.8325
28.3647 67.5495 34.4587C67.0306 36.9203 65.9588 38.7847 64.1153
38.404Z" fill="#FBB157"/>
<path d="M32.1245 61.4712C32.1245 61.4712 39.452 65.8442 44.8186
83.8967C50.1851 101.949 53.7628 103.897 53.7628 103.897L52.1148
104.552C48.1094 97.0964 44.0311 88.4783 42.4013 81.6776C38.7401
66.4622 32.1245 61.4712 32.1245 61.4712Z" fill="#38B9C6"/>
<path d="M47.4627 97.6439C47.4627 97.6439 41.5277 88.2148 39.7232
78.1546C37.9187 68.0944 34.1559 63.5258 32.1245 61.4658C32.1245
61.4658 38.7401 66.4542 42.4013 81.6722C44.0363 88.4729 48.1094
97.0911 52.1147 104.546L51.1447 104.932L47.4627 97.6439Z"
fill="#85D2DA"/>
<path d="M84.0797 55.5386C84.0797 55.5386 76.056 60.4487 70.3609
80.4152C64.6658 100.382 60.7439 102.58 60.7439 102.58L62.5692
103.281C66.8927 95.0126 71.2762 85.4635 72.9998 77.9484C76.8461
61.1189 84.0797 55.5386 84.0797 55.5386Z" fill="#38B9C6"/>
<path d="M67.6123 95.5993C67.6123 95.5993 74.0401 85.1324 75.9072
74.0213C77.7742 62.9103 81.8631 57.8281 84.0796 55.5386C84.0796
55.5386 76.8459 61.1189 72.997 77.938C71.276 85.4531 66.8925
95.0022 62.5664 103.271L63.6408 103.686L67.6123 95.5993Z"
fill="#85D2DA"/>
<path d="M72.4126 41.5225C72.4126 41.5225 64.8765 48.344 62.8295
70.6912C60.7825 93.0385 57.0588 96.1467 57.0588 96.1467L59.1449
96.5275C62.0785 86.8793 64.8218 75.8569 65.1425 67.5308C65.8466
48.8968 72.4126 41.5225 72.4126 41.5225Z" fill="#38B9C6"/>
<path d="M62.955 87.3669C62.955 87.3669 67.68 74.9625 67.4375
62.7902C67.195 50.6178 70.5171 44.3987 72.4103 41.5225C72.4103
41.5225 65.8469 48.8968 65.1324 67.5308C64.8116 75.8569 62.0684
86.8793 59.1348 96.5275L60.3578 96.7491L62.955 87.3669Z"
fill="#85D2DA"/>
<path d="M54.4382 26.0806C54.4382 26.0806 62.3239 36.9569 58.8713
66.4073C55.4187 95.8577 59.3928 100.893 59.3928 100.893L56.6026
100.817C55.4396 87.542 54.8998 72.5482 56.7565 61.7032C60.9157
37.4054 54.4382 26.0806 54.4382 26.0806Z" fill="#38B9C6"/>
<path d="M54.1592 87.9332C54.1592 87.9332 51.4315 70.6082 55.064
54.9338C58.6966 39.2595 56.1071 30.3179 54.4304 26.0806C54.4304
26.0806 60.9079 37.4054 56.7538 61.6927C54.8971 72.5483 55.45
87.542 56.6 100.807L54.9571 100.763L54.1592 87.9332Z"
fill="#85D2DA"/>
<path d="M75.023 135.162H36.4376L35.6031 125.822L32.899
124.453L30.44 96.8928L28.3695 96.5434L27.5898
91.4116H83.8395L83.0598 96.5278L80.9528 96.9971L78.2617
124.228L75.9435 125.84L75.023 135.162Z" fill="#485E88"/>
</svg>
Ответы (1 шт):
Когда вы добавляете файл SVG в HTML с помощью тега <img> становится невозможно его стилизовать, svg теряет интерактивность. То есть поведение ничем не отличается от растровой картинки, добавленной с помощью <img>
Поэтому лучше добавлять SVG файл с помощью тега <object>
<html>
<head>
<title></title>
</head>
<body>
<div id="container">
<object type="image/svg+xml" data="img/flower1.svg" width="110" height="140"> </object>
</div>
</body>
</html>
P.S
Из-за политики безопасности в Chrome на локальном ПК работать не будет.
Проверяйте, настраивайте в Firefox, либо на сервере, там Chrome работает с <object>