SVGPathElement: getTotalLength() method

Cú pháp

js

getTotalLength()

Tham số

Không có.

Giá trị trả về

Một số cho biết tổng độ dài của đường dẫn theo đơn vị người dùng.

Ví dụ

Lấy tổng độ dài của một `<path>`

Trong ví dụ này, chúng ta lấy tổng độ dài của hai đường dẫn: một đường thẳng cơ bản và một hình trái tim.

html

<svg width="200" height="100">
  <path
    id="heart"
    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 id="line" d="M 0,30 h100" stroke="black" />
</svg>

<pre id="log"></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;
}

js

const complexPath = document.getElementById("heart");
const basicPath = document.getElementById("line");

// Truy cập thuộc tính pathLength
const complexPathLength = complexPath.getTotalLength();
const basicPathLength = basicPath.getTotalLength();

// Giá trị cơ sở của thuộc tính pathLength
log(`complexPathLength: ${complexPathLength}`);
log(`basicPathLength: ${basicPathLength}`);