preserveAspectRatio, похоже, не меняет изображение SVG

Question

Я читал несколько учебных пособий онлайн об атрибуте viewBox и соотношении сторон, и я в замешательстве.

В приведенном ниже примере у меня есть первый пример, где и viewPort, и viewBox имеют соотношение сторон5:1.Затем я изменил атрибут viewBox на следующем изображении, чтобы он был 2:1, тогда как область просмотра 5:1

<svg width="500" height="100" viewBox="0 0 500 10" >
  <circle r="25" cx="30" cy="30" fill="#f00" />
  <rect x="0" y="0" width="60" height="60" stroke="blue" stroke-width="2" style="fill: transparent"></rect>
</svg>

<svg width="500" height="100" viewBox="0 0 50 10" preserveAspectRatio="xMinYMin meet">
  <circle r="25" cx="30" cy="30" fill="#f00" />
  <rect x="0" y="0" width="60" height="60" stroke="blue" stroke-width="2" style="fill: transparent"></rect>
</svg>

Я сделал соотношение сторон 2:1 и добавил preserveAspectRatio="xMinYMin meet", который, кажется, ничего не делает.

Почему preserveAspectRatio="xMinYMin meet" ничего не сделал?

Answer 1

Ваш расчет AR неверен.

Первый SVG имеет ширину, установленную на 500 , высоту на 100 и атрибут viewBox, установленный на 00 500 10 .Это означает, что вдоль оси Y каждая единица координат будет соответствовать 10 пикселям, но вдоль оси X каждая единица координат будет соответствовать только 1 пикселю.Как вы можете видеть, соотношение сторон по оси X равно 500/500 = 1 , а по оси Y - 100/10 = 10 .Соотношение сторон для первого SVG равно (1,10)

Второй SVG имеет ширину, установленную на 500 , высоту на 100 и атрибут viewBox, установленный на 00 50 10 .Как вы можете видеть, соотношение сторон по оси X составляет 500/50 = 10 , а по оси Y - 100/10 = 10 .Это означает, что вдоль оси x и оси y каждая единица координат будет соответствовать 10 пикселям.Таким образом, форматное соотношение для второго SVG равно (10,10).

Если установлено preserveAspectRatio: xMinYMin meet, поле просмотра масштабируется в соответствии с меньшим из двух форматных соотношений. Источник

Но во втором SVG-коде код не работает, потому что соотношения сторон на обеих осях одинаковы (10,10).

Чтобы попробоватькак работает код, добавьте его в первый SVG, который имеет разные пропорции.

<h2>SVG does not have preserveAspectRatio option</h2>
<svg width="500" height="100" viewBox="0 0 500 10" >
  <circle r="25" cx="30" cy="30" fill="#f00" />
  <rect x="0" y="0" width="60" height="60" stroke="blue" stroke-width="2" style="fill: transparent"></rect>
</svg>

<h2>SVG have xMinYMin meet</h2>
<svg width="500" height="100" viewBox="0 0 500 10" preserveAspectRatio="xMinYMin meet">
  <circle r="25" cx="30" cy="30" fill="#f00" />
  <rect x="0" y="0" width="60" height="60" stroke="blue" stroke-width="2" style="fill: transparent"></rect>
</svg>

Answer 2

Растяжение не происходит, так как в обоих примерах одинаковое фиксированное значение окна просмотра viewport - (width = "500" height = "100")

Необходимо удалить фиксированные значения viewport - width = "500" `` height = "100"

Если viewport не указано, то значение окна браузера устанавливается на 100%.
Если preserveAspectRatio не указано, по умолчанию используется значение preserveAspectRatio = xMidYMid

.container
{
width:100%;
height:100%;
}

<div class="container">
<svg viewBox="0 0 500 100" >
  <circle r="25" cx="30" cy="30" fill="#f00" />
  <rect x="0" y="0" width="60" height="60" stroke="blue" stroke-width="2" style="fill: transparent"></rect>
</svg>

<h2>Yes stretching</h2>
<svg viewBox="0 0 50 100">
  <circle r="25" cx="30" cy="30" fill="#f00" />
  <rect x="0" y="0" width="60" height="60" stroke="blue" stroke-width="2" style="fill: transparent"></rect>
</svg>
</div>

Для адаптивности вы также можете указать viewport в процентах width = "50%" height = "50%"