svg viewBox странное поведение?

Question

Я пытаюсь понять, как работает svg viewBox, но код ниже ломает всю логику.

<svg width="100" height="100" viewBox="0 0 1 20">
    <circle cx="10" cy="10" r="10" fill="red"/>
</svg>

В моей реальности viewBox предназначен для определения области svg canvas для отображения в окне просмотра.Результатом этого кода должен быть левый самый маленький кусочек круга, центрированный по горизонтали с пробелами с обеих сторон, но хром и Firefox не следуют этой логике. Может кто-нибудь объяснить, как это работает?И извините за мой английский, я надеюсь, вы понимаете, что я пытаюсь сказать.

Answer 1

Проблемы здесь заключаются в том, что большая часть круга находится за пределами viewBox (его ширина составляет всего 1 единицу, а ширина круга составляет 20 единиц), а соотношение сторон viewBox отличается от соотношения сторон его контейнера.

По умолчанию для preserveAspectRatio поддерживается соотношение сторон, а не искажение формы, поэтому нам все же нужно нарисовать круг, а не эллипс. Поскольку область рисования является квадратной, то круг будет рисоваться в этой квадратной области, а поскольку высота области просмотра равна 20, у нас будет область 20 x 20, чтобы нарисовать круг, чтобы нарисовать круг.

Что мы делаем с шириной viewBox в 1 единицу? Как мы отображаем от 0-1 до 20 единиц? Нам нужно сохранить среднее значение viewBox, так что это 0.5.

Нам нужно решить эти уравнения тогда для x и y: (x + y) / 2 = 0.5 (оставьте центр одинаковым) и y - x = 20 (оставьте ширину такой же, как высота, чтобы сохранить аспект отношение)

Здесь делаем математику: x + y = 1 -> y - (1 - y) = 20 -> 2y - 1 = 20 -> y = 10,5 и x = -9,5.

Итак, мы собираемся отобразить 0 - 20 для высоты и -9,5 - 10,5 по ширине, что означает, что вы увидите примерно (но не совсем) полукруг. Вы на самом деле видите чуть больше половины круга.

Answer 2

Браузеры корректно отображают SVG.

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

В вашем случае вы попросили браузер центрировать самый левый край круга в области просмотра.Но для остальной части круга достаточно места, чтобы его можно было увидеть.

svg {
  background-color: linen;
}

<svg width="100" height="100" viewBox="0 0 1 20">
    <circle cx="10" cy="10" r="10" fill="red"/>
    <rect width="1" height="20" fill="none" stroke="black" stroke-width="0.3" stroke-dasharray="0.5 0.5"/>
</svg>