SVGPatternElement: viewBox property - Web APIs | MDN
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 |