css - 在 html 页面上排列两个 svg 文件

Question

我有两个 svg 文件，1.svg 和 2.svg，我想像这样在 HTML 页面上排列它们:

[1.svg]
[2.svg]

我想设置这些是页面上唯一的元素，并且当您更改浏览器大小时，每个 .svg 后面都有两种不同的背景颜色，对应于 svg。

我设置它的方式是做两个不同的 div:

<div class="top_body">
    <object data="images/1.svg" class="bg_top" type="image/svg+xml"></object>
</div>
<div class="bottom_body">
    <object data="images/2.svg" class="bg_bottom" type="image/svg+xml"></object>
</div>

并将它们设置如下样式:

.bg-top {
  height:100%;
  width:100%;
  margin:0px;
}

.bg-bottom {
  width:100%;
  margin:0px;
}


.top_body {background-color:#{some color}  ;}
.bottom_body {background-color:#{some other color}  ;}

但是有两个问题:

1. 我想确保 svg 元素居中，任何一侧都没有空格(现在左侧有空格)

2. 我想确保元素随着浏览器窗口大小的变化而动态缩放

我确定这是调整我的 css 的问题，这里有任何指示吗？

Answer 1

.bg-top {
  height:100%;
  width:100%;
  margin:0px auto;
}

.bg-bottom {
  width:100%;
  margin:0px auto;
}


.top_body {background-color:#{some color}  ;}
.bottom_body {background-color:#{some other color}  ;}

HTH