Как расположить графическую кнопку поверх изменяемого размера SVG-фона с учетом соотношения сторон?

Question

У нас есть веб-сайт angularjs, в котором в качестве фона используется одно большое изображение SVG.Представьте, что это картина леса, по которому идет ветреная тропинка.Мы хотели бы разместить графические кнопки вдоль пути, по которому пользователь может щелкнуть, чтобы перейти к следующему экрану.

Приложение написано так, что если вы измените размер браузера, фон SVG будет изменен в соответствии с его соотношением сторон,Если размеры браузера не соответствуют формату SVG, мы по-прежнему показываем SVG в правильном формате, но у нас есть белая рамка вокруг изображения, чтобы заполнить оставшуюся область окна браузера.

Проблема в следующем: как поместить графические кнопки поверх SVG и убедиться, что они остаются в правильном положении при изменении размера?Мы не хотим, чтобы кнопки визуально отклонялись от траектории.

Мы считаем, что нам нужно создавать кнопки вне SVG, потому что мы хотели бы иметь различные графические состояния для кнопки (доступно, недоступно, нажатапереворачивание и т. д.).И, вероятно, кнопки должны использовать SVG-графику с тем же соотношением сторон, что и фон для масштабирования?Однако, если есть другие аспекты SVG, о которых мы не знаем, которые могли бы помочь в этой ситуации, мы открыты для всего.

У нас была похожая проблема в прошлом, и мы попытались позиционироватькнопки, использующие свойства CSS слева и сверху в процентах.Этот вид работает, но кнопки слишком много двигаются по нашему вкусу.Мы не использовали графику SVG для кнопок с одинаковым соотношением сторон ... просто PNG.Может быть, в этом была проблема?

Answer 1

Если ваш контейнерный элемент (блочный элемент, содержащий фон SVG и кнопки) всегда имеет одинаковое соотношение сторон, то, исходя из его звучания, лучше всего использовать абсолютное позиционирование. Если вы установите значения 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>