我一直试图让一个 svg 动画只显示在不是 10/11 的浏览器中，因为它没有显示我想要的样子。我得到了一些检测浏览器的代码的帮助，但现在我需要帮助将 svg 动画放入代码中，并将图像放入代码的唯一 10/11 部分。
我尝试将 svg 动画复制粘贴到其中，但是当我这样做时，ie 或 chrome 上没有任何显示。代码的顶部是动画，底部是检测浏览器的部分。
<div> <svg id="isi-wave" xmlns="http://www.w3.org/2000/svg" viewBox="519 0 2022 1225.25"> <g id="wave"> <path d="M5983.25,234v991.28H0V233.7c8.66.74,17.26,1.13,26,1.52l.23.18C209.57,244,520.63,39,785.09,39c242.62,0,530.06,179.27,710.72,195v-.27c8.66.74,17.26,1.13,26,1.52l.23.18C1705.39,244,2016.44,39,2280.9,39c242.62,0,530.06,179.27,710.72,195v-.27c8.67.74,17.26,1.13,26,1.52l.23.18C3201.2,244,3512.26,39,3776.71,39c242.62,0,530.07,179.27,710.72,195v-.27c8.66.74,17.26,1.13,26,1.52l.23.18C4697,244,5008.07,39,5272.53,39,5515.15,39,5802.6,218.26,5983.25,234Z" fill="#00a6dd"/> <path d="M5983.25,187.32v51C5707.9,230.8,5516.38,86.11,5214.88,86.11c-237.08,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.17,3-58,3.35h-.23c-30.14.56-21.88.69-26,.62v0c-275.35-7.47-466.86-152.16-768.37-152.16-237.07,0-397.66,115.57-615.17,145-9.25,1.23-18.57,2.35-28,3.23-18.87,1.85-38.16,3-58,3.35h-.23c-30.13.56-21.88.69-25.95.62v0c-275.35-7.47-466.87-152.16-768.37-152.16-237.07,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.17,3-58,3.35h-.23c-30.13.56-21.88.69-26,.62C1220.45,230.8,1028.94,86.11,727.44,86.11c-237.08,0-397.67,115.57-615.18,145-9.24,1.23-18.56,2.35-28,3.23-18.87,1.85-38.16,3-58,3.35H26c-30.14.56-21.89.69-26,.62v-51c35.7,6.16,50.4,9.7,110.6,9.7C276.1,197,592.14,0,841.93,0c218.51,0,473.38,146.92,653.88,187.32,35.7,6.16,50.4,9.7,110.6,9.7C1771.91,197,2088,0,2337.74,0c218.51,0,473.38,146.92,653.88,187.32h0c35.7,6.16,50.4,9.7,110.6,9.7,165.5,0,481.54-197,731.32-197,218.52,0,473.38,146.92,653.88,187.32v0c35.7,6.16,50.4,9.7,110.6,9.7,165.5,0,481.54-197,731.33-197C5547.88,0,5802.75,146.92,5983.25,187.32Z" fill="#0045ab"/> </g> <g id="bubbles"> <circle id="bubble_1" data-name="bubble 1" cx="707.51" cy="109.89" r="70.69" fill="#fff" opacity="0.57"/> <circle id="bubble_2" data-name="bubble 2" cx="906.53" cy="83.33" r="49.13" fill="#fff" opacity="0.4"/> <circle id="bubble_3" data-name="bubble 3" cx="1267.49" cy="128.73" r="101.27" fill="#fff" opacity="0.35"/> <circle id="bubble_4" data-name="bubble 4" cx="1528.18" cy="88.09" r="61.16" fill="#fff" opacity="0.65"/> <circle id="bubble_5" data-name="bubble 5" cx="1892.64" cy="175.38" r="128.84" fill="#fff" opacity="0.52"/> <circle id="bubble_6" data-name="bubble 6" cx="2081.9" cy="83.86" r="44.87" fill="#fff" opacity="0.56"/> <circle id="bubble_7" data-name="bubble 7" cx="2339.83" cy="103.63" r="76.7" fill="#fff" opacity="0.7"/> </g> <style> #isi-wave #wave { -webkit-animation: moveWave 4s linear 0s infinite; animation: moveWave 4s linear 0s infinite; } #isi-wave #bubble_1 { -webkit-transform: translate(0px, 220px); -ms-transform: translate(0px, 220px); transform: translate(0px, 220px); -webkit-animation: moveIn 2s ease-in-out -1.8s infinite alternate; animation: moveIn 2s ease-in-out -1.8s infinite alternate; } #isi-wave #bubble_2 { -webkit-transform: translate(0px, 200px); -ms-transform: translate(0px, 200px); transform: translate(0px, 200px); -webkit-animation: moveIn 2s ease-in-out -2.28s infinite alternate; animation: moveIn 2s ease-in-out -2.28s infinite alternate; } #isi-wave #bubble_3 { -webkit-transform: translate(0px, 230px); -ms-transform: translate(0px, 230px); transform: translate(0px, 230px); -webkit-animation: moveIn 2s ease-in-out -3.2s infinite alternate; animation: moveIn 2s ease-in-out -3.2s infinite alternate; } #isi-wave #bubble_4 { -webkit-transform: translate(0px, 210px); -ms-transform: translate(0px, 210px); transform: translate(0px, 210px); -webkit-animation: moveIn 2s ease-in-out -3.8s infinite alternate; animation: moveIn 2s ease-in-out -3.8s infinite alternate; } #isi-wave #bubble_5 { -webkit-transform: translate(0px, 210px); -ms-transform: translate(0px, 210px); transform: translate(0px, 210px); -webkit-animation: moveIn 2s ease-in-out -0.92s infinite alternate; animation: moveIn 2s ease-in-out -0.92s infinite alternate; } #isi-wave #bubble_6 { -webkit-transform: translate(0px, 210px); -ms-transform: translate(0px, 210px); transform: translate(0px, 210px); -webkit-animation: moveIn 2s ease-in-out -1.32s infinite alternate; animation: moveIn 2s ease-in-out -1.32s infinite alternate; } #isi-wave #bubble_7 { -webkit-transform: translate(0px, 220px); -ms-transform: translate(0px, 220px); transform: translate(0px, 220px); -webkit-animation: moveIn 2s ease-in-out -2.04s infinite alternate; animation: moveIn 2s ease-in-out -2.04s infinite alternate; } @-webkit-keyframes moveIn { to { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes moveIn { to { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @-webkit-keyframes moveWave { to { -webkit-transform: translate(-1495.81px, 0px); transform: translate(-1495.81px, 0px); } } @keyframes moveWave { to { -webkit-transform: translate(-1495.81px, 0px); transform: translate(-1495.81px, 0px); } } </svg>
<style type="text/css">
body {
font: 1.25em sans-serif;
background-color:white;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
body{
background-color:blue;
<img alt="" src="https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test.png"
srcset="https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-500.png 500w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-800.png 800w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-1080.png 1080w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test-p-1600.png 1600w, https://assets.website-files.com/5d016609a151693900497381/5d1f7a94fd3194c9ef4637c4_Wave%20test.png 1920w"
sizes=(max-width: 1920px) 100vw, 1920px" />
}
}
</style>我希望 png 图像至少会显示出来，我想我把它放对了，但什么也没显示。我不熟悉 html/css，这就是我在 webflow 中这样做的原因。