SVGSVGElement: preserveAspectRatio プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

preserveAspectRatio は SVGSVGElement インターフェイスの読み取り専用プロパティで、指定された要素の preserveAspectRatio 属性を反映します。これは、SVG 要素のコンテンツが指定された空間に収まるよう、アスペクト比を維持しながらどのように変倍されるべきかを定義します。

値

SVGAnimatedPreserveAspectRatio オブジェクトです。

例

この SVG において、preserveAspectRatio プロパティを使用することで、SVG 要素の変倍動作を取得できます。

html

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

preserveAspectRatio 属性にアクセスできます。

const svgElement = document.querySelector("svg");

console.log(svgElement.preserveAspectRatio.baseVal); // 出力: SVGPreserveAspectRatio {align: 1, meetOrSlice: 1}