如何響應地擴展 SVG？

Question

我在漢堡菜單下使用 SVG，因此當用戶單擊該菜單時，SVG 會展開並用其上的選項填充整個屏幕。 我為此使用了 scale()，所以基本上發生的情況是 SVG 的比例為 1，當用戶單擊菜單時，SVG 的比例為(35)。

現在的問題。 該比例（35）不會在更大的分辨率上填充整個屏幕，甚至在某些具有更大高度的移動分辨率上。 如果我設置的比例可以確保我覆蓋大部分屏幕，比如比例（70），這將使關閉的 animation 非常混亂，因為要通過如此大的比例到 1。我怎樣才能擴展這個 SVG平滑的 animation 可以填滿所有類型的屏幕？

編輯 - 在下面添加了一個簡單快速的示例代碼

下面是一些解釋發生了什么的圖像。

關閉菜單 / SVG 帶刻度(1)

打開菜單 / SVG 帶刻度(70)

菜單關閉 / SVG 從 scale(70) 到 scale(1) 看起來很亂

 function menuOnClick() { document.getElementById("menu-bar").classList.toggle("change"); document.getElementById("nav").classList.toggle("change"); document.getElementById('blob').classList.toggle("change-bg"); }

 #menu { z-index: 2; } #menu-bar { width: 45px; height: 40px; margin: 30px 0 20px 20px; cursor: pointer; float: right; }.bar { height: 5px; width: 100%; background-color: #00d1a9;; display: block; border-radius: 5px; transition: 0.3s ease; } #bar1 { transform: translateY(-4px); } #bar3 { transform: translateY(4px); }.nav { transition: 0.3s ease; display: none; }.nav ul { padding: 0 22px; }.nav li { list-style: none; padding: 12px 0; }.nav li a { color: white; font-size: 20px; text-decoration: none; }.nav li a:hover { font-weight: bold; }.menu-bg, #menu { top: 0; left: 0; position: absolute; }.change { display: block; }.change.bar { background-color: white; }.change #bar1 { transform: translateY(4px) rotateZ(-45deg); }.change #bar2 { opacity: 0; }.change #bar3 { transform: translateY(-6px) rotateZ(45deg); }.change-bg { transform: scale(70); }.blob { margin-top:-32px; top: 0; z-index: 1; pointer-events: none; -webkit-transition: all 0.75s linear; transition: all 0.75s linear; display: block; will-change: auto; filter: none; -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); }

 <div id="menu"> <div id="menu-bar" onclick="menuOnClick()"> <div id="bar1" class="bar"></div> <div id="bar2" class="bar"></div> <div id="bar3" class="bar"></div> </div> <nav class="nav" id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </div> <svg class="blob" id="blob" xmlns="http://www.w3.org/2000/svg" width="265.42" height="151.973" viewBox="0 0 265.42 151.973"> <title>Menu Blob</title> <desc>The blob that grows to be the menu background</desc> <path class="blobPath" id="blobPath" shape-rendering="auto" d="M-1377.154,10877.442c-10.882-7.812-24.262-11.1-36.627-16.251s-24.764-13.355-28.853-26.112c-.135.766,251.322-30.752,251.3-30.855s-9.766,33.5-15.478,42.831c-9.83,16.055-20.015,32.053-32.926,45.756a125.25,125.25,0,0,1-18.85,16.492,89.6,89.6,0,0,1-28.133,13.538,70.507,70.507,0,0,1-29.47,1.6,56.7,56.7,0,0,1-24.487-10C-1354.7,10904.193-1363.044,10887.567-1377.154,10877.442Z" transform="translate(2763.902 -10547.315) rotate(7)" /> </svg> <div class="menu-bg" id="menu-bg"></div>

Answer 1

問題是如何響應地縮放 blob，而不是只有一個縮放值，這對於非常大的屏幕來說可能太小，而在縮小時反而會在非常小的屏幕上引起問題。

由於 JS 已經在單擊時被調用，我們可以獲得 blob 的基本大小並查看它分別適合 window 高度和寬度的“多少次”，並使用這些比率來計算保證 window 被覆蓋的比例但沒有巨大的縮放。

