How to use getBoundingClientRect() Method In SVG
This approach involves getting the bounding box of the SVG path using getBoundingClientRect() method and then calculating the diagonal length of bounding box. The approach using getBoundingClientRect() method involves the obtaining the bounding box of SVG path element in which represents its position and size relative to viewport.
Syntax:
let path = document.querySelector('path');
let box = path.getBoundingClientRect();
Parameters:
- document.querySelector(‘path’): Selects the first <path> element in document.
- path.getBoundingClientRect(): Retrieves the bounding rectangle of selected <path> element in which represents its position and size relative to viewport.
Example: This approach involves the getting the bounding box of the SVG path using getBoundingClientRect() method and then calculating the diagonal length of bounding box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>The SVG Path Length</title>
</head>
<body>
<svg width="100" height="100">
<path d="M10 10 L90 90" stroke="black" />
</svg>
<div id="output"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
let path = document.querySelector('path');
let bbox = path.getBoundingClientRect();
let length = Math.sqrt(Math.pow(bbox.width,
2) + Math.pow(bbox.height, 2));
document.getElementById('output')
.innerText = 'Length of path: ' + length;
});
</script>
</body>
</html>
Output:
How to get the Length of the Path in SVG ?
The Scalable Vector Graphics (SVG) is a widely used the XML-based format for describing two-dimensional vector graphics. When working with the SVG paths in JavaScript we may need to determine the length of path for the various purposes such as the animation, drawing or interactive effects.
These are the following methods:
Table of Content
- Using getTotalLength() Method
- Using getBoundingClientRect() Method