时间戳

首页 > 解决方案 > 如何在所有屏幕尺寸上保持 SVG 的波形

html - 如何在所有屏幕尺寸上保持 SVG 的波形

问题描述

我正在使用getwaves.io为网站创建 SVG 波形。我想在导航栏正下方的屏幕顶部添加 SVG。问题是随着屏幕变小，SVG 会失去其原始形状。如何确保 SVG 在所有不同的屏幕尺寸上看起来完全相同？

顺便说一句，我必须添加style="height: 100%"到 SVG，否则它只会在较小的屏幕上消失。

<svg style="height: 100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#000" fill-opacity="1" d="M0,128L48,149.3C96,171,192,213,288,224C384,235,480,213,576,192C672,171,768,149,864,138.7C960,128,1056,128,1152,154.7C1248,181,1344,235,1392,261.3L1440,288L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path>
</svg>

更新：

如果我删除导航栏并添加width: 100%，它可以工作。但是，对于导航栏，随着屏幕变小，SVG 的一部分看起来会在导航栏下方。

标签： htmlcsssvg

解决方案

使用视口单位vw（如宽度和高度vh）而不是,或使您的网页/网站具有响应性，使其在所有屏幕上看起来都相同。px%remem

例如：- width: 100%;等于width: 100vw; 和 height: 100%;等于height: 100vh;。

试试吧，它肯定会起作用，但如果它没有在评论中让我知道，我会尽力帮助你。

推荐阅读