html - 如何根据纵横比将图形按钮放置在可调整大小的 SVG 背景之上？

Question

我们有一个以单个大型 SVG 图像作为背景的 angularjs 网站。想象一下，这是一张森林的照片，有一条风大的小路穿过它。我们希望沿着路径放置图形按钮，用户可以点击这些按钮转到下一个屏幕。

应用程序编写为如果您调整浏览器的大小，SVG 背景将根据其纵横比调整大小。如果浏览器尺寸与 SVG 的纵横比不同，我们仍会以正确的纵横比显示整个 SVG，但我们会在图像周围使用白色边框来填充浏览器窗口的剩余区域。

问题是:如何将图形按钮放在 SVG 的顶部并确保它们在我们调整大小时保持在正确的位置？我们不希望按钮在视觉上偏离路径。

我们认为我们需要在 SVG 之外创建按钮，因为我们希望按钮具有不同的图形状态(可用、不可用、按下、滚动等)。很可能按钮也需要使用与背景具有相同纵横比的 SVG 图形来缩放？但是，如果我们不知道 SVG 的其他方面对这种情况有帮助，我们对任何事情都持开放态度。

我们过去遇到过类似的问题，我们尝试使用 left 和 top 的 css 属性作为百分比来定位按钮。这种方法可行，但按钮移动得太多了，不符合我们的喜好。尽管我们没有为具有相同纵横比的按钮使用 SVG 图形……只是 PNG。也许这就是问题所在？

Answer 1

如果您的容器元素(包含 SVG 背景和按钮的 block 元素)始终具有相同的宽高比，那么从它的声音来看，您最好的选择可能是使用绝对定位。如果您将 top 和 right 作为百分比进行定位，按钮元素将始终保持在相同的相对位置。如果您想根据按钮的中心而不是边缘来定位按钮，您还可以添加一个transform，如下所示:

示例:如果您运行此命令并调整窗口大小，按钮将始终位于容器中的相同相对位置。

.container {
  /* Arbitrary - makes the container half the width of the parent */
  width: 75%;
  /* This preserves a 1:2 aspect ratio */
  padding-top: 50%;
  /* This is necessary for children to have position: absolute */
  position: relative;
  /* Replace this with your SVG */
  background: lightblue;
}

button {
  position: absolute;
  /* Makes the top be 1/4 of the height of the container away from the container top, always */
  top: 25%;
  /* Same but for left */
  left: 25%;
  /* Pulls the button back half its height and half its width so it's positioned based on its center, not its top-left corner. */
  transform: translate(-50%, -50%);
}

<div class="container">
<button>Button Text</button>
</div>