html - 与 SVG 相关的按钮位置 - 如何配置一致的位置

Question

我在页面上有一个基本的 SVG。 SVG 随页面大小缩放，这正是我想要的。

SVG 必须在对象标记内，因为我正在使用的真实对象在文件中包含 javascript 和 CSS。

例子.svg

   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" viewBox="246 0 600 430.95">
      <rect width="100%" height="100%" fill="red" />
    </svg>

我还在页面上添加了一个下拉按钮。由于我添加了 responsive-width CSS 类，它也会缩放到页面大小。

但是，我希望按钮始终显示在 SVG 下方。当屏幕为特定尺寸时，我已经设法使用 margin-top: 80%; 实现了这一点。

但是，当我更改浏览器的大小时(例如，如果我缩小它)，按钮的位置会发生巨大变化，有时会出现在 SVG 的顶部。

我的问题是，如何确保按钮始终出现，例如 SVG 下方 20 像素(或给定的百分比)？

这是我目前正在努力实现这一目标的示例。

body {
  background-color: #C1C1C1;
}

.responsive-width {
  font-size: 1.5vw;
  text-align: center;
}

.tuner {
  position: absolute;
  left: 50%;
  transform: translateX(-29%);
  margin-top: 5%;
  height: 65%;
}

.dropdownposition {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 80%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<object type="image/svg+xml" data="example.svg" class="tuner"></object>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle responsive-width dropdownposition" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    My Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"></div>
</div>

 

Answer 1

http://jsfiddle.net/zsguyw1e/6/ 在这里输入代码

快速粗略的尝试... 我认为在 html 中安排顺序会有所帮助。