在我的主页上使用 svg 作为背景分隔线需要帮助

Question

我正在尝试在我的页面上使用波浪形状作为分隔线，该分隔线还与叠加文本交互。无论如何，我已经在 adobe XD 中为 mobile as well as for desktop and don't know how to translate that into code. I tried using an svg but it ended up looking like this on mobile and like this on desktop 模拟了它。我认为对行使用 svg 是解决此问题的最佳方法，但似乎无法使 css 正确。

svg 文件如下所示：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><style>.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;}</style></defs><polygon class="cls-1" points="0.5 86.54 173.5 0.54 292.5 43.54 398.5 66.54 486.5 43.54 592.5 31.54 738.5 83.54 916.5 31.54 1000.5 43.54 1000.5 1000.54 0.5 1000.54 0.5 86.54"/></svg>

我的 css 看起来像：

.waves {
    position: absolute;
    background-color: #B0E0E6; 
    bottom: 0;
    left: 0;
    height: 70vh;
    width: 100%;
}

在我的 html 中是 <img src={waves} alt="Background Waves" className="waves"></img>

感谢任何帮助。

Answer 1

没关系，我自己想出来了！我需要将 preserveAspectRatio="none" 添加到我的 SVG 文件中。

在我的主页上使用 svg 作为背景分隔线需要帮助

Need help using an svg as a background divider on my home page

html

css

svg

responsive-design