如何设置svg的高度和svg中容器的高度

Question

我用svg创建了一个wave。这波浪在一个容器里。如何设置svg波的高度和svg中容器的高度？

<div class="container">
<h1 class="innertext">
Lorem Ipsum Dolor Sit
</h1>
<svg class="one" viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#05aed9;"></path>
</svg>

<svg class="two" viewBox="0 0 500 500" preserveAspectRatio="yMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,1 Z" style="stroke: none; fill:#1e90ff;"></path>
</svg>


<svg class= "three" viewBox="0 0 500 500" preserveAspectRatio="yMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,1 Z" style="stroke: none; fill:#004681;"></path>
</svg>

</div>

这就是我使用的风格：

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
svg.one {
  margin-top: 40px;
}
svg.two {
  margin-top: 20px;
  z-index: 1;
}
svg.three {
  margin-top: 0px;
  z-index: 2;
}
.container {
  height: 800px;
}

.innertext {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  color: #ffffff;
}

我如何才能像上面的图片那样实现这个目标？

Answer 1

您还没有在SVG上设置高度，因此它会根据AspectRatio进行扩展以占用所有空间。

您需要指定高度和宽度，我怀疑，将FROM python:3 ADD my_script.py / CMD [ "python3", "./my_script.py" ] 设置为Traceback (most recent call last): File "./my_script.py", line 13, in <module> import test as count ModuleNotFoundError: No module named 'test' 。

＆＃13;

＆＃13;

preserveAspectRatio

＆＃13;

none

＆＃13;

＆＃13;

＆＃13;