SVGSVGElement: viewBox プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
viewBox は SVGSVGElement インターフェイスの読み取り専用プロパティで、<svg> 要素の viewBox 属性を SVGAnimatedRect として反映します。
このプロパティは、<svg> 要素の viewBox 属性を説明します。この属性は、<svg> 要素の x 座標、y 座標、幅、高さを定義するために使用する。SVGAnimatedRect.baseVal プロパティと SVGAnimatedRect.animVal プロパティは、どちらも SVGRect オブジェクトです。viewBox が定義されていません場合は null です。これらのオブジェクトの要素は、SVGSVGElement.x、SVGSVGElement.y、SVGSVGElement.width、SVGSVGElement.height プロパティとは異なる場合があります。これは、x、y、width、height 属性が viewBox 属性よりも優先されるためです。
内包されていない SVG 要素の場合、 CSS の x, y, width, height の各プロパティは要素のあらゆる属性よりも優先されますので、 viewBox によって定義された値は要素の外見に反映されない場合があります。
値
SVGAnimatedRect です。
例
以下の SVG 開始タグがあったとします。
html
<svg viewBox="-12 -18 200 300" x="5" y="5" height="400" width="600"></svg>
viewBox の値を受け取っていますが、 x, y, width, height の各プロパティとは異なっています。
js
const svg = document.querySelector("svg");
const vBox = svg.viewBox;
// SVGSVGElement viewBox プロパティ
console.dir(vBox); // SVGAnimatedRect { baseVal: SVGRect, animVal: SVGRect }
console.log(vBox.baseVal.x); // -12
console.log(vBox.baseVal.y); // -18
console.log(vBox.baseVal.width); // 200
console.log(vBox.baseVal.height); // 300
// その他の SVGSVGElement プロパティ
console.log(svg.x); // 5
console.log(svg.y); // 5
console.log(svg.width); // 400
console.log(svg.height); // 600
仕様書
| 仕様書 |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__viewBox |