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 January 2020.
The viewBox
read-only property of the SVGViewElement
interface reflects the viewBox
attribute of the given <view>
element. It represents the x
, y
, width
, and height
values defining the area to be used for the view
's viewBox
.
Value
An SVGAnimatedRect
object.
Example
Given the following SVG, we can use the viewBox
property to retrieve the dimensions of the viewBox
for a view
element:
html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<view id="view1" viewBox="0 0 50 50"></view>
<circle cx="100" cy="100" r="80" fill="blue" />
</svg>
We can access the viewBox
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 |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
viewBox |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.