SVGViewElement: свойство preserveAspectRatio

Базовая Широко поддерживается

Это функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с января 2020 года.

Свойство preserveAspectRatio только для чтения интерфейса SVGViewElement отражает атрибут preserveAspectRatio заданного элемента <view>. Оно определяет, как содержимое внутри view должно масштабироваться, чтобы поместиться в область просмотра, сохраняя при этом соотношение сторон.

Значение

Объект SVGAnimatedPreserveAspectRatio.

Пример

Учитывая следующий SVG, мы можем использовать свойство preserveAspectRatio для получения поведения масштабирования для элемента view:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <view id="view1" preserveAspectRatio="xMidYMid meet"></view>
  <circle cx="100" cy="100" r="80" fill="blue" />
</svg>

Мы можем получить доступ к атрибуту preserveAspectRatio:

const view = document.querySelector("view");

console.log(view.preserveAspectRatio.baseVal); // output: SVGPreserveAspectRatio {align: 1, meetOrSlice: 1}

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__preserveAspectRatio

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`preserveAspectRatio`	1	12	15	≤12.1	3	18	15	≤12.1	1	1.0	3

См. также

preserveAspectRatio

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGViewElement/preserveAspectRatio