SVGPatternElement: 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 SVGPatternElement
interface reflects the viewBox
attribute of the given element. It represents the x
, y
, width
, and height
values defining the area to be used for the pattern'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 the pattern element:
html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="pattern1" width="10" height="10" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="25" fill="blue" />
</pattern>
</defs>
<rect x="0" y="0" width="100" height="100" fill="url(#pattern1)" />
</svg>
We can access the viewBox
attribute:
js
const pattern = document.querySelector("pattern");
console.log(pattern.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.