SVGSymbolElement: свойство preserveAspectRatio

Базовая линия Широко доступно

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

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

Значение

Объект SVGAnimatedPreserveAspectRatio.

Примеры

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

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <defs>
    <symbol
      id="exampleSymbol"
      viewBox="0 0 100 100"
      preserveAspectRatio="xMinYMin meet">
      <circle cx="50" cy="50" r="50" fill="blue" />
    </symbol>
  </defs>
  <use href="#exampleSymbol" x="50" y="50" width="100" height="100" />
</svg>

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

const symbolElement = document.getElementById("exampleSymbol");

// Access the preserveAspectRatio property
const aspectRatio = symbolElement.preserveAspectRatio.baseVal;

console.log(aspectRatio.align); // Output: 2 (xMinYMin)
console.log(aspectRatio.meetOrSlice); // Output: 1 (meet)

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

Спецификация
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	1.5	≤12.1	3	18	4	≤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/SVGSymbolElement/preserveAspectRatio