Расположение элемента над масштабированным SVG - PullRequest
Новая
       2

Расположение элемента над масштабированным SVG

0 голосов
/ 16 мая 2018

У меня есть изображение SVG, масштабированное до размера окна.Элемент должен быть размещен над изображением относительно его размера.Поскольку размер изображения изменяется в разных окнах браузера, параметр позиционирования, например, должен составлять примерно 30% от ширины изображения слева.

Проблема заключается в том, что браузер добавляет «отступ» ксохранить соотношение сторон.Однако этот «отступ» не CSS, и я не нашел способа получить доступ к каким-либо данным о параметрах рендеринга изображения.

Звучит сложно?Вот внешняя скрипка или см. Тот же код ниже (проблема отображается только в полноэкранном режиме).При изменении размера окна браузера хэштег должен оставаться в той же позиции над изображением, однако он перемещается по кругу, так как по бокам изображения добавляется отступ.

Я не смог найти какой-либо способ доступа к svgсвойства, чтобы получить что-то вроде фактического источника изображения (минус отступы) или фактический размер изображения.Любое решение с JS, JQuery, CSS и т. Д. В порядке. 

body {
  overflow: hidden;
}

img#test {
  position: absolute;
  height: 100%;
  width: 100%;
}

div#test {
  position: absolute;
  padding-left: 31%;
  padding-top: 8%;
  color: #000;
  font-size: 50px;
}
<html>

  <body>

    <img src='data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aCBkPSJNNjUsMjBhMTUsMTUsMCwxLDEsMTUsMTVoLTYwYTE1LDE1LDAsMSwxLDE1LTE1djYwYTE1LDE1LDAsMSwxLTE1LTE1aDYwYTE1LDE1LDAsMSwxLTE1LDE1eiIgc3Ryb2tlPSIjRDcwIiBzdHJva2Utd2lkdGg9IjgiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg=='
      id='test'>

    <div id='test'>#</div>

  </body>

</html>

Обновление:

Ответ от ccprog сработал замечательно, но это доставило мне немного головной боливыработать правильное соотношение сторон.Вот пример правильных настроек, когда соотношение сторон не равно 1: 1 (как в примере):

  • Разрешение изображения: 544 x 400 (ширина x высота)
  • Соотношение сторон (ширина: высота): 544/400 = 1,36 => 1,36: 1 => 136: 100
  • Соотношение сторон (высота: ширина): 400/544 = 0,73529 ... => 74: 100

Полученные медиазапросы выглядят следующим образом:

media (min-aspect-ratio: 136/100) {
  .box {
     width: 136vh;
     height: 100vh;
  }
}

@media (max-aspect-ratio: 136/100) {
  .box {
     width: 100vw;
     height: 74vw;
  }
}

1 Ответ

0 голосов
/ 16 мая 2018

Если вы заранее знаете соотношение сторон, есть некоторые функции CSS, которые вы можете комбинировать.

  • a aspect-ratio Медиа-запрос может решить, будет ли размер экрана больше или меньше, чемсоотношение сторон изображения
  • в зависимости от этого, используйте vh единицы для широких экранов и vw единицы для маленьких, чтобы определить размер оберточного div с таким же соотношением сторон, как у изображения
  • , используйте flexмакет, чтобы расположить его в середине экрана, имитируя поведение поля просмотра SVG.

Затем вы можете расположить свой элемент в этом внешнем div.

В следующем примере используетсяВаше изображение с соотношением сторон 1/1.Для других значений вам придется заменить это в медиа-запросе и отрегулировать ширину для широких экранов и высоту для маленьких экранов, чтобы получить правильное соотношение.

Я выделил div-обертку синей рамкой дляпоказать эффект. 

body {
    overflow: hidden;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

img#test {
  position: absolute;
  height: 100%;
  width: 100%;
}

.box {
    border: 1px solid blue;
    box-sizing: border-box;
    position: relative;
}
.hash {
    position: absolute;
    left: 31%;
    top: 8%;
    color: #000;
    font-size: 50px;
}

@media (min-aspect-ratio: 1/1) {
    .box {
        width: 100vh;
        height: 100vh; /* stays constant for all ratios */
    }
}
@media (max-aspect-ratio: 1/1) {
    .box {
        width: 100vw; /* stays constant for all ratios */
        height: 100vw;
    }
}
<img src='data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAwIDEwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz4KICA8cGF0aCBkPSJNNjUsMjBhMTUsMTUsMCwxLDEsMTUsMTVoLTYwYTE1LDE1LDAsMSwxLDE1LTE1djYwYTE1LDE1LDAsMSwxLTE1LTE1aDYwYTE1LDE1LDAsMSwxLTE1LDE1eiIgc3Ryb2tlPSIjRDcwIiBzdHJva2Utd2lkdGg9IjgiIGZpbGw9Im5vbmUiLz4KPC9zdmc+Cg=='
  id='test'>
<div class="box">
    <div class="hash">#</div>
<div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...