SVGViewElement: viewBox property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
TheviewBox read-only property of theSVGViewElement interface reflects theviewBox attribute of the given<view> element. It represents thex,y,width, andheight values defining the area to be used for theview'sviewBox.
Value
AnSVGAnimatedRect object.
Example
Given the following SVG, we can use theviewBox property to retrieve the dimensions of theviewBox for aview element:
html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <view viewBox="0 0 50 50"></view> <circle cx="100" cy="100" r="80" fill="blue" /></svg>We can access theviewBox attribute:
js
const view = document.querySelector("view");console.log(view.viewBox.baseVal); // output: DOMRect {x: 0, y: 0, width: 50, height: 50}Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__viewBox |