Сохранить соотношение viewBox при изменении размера окна

Question

Я хочу сохранить соотношение, когда окно браузера изменилось, поэтому viewBox всегда имеет размер экрана, но он уменьшает масштаб viewBox, когда я пытаюсь код ниже.Может ли кто-нибудь помочь мне в дальнейшем?

viewPort.setAttribute("width", screen.width);
viewPort.setAttribute("height", screen.height);
viewPort.setAttribute("viewBox","0 0 "+(screen.width-(screen.width+window.innerWidth))+" "+(screen.height-(screen.height+window.innerHeight)));

Answer 1

Ваши требования не ясны.Я думаю, вы можете быть смущены терминологией и тем, что на самом деле делает viewBox.

• Viewport относится к размеру элемента <svg> настр.Иногда называют холст.Его размер задается атрибутами width и height.

• viewBox описывает границы содержимого SVG.Его цель - сообщить рендереру, где находится весь контент.Средство визуализации использует эти размеры, чтобы определить, как масштабировать содержимое, чтобы оно соответствовало области просмотра.

Вы хотите, чтобы размер SVG точно совпадал с размером окна браузера?Если это так, то все, что вам нужно сделать, это:

viewPort.setAttribute("width", window.innerWidth);
viewPort.setAttribute("height", window.innerHeight);

Вам не нужно viewBox вообще.SVG не будет масштабироваться, но он будет соответствовать размеру окна браузера.

Однако, если вы хотите, чтобы ваш SVG масштабировался, чтобы соответствовать окну, тогда вам нужно иметь viewBox.Но viewBox должен быть настроен на размер вашего SVG содержимого , а не SVG canvas / viewport.

Обычно viewBox будет постоянным .Вы не меняете его, когда размер браузера изменяется.

В приведенном ниже примере я установил viewBox в соответствии с положением и размером элемента эллипса.Я добавил фиолетовый прямоугольник для представления фактических размеров viewBox.Обратите внимание, что область viewBox увеличивается или уменьшается по мере необходимости, чтобы соответствовать окну (и окну просмотра).По умолчанию он масштабируется, чтобы полностью поместиться в окне просмотра.Но вы можете изменить это поведение с помощью атрибута preserveAspectRatio.

var viewPort = document.getElementById("mysvg");

function setViewportSize() {
  viewPort.setAttribute("width", window.innerWidth);
  viewPort.setAttribute("height", window.innerHeight);
}

// Update SVG size when browser is resized
window.addEventListener("resize", setViewportSize);

// Set initial SVG size
setViewportSize();

html, body {
  margin: 0;
  overflow: hidden;
}

svg {
  background-color: linen;
}

<svg id="mysvg" viewBox="0 0 200 100">
  <rect width="100%" height="100" fill="rebeccapurple"/><!-- rect the same size as the viewBox -->
  <ellipse cx="100" cy="50" rx="100" ry="50"/>
</svg>

На самом деле вам вообще не нужен слушатель изменения размера.Вы можете сделать это только с помощью CSS.

html, body {
  margin: 0;
  overflow: hidden;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: linen;
}

<svg id="mysvg" viewBox="0 0 200 100">
  <rect width="100%" height="100" fill="rebeccapurple"/><!-- rect the same size as the viewBox -->
  <ellipse cx="100" cy="50" rx="100" ry="50"/>
</svg>