SVGPathElement: getTotalLength() method

ThegetTotalLength() method of theSVGPathElement interface returns the user agent's computed value for the total length of the path in user units.

Syntax

getTotalLength()

Parameters

None.

Return value

A number indicating the total length of the path in user units.

Examples

Getting the total length of a`<path>`

In this example, we get the total length of two paths: a basic line and a heart shape.

html

<svg width="200" height="100">  <path       fill="red"    d="M 10,30           A 20,20 0,0,1 50,30           A 20,20 0,0,1 90,30           Q 90,60 50,90           Q 10,60 10,30 z" />  <path d="M 0,30 h100" stroke="black" /></svg>

<pre></pre>

#log {  height: 70px;  overflow: scroll;  padding: 0.5rem;  border: 1px solid black;}

const logElement = document.querySelector("#log");function log(text) {  logElement.innerText = `${logElement.innerText}${text}\n`;  logElement.scrollTop = logElement.scrollHeight;}

const complexPath = document.getElementById("heart");const basicPath = document.getElementById("line");// Access the pathLength propertyconst complexPathLength = complexPath.getTotalLength();const basicPathLength = basicPath.getTotalLength();// The base value of the pathLength attributelog(`complexPathLength: ${complexPathLength}`);log(`basicPathLength: ${basicPathLength}`);