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

Question

我在页面上有一个基本的SVG。 SVG随着我想要的页面大小而缩放。

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

example.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下方的20px（或给定百分比）？

以下是我目前正在尝试实现此目标的示例。

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/ enter code here

快速而粗略的尝试...... 我认为在html中安排顺序可以提供帮助。