Не работает анимация 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 шт):

Автор решения: Alexandr_TT

Когда вы добавляете файл 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>

→ Ссылка