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

Question

我正在使用 getwaves.io为网站创建 SVG wave。我想在导航栏正下方的屏幕顶部添加 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 的一部分看起来像是在导航栏下方。

Answer 1

您只需将 svg 的宽度设置为 100%，这样它就会拉伸(stretch)到容器的宽度。

我举了一个例子:

* {
  box-sizing: border-box;
}

.header-container {
  background: black;
  color: white;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body {
  margin: 0;
}

.content {
  width: 100%;
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

svg {
  width: 100%;
}

<div class="header-container">
    <header class="content">
        <h1>Logo</h1>
        <nav>Items...</nav>
    </header>
</div>
<svg 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>
<main class="content">
    <p>
        <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eos assumenda laudantium quo incidunt eius facere cumque neque, vel delectus et, sapiente natus? Qui quas ratione maiores quam atque quis consequuntur.</span>
        <span>Veniam inventore dolores molestias cum rerum culpa labore, amet perspiciatis ut ipsa. Totam adipisci, eius illo, beatae aperiam ab aut, amet ex dolore saepe minus. Architecto enim porro ab aliquam.</span>
        <span>Dolorum vero placeat ratione cupiditate! Inventore laboriosam ratione sapiente sit dolores, voluptatem fugit tempora qui vel ad corrupti. Eveniet nostrum itaque ullam doloremque omnis aliquid sapiente quibusdam alias incidunt nam!</span>
        <span>Dignissimos facere voluptatem, non deserunt quo labore nihil distinctio voluptatum facilis doloremque, quasi magnam asperiores recusandae adipisci laudantium at error! Ducimus laborum ut officia eaque voluptate reprehenderit corrupti dolor voluptatem?</span>
        <span>Inventore aliquid at, excepturi enim accusamus eaque quia velit, nesciunt laudantium animi ea praesentium blanditiis numquam obcaecati sequi modi aperiam! Sapiente, velit pariatur itaque aspernatur consectetur neque voluptas. Ad, voluptatum?</span>
        <span>In vitae doloremque cupiditate, ad sapiente consectetur odit, enim aspernatur aut earum deleniti vel nobis soluta inventore dolores, similique suscipit officia nisi amet? Quae ab cumque corporis hic odio error?</span>
        <span>Blanditiis ipsum delectus id praesentium! Nam deserunt eum, quia tenetur voluptatum ipsam fugit sed nesciunt non, sunt distinctio provident, rem iusto magni cumque officia veritatis soluta nostrum. Modi, blanditiis dignissimos!</span>
        <span>Non consequuntur debitis velit obcaecati. Aspernatur animi tempora reprehenderit nam cum. Iure quas debitis architecto, placeat deserunt laboriosam, libero iste similique, id ea laudantium dolore ipsam odio illo consectetur voluptatibus.</span>
        <span>Dolore, fugiat blanditiis porro libero quam hic nostrum qui? Ab exercitationem magni eius repellat blanditiis harum maxime ipsum? Beatae perspiciatis numquam asperiores facilis? Totam optio sapiente reprehenderit facilis quam sed.</span>
        <span>Explicabo amet dolore laboriosam corporis facere laborum sit enim. Dolore tempora adipisci, unde aut ullam ut molestias iste, ducimus dolorum error, iusto quaerat? Eveniet itaque sunt, quam commodi minima accusamus.</span>
        <span>Impedit, perferendis ullam aspernatur amet omnis numquam eos ipsum sapiente consequatur sit dolore eaque nostrum eius repellat sint earum dignissimos neque quam maiores, voluptate magnam at. Nulla ea voluptatem ducimus.</span>
        <span>Ullam, fuga voluptatibus, cupiditate autem, et cumque quae quia rerum corrupti dolores dolore similique aut consequuntur ipsa quaerat ut deserunt velit dolorem voluptate quas harum quod porro possimus magni? Dolores.</span>
        <span>Et quidem enim doloremque officiis aliquid repellat optio minus, fuga, quo beatae in, suscipit non aperiam est rerum numquam vitae culpa nesciunt dolores consectetur fugiat perferendis facere asperiores. Iste, sed?</span>
    </p>
</main>