当屏幕尺寸较小时，SVG路径会在页面上爬行/爬升

Question

我的页面上有SVG。这个SVG是一个白色波浪，可以在页面的英雄图像上创建漂亮的波浪效果。但是当屏幕宽度减小时，SVG的路径(绘图)会爬上页面，在它自己和英雄图像之间创建一个间隙。

我如何对齐这个SVG路径，使其保持在底部?

.wave {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-radius: none;
}
<svg
height="100%"
width="100%"
id="svg"
viewBox="0 0 1440 1"
xmlns="http://www.w3.org/2000/svg"
className="wave"
>
<path
d="M 0,400 C 0,400 0,200 0,200 C 153.19999999999993,213.06666666666666 306.39999999999986,226.13333333333335 449,220 C 591.6000000000001,213.86666666666665 723.6000000000001,188.53333333333333 887,182 C 1050.3999999999999,175.46666666666667 1245.1999999999998,187.73333333333335 1440,200 C 1440,200 1440,400 1440,400 Z"
stroke="none"
stroke-width="0"
fill="#ffffff"
></path>
</svg>

这是正在发生的事情的图片。

Answer 1

viewbox(&

是由svg的preserveAspectRatio

属性控制的。默认情况下，viewbox被统一缩放以适应svg的大小，并在水平和垂直方向居中。(类似于使用以下属性显示背景图像的方式:background-position: center center; background-size: contain;)

这就是为什么你的路径'爬上'，svg位于英雄的底部，但其内容是居中。

preserveAspectRatio接受两个值，第一个是对齐，第二个(可选)是它如何"适合"svg。

preserveAspectRatio="<align> [<meetOrSlice>]"

关于preserveAspectRatio的mdn页面非常有帮助，并给出了完整的示例列表。https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

tldr:

要解决您的问题，添加preserveAspectRatio="xMidYMax meet"作为SVG的属性，例如:

<svg
height="100%"
width="100%"
id="svg"
viewBox="0 0 1440 234"
xmlns="http://www.w3.org/2000/svg"
className="wave"
preserveAspectRatio="xMidYMax meet"
>
...
</svg>

注:viewBox的高度需要足够大来容纳图形，所以已经增加了。荣誉:Sphinxxx &enxaneta .