Как центрировать div на основе точки привязки вложенного элемента - PullRequest
Новая
       41

Как центрировать div на основе точки привязки вложенного элемента

0 голосов
/ 21 апреля 2019

У меня сложная SVG-графика, которая является интерактивной. На этом рисунке есть конкретный значок, скажем, это значок конкретного человека в инфографике. Кроме того, SVG имеет 2000x2000 пикселей. Это означает, что на рабочем столе (альбомная компоновка) ему нужно будет обрезать некоторые элементы сверху и снизу, чтобы разместить их на экране. А в мобильном (портретный режим) нужно будет обрезать некоторые с правой и левой стороны. Учитывая это, я хотел бы, чтобы SVG был сосредоточен на этом человеке, и обрезал верх / низ в ландшафтном режиме и обрезал влево / вправо в портретном режиме. Это решает две задачи:

  1. Изображение всегда сосредоточено на этом человеке.
  2. Изображение всегда полностью заполняет доступное пространство, независимо от того, является ли это альбомным или портретным режимом.

Хотите знать, как это сделать. Если это должно быть сделано с помощью JavaScript, или если это может быть сделано исключительно в CSS.

Кроме того, этот SVG не может быть загружен в фоновое изображение для CSS, так как он является интерактивным. Это просто SVG.

Чтобы упростить задачу, можно сказать, что у нас есть <div> с кучей вложенных элементов. Мы хотим, чтобы этот div центрировался на основе вложенного элемента, который он содержит. Похоже, для этого требуется какой-то JavaScript. То есть, при изменении размера окна или ориентации, получите смещение элемента, который мы хотим отцентрировать, затем выяснить, как настроить его для центрирования, а затем выяснить, как настроить parent.parent.parent ... и т. Д. пока вы не доберетесь до основного div-оболочки, который вы хотите закрепить в этой точке. Тогда мы просто переместим этот div на сколько угодно. Похоже, для этого требуется JavaScript, но я не знаю, может быть, есть способ сделать это простым CSS.

Хотите знать, можно ли продемонстрировать, как это сделать, в JS или CSS?

Вот что у меня есть. 

// the box should be centered in the screen
<!doctype html>
<html>
  <head>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
      }
      
      svg {
        display: block;
      }

      @media (orientation: landscape) {
        svg {
          width: 100vw;
          height: auto;
        }
      }

      @media (orientation: portrait) {
        svg {
          width: auto;
          height: 100vh;
        }
      }
    </style>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000">
      <rect width='100' height='100' x="1000" y="1000" />
    </svg>
  </body>
</html>

Обратите внимание, что (https://imgur.com/PnugEin) на мобильном телефоне не заполняет пространство должным образом. Черный ящик всегда должен быть в центре, а весь SVG должен масштабироваться так, чтобы он охватывал весь видовой экран, сохраняя при этом черный ящик в центре.

Обновление : Хорошо, разобрался с проблемой "заполнения окна просмотра", добавив медиа-запросы. Последнее, что нужно сделать, это отцентрировать его на основе прямоугольника / точки привязки.

Ответы [ 2 ]

0 голосов
/ 22 апреля 2019

Попробуйте это: 

svg[viewBox="0 0 2000 2000"] {
    /* center the SVG in the viewport */
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -50%;
    right: -50%;
    margin: auto;

    /* offsets from center of SVG. In the example given, it's (100/2)/2000 and then multiply by 100 because it's a percentage */
    -webkit-transform: translate(-2.5%,-2.5%);
    transform: translate(-2.5%,-2.5%);
}
0 голосов
/ 21 апреля 2019

Чтобы отцентрировать прямоугольник, необходимо сместить его на половину width или height.В этом случае вам может понадобиться перевести ваш прямоугольник.Сделайте это: 

html,
body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
	height: 100%
}
<svg width="100%" height="100%">
	<rect width='100%' height='100%' x="0" y="0" fill="yellow" />
	<rect width='100' height='100' x="50%" y="50%" transform="translate(-50,-50)" fill="green" />
</svg>
...