SVGMarkerElement: 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 theSVGMarkerElement interface returns anSVGAnimatedRect object which contains the values set by theviewBox attribute on the<marker>.
Value
AnSVGAnimatedRect object. ThebaseVal property of this object returns anSVGRect object, from which can be returned thex andy co-ordinates, plus thewidth andheight of the<marker>viewBox attribute.
Examples
This example demonstrates how to return the value of thewidth set for theviewBox attribute of<marker>.
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <marker viewBox="0 0 10 10" refX="5" refY="5" preserveAspectRatio="xMidYMid meet" markerWidth="6" markerHeight="6" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" /> </marker> </defs></svg>js
const marker = document.getElementById("arrow");console.log(marker.viewBox.baseVal.width); // 10Specifications
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # __svg__SVGFitToViewBox__viewBox |