We can do this by calculating a CSS variable in the click event function which will then get used in the change-bg class (but will be ignored when this class is not set). 這樣做的好處是，如果 window 已調整大小，它將自動重新計算比例。

 function menuOnClick() { document.getElementById("menu-bar").classList.toggle("change"); document.getElementById("nav").classList.toggle("change"); document.getElementById('blob').classList.toggle("change-bg"); /* added */ let blob = document.getElementById('blob'); let rect = blob.getBoundingClientRect(); document.getElementById('blob').style.setProperty('--scale', Math.max(4*window.innerWidth/rect.width,4*window.innerHeight/rect.height)); }

 #menu { z-index: 2; } #menu-bar { width: 45px; height: 40px; margin: 30px 0 20px 20px; cursor: pointer; float: right; }.bar { height: 5px; width: 100%; background-color: #00d1a9;; display: block; border-radius: 5px; transition: 0.3s ease; } #bar1 { transform: translateY(-4px); } #bar3 { transform: translateY(4px); }.nav { transition: 0.3s ease; display: none; }.nav ul { padding: 0 22px; }.nav li { list-style: none; padding: 12px 0; }.nav li a { color: white; font-size: 20px; text-decoration: none; }.nav li a:hover { font-weight: bold; }.menu-bg, #menu { top: 0; left: 0; position: absolute; }.change { display: block; }.change.bar { background-color: white; }.change #bar1 { transform: translateY(4px) rotateZ(-45deg); }.change #bar2 { opacity: 0; }.change #bar3 { transform: translateY(-6px) rotateZ(45deg); }.blob { transform: scale(1); /* added */ margin-top:-32px; top: 0; z-index: 1; pointer-events: none; -webkit-transition: all 0.75s linear; transition: all 0.75s linear; display: block; will-change: auto; filter: none; -webkit-filter: blur(0); -moz-filter: blur(0); -ms-filter: blur(0); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); }.change-bg { /* moved after.blob so takes precedence */ transform: scale(var(--scale));/* Changed from 70 */ }

 <div id="menu"> <div id="menu-bar" onclick="menuOnClick()"> <div id="bar1" class="bar"></div> <div id="bar2" class="bar"></div> <div id="bar3" class="bar"></div> </div> <nav class="nav" id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </div> <svg class="blob" id="blob" xmlns="http://www.w3.org/2000/svg" width="265.42" height="151.973" viewBox="0 0 265.42 151.973"> <title>Menu Blob</title> <desc>The blob that grows to be the menu background</desc> <path class="blobPath" id="blobPath" shape-rendering="auto" d="M-1377.154,10877.442c-10.882-7.812-24.262-11.1-36.627-16.251s-24.764-13.355-28.853-26.112c-.135.766,251.322-30.752,251.3-30.855s-9.766,33.5-15.478,42.831c-9.83,16.055-20.015,32.053-32.926,45.756a125.25,125.25,0,0,1-18.85,16.492,89.6,89.6,0,0,1-28.133,13.538,70.507,70.507,0,0,1-29.47,1.6,56.7,56.7,0,0,1-24.487-10C-1354.7,10904.193-1363.044,10887.567-1377.154,10877.442Z" transform="translate(2763.902 -10547.315) rotate(7)" /> </svg> <div class="menu-bg" id="menu-bg"></div>

注意：這個片段似乎適用於不同的 window 尺寸 OK，但是在 Windows10 的 Edge 移動設備的“模擬器”中，我注意到縮小時有一點點抖動。 我無法解釋這一點。 希望有人可以。

Answer 2

這是一種不同的方法。

 document.getElementById("menu-bar").addEventListener('click', function(evt) { evt.target.parentElement.classList.toggle("open"); });

 body, html { margin: 0; } #menu { position: relative; } #blob { position: absolute; top: 0; right: 0; transition: 0.3s ease; z-index: -1; } #blob g { fill: #00d1a9; transition: 0.3s ease; transform-origin: 150px 32px; transform-box: fill-box; }.open #blob { width: 100%; height: 100%; }.open #blob g { transform: scale(20); } #menu-bar { position: absolute; top: 40px; right: 100px; width: 45px; height: 40px; cursor: pointer; }.bar { height: 5px; width: 100%; background-color: rgba(255, 255, 255, 0.8); display: block; border-radius: 5px; transition: 0.3s ease; pointer-events: none; } #bar1 { transform: translateY(-4px); } #bar3 { transform: translateY(4px); }.open #bar1 { transform: translateY(4px) rotateZ(-45deg); }.open #bar2 { opacity: 0; }.open #bar3 { transform: translateY(-6px) rotateZ(45deg); }.nav { display: inline-block; opacity: 0; pointer-events: none; }.nav ul { padding: 0 22px; margin: 0; }.nav li { list-style: none; padding: 12px 0; }.nav li a { color: black; font-size: 20px; text-decoration: none; }.nav li a:hover { font-weight: bold; }.open.nav { transition: 0.3s ease; transition-delay: 0.2s; opacity: 1; pointer-events: auto; }

 <div id="menu"> <svg class="blob" id="blob" width="256" height="108" viewBox="10 31 256 108"> <g> <path class="blobPath" id="blobPath" shape-rendering="auto" d="M-1377.154,10877.442c-10.882-7.812-24.262-11.1-36.627-16.251s-24.764-13.355-28.853-26.112c-.135.766,251.322-30.752,251.3-30.855s-9.766,33.5-15.478,42.831c-9.83,16.055-20.015,32.053-32.926,45.756a125.25,125.25,0,0,1-18.85,16.492,89.6,89.6,0,0,1-28.133,13.538,70.507,70.507,0,0,1-29.47,1.6,56.7,56.7,0,0,1-24.487-10C-1354.7,10904.193-1363.044,10887.567-1377.154,10877.442Z" transform="translate(2763.902 -10547.315) rotate(7)" /> </g> </svg> <div id="menu-bar"> <div id="bar1" class="bar"></div> <div id="bar2" class="bar"></div> <div id="bar3" class="bar"></div> </div> <nav class="nav" id="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </div>