為什么這個 svg 曲線 animation 不適應瀏覽器寬度變化？

Question

我使用 Javascript 對 svg 曲線進行了動畫處理，效果很好，但是，當您調整 window 的大小時。 它不調整大小以適應它？ 有什么辦法可以做到這一點，我願意接受任何解決方案，無論是 CSS、JS 還是 HTML（或其他語言。就此而言）：這是我正在使用的代碼：

 const vw = document.body.clientWidth const vh = document.body.clientHeight let wave = -2890 function add(){ if(wave === -2){ wave = -2890 } else { wave = wave + 2 } document.getElementById('main').innerHTML = `<div class="wave" id="main" transform="rotate(1)"><svg width="${vw}px" height="25px" viewBox="0 0 1440 25" preserveAspectRatio="none"><g width="${vw}px" data-svg-origin="0 0" transform="matrix(1,0,0,1, ${wave + Math.floor(Math.random() * 10) -10},0)" style="transform-origin: 0px 0px;"><path width="${vw}px" fill="currentColor" d="M 0 12.5 q 360 -25 720 0 t 720 0 t 720 0 t 720 0 t 720 0 t 720 0 V 0 H 0 V 12.5"></path></g></svg></div>` requestAnimationFrame(add); } requestAnimationFrame(add);

 <div class="wave" id="main"></div>

例如，如果您在非全屏模式下運行代碼片段，然后進入全屏模式，您可以看到它保持初始寬度不變。

幫助表示贊賞。 謝謝！

Answer 1

移動 function 中的變量：

 let wave = -2890 function add() { let vw = document.body.clientWidth let vh = document.body.clientHeight if (wave === -2) { wave = -2890 } else { wave = wave + 2 } document.getElementById('main').innerHTML = `<div class="wave" id="main" transform="rotate(1)"><svg width="${vw}px" height="25px" viewBox="0 0 1440 25" preserveAspectRatio="none"><g width="${vw}px" data-svg-origin="0 0" transform="matrix(1,0,0,1, ${wave + Math.floor(Math.random() * 10) -10},0)" style="transform-origin: 0px 0px;"><path width="${vw}px" fill="currentColor" d="M 0 12.5 q 360 -25 720 0 t 720 0 t 720 0 t 720 0 t 720 0 t 720 0 V 0 H 0 V 12.5"></path></g></svg></div>` requestAnimationFrame(add); } requestAnimationFrame(add);

 <div class="wave" id="main"></div>