我如何正确定位我的 SVG 元素，使其即使在调整大小时也是如此

Question

这是我的问题的图片。我有两个 SVG 文件，无论我如何调整 window 的大小，我都希望它们粘在底部，如果我将其调整为移动配置，我希望它们堆叠在彼此之上

Image of what i want

这是我的 CSS，但在我调整大小后，它们甚至不在底部。我将背景分成两种不同的颜色

    * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.column1 {
  height: 100vh;
  background-color: #679289;
}
.column2 {
  height: 100vh;
  background-color: #f4c095;
}

.svg1 {
  overflow: visible;
  transform: translate(0px, 68px);
}

.svg1 {
  
  overflow: visible;
  transform: translate(0px, 166px);
}

还要注意 SVG 大小不一样

Answer 1

尝试将元素包含在 div 中并使用 flex-box。其他布局元素可能需要调整，但原理应该是一样的。

https://codepen.io/jonshipman/pen/zYRoKjX

<div class="flex">
  <div>
    <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" />
  </div>

  <div>
    <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg" />
  </div>
</div>

.flex {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
}

.flex > div {
  flex: 1 0 auto;
}

img {
  width: 5rem;
  height: 5rem;
  display: block;
  margin: 0 auto;
}

div {
  background: blue;
}

div:nth-child(2) {
  background: yellow;
}

@media screen and (max-width:786px) {
  .flex {
    flex-direction:column;
    align-items:center;
  }
  
  .flex > div {
    display:flex;
    align-items:flex-end;
  }
}

我如何正确定位我的 SVG 元素，使其即使在调整大小时也是如此

How do i properly position my SVG element, so its even on resizes

html

css

angular

svg