SVGSymbolElement: 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.
The viewBox read-only property of the SVGSymbolElement interface reflects the viewBox attribute of the given <symbol> element.
Value
An SVGAnimatedRect object.
Examples
Accessing the viewBox Property
html
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <defs> <symbol id="exampleSymbol" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="50" fill="blue" /> </symbol> </defs> <use href="#exampleSymbol" x="50" y="50" width="100" height="100" /> </svg> js
const symbolElement = document.getElementById("exampleSymbol"); // Access the viewBox property const viewBox = symbolElement.viewBox.baseVal; console.log(viewBox.x); // Output: 0 console.log(viewBox.y); // Output: 0 console.log(viewBox.width); // Output: 100 console.log(viewBox.height); // Output: 100 Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__viewBox |