> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# วัดความยาวพาธ SVG โดยไม่สับสนสเกล

> วัดพาธ SVG ในหน่วยผู้ใช้ของเบราว์เซอร์ คำนึงถึงการแปลงและขนาดที่ระบุ แยกผลรวมเส้นขอบจากการปรับเทียบ pathLength หรือระยะเดินเครื่อง

Source: https://perfectvector.com/th/blog/measure-svg-path-length

Language: th
Author: Irene Kim
Published: 2026-10-16T08:00:00+09:00

เพื่อวัดพาธ SVG เรียก `getTotalLength()` บนองค์ประกอบรูปทรง แล้วระบุระบบพิกัดเบื้องหลังตัวเลข เบราว์เซอร์คืนความยาวในหน่วยผู้ใช้ ตัวเลขนั้นไม่ใช่ความยาวที่แสดง ค่ามิลลิเมตร หรือระยะเดินเครื่องโดยอัตโนมัติ

เช่น เส้นทแยงต้นฉบับของเรายาว 50 หน่วยผู้ใช้ สเกลเท่ากันทำความยาวในพื้นที่รากเป็นสองเท่าคือ 100 แต่สเกลเฉพาะแนวนอนทำให้ประมาณ 72.111 ผล API เฉพาะที่ยังเป็น 50 ทั้งสองกรณี ตัวเลขตอบคำถามวัดคนละแบบ

## วัดส่วนที่ทราบก่อนวัดงานภาพ

คุณต้องมี SVG ที่เข้าถึงรูปทรงได้และเบราว์เซอร์ที่รัน SVG อินไลน์กับ JavaScript ทำงานบนสำเนา ตัดสินว่าต้องการรูปทรงเฉพาะที่ รูปทรงหลังแปลง หรือความยาวตามขนาดกายภาพที่กำหนดก่อนบันทึกผล

พาธเก็บเส้นทางด้วยคำสั่งย้าย เส้นตรง โค้ง และปิด หน่วยผู้ใช้อยู่ในระบบพิกัด SVG อย่าเรียกพิกเซลหรือมิลลิเมตรโดยไม่ตรวจการแมป [เอกสาร `getTotalLength()` ของ MDN](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) นิยามผลเป็นความยาวพาธที่เบราว์เซอร์คำนวณในหน่วยผู้ใช้

HTML ครบนี้วัดส่วนเส้นตรง บันทึกเป็นไฟล์ HTML แล้วเปิดในเบราว์เซอร์:

```html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG length control</title>
<svg width="240" height="240" viewBox="0 0 120 120">
  <path id="route" d="M10 10 L40 50"
        fill="none" stroke="black" />
</svg>
<pre id="result"></pre>
<script>
  const route = document.querySelector("#route");
  document.querySelector("#result").textContent =
    route.getTotalLength() + " local user units";
</script>
</html>
```

การเปลี่ยนแนวนอนคือ 30 แนวตั้ง 40 ความยาวที่คาดจึงเป็น `sqrt(30² + 40²) = 50` ผลที่แสดงให้ตัวควบคุมที่ทราบก่อนเชื่อเส้นโค้งซับซ้อนหรือสัญลักษณ์นำเข้า วิวพอร์ต 240 พิกเซลไม่เปลี่ยนผลเฉพาะที่เป็น 100 หน่วยผู้ใช้

ในตัวอย่างเบราว์เซอร์ เราประกาศค่าคลาดเคลื่อน 0.01 หน่วยผู้ใช้ ตัวควบคุมหนึ่งในสี่วงกลมรัศมี 10 มีความยาวเชิงวิเคราะห์ `5π` ประมาณ 15.708 เบราว์เซอร์ทดสอบรายงาน Chrome 155 และคืนประมาณ 15.7102 ซึ่งอยู่ในค่าคลาดเคลื่อน เบราว์เซอร์คำนวณความยาวโค้งเชิงตัวเลข จึงเก็บความแม่นยำที่มีประโยชน์และเทียบค่าคลาดเคลื่อนเหมาะสม แทนเรียกร้องทศนิยมสุดท้ายเหมือนกันทุกระบบ

## แยกความยาวเฉพาะที่กับหลังแปลง

สองตัวอย่างถัดไปเก็บ `d="M10 10 L40 50"` เดิมและเพิ่มการแปลง:

| ส่วนเส้นเดิม | ความยาว API เฉพาะที่ | ความยาวหลังการแปลงที่ระบุ ในหน่วยผู้ใช้ SVG ราก |
| ------------ | -------------------- | ----------------------------------------------- |
| ไม่แปลง      | 50                   | 50                                              |
| `scale(2)`   | 50                   | 100                                             |
| `scale(2 1)` | 50                   | ประมาณ 72.111                                   |

สเกลเท่ากันคูณทุกทิศด้วยขนาดเดียว จึงคูณความยาวเฉพาะที่ด้วย 2 ได้ในแถวสอง สเกลไม่เท่ากันจัดการแต่ละทิศต่างกัน ในแถวสาม ส่วนเส้นที่เปลี่ยนกว้าง 60 หน่วยและลง 40 หน่วย คือ `sqrt(60² + 40²)` ไม่ใช่ `50 × 2`

[ข้อกำหนดระบบพิกัด SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) อธิบายว่าการแปลงและการแมป `viewBox` สร้างระบบพิกัดอย่างไร ระบุพื้นที่เป้าหมาย ความยาวในหน่วยผู้ใช้ SVG รากยังต่างจากพิกเซล CSS ในวิวพอร์ต

สำหรับส่วนเส้นตรงที่ทราบนี้ เราแมปจุดปลายเข้าในพื้นที่ผู้ใช้ของ SVG ราก:

```js
const root = route.ownerSVGElement;
const relative = root.getCTM().inverse().multiply(route.getCTM());
const a = new DOMPoint(10, 10).matrixTransform(relative);
const b = new DOMPoint(40, 50).matrixTransform(relative);
const transformedLength = Math.hypot(b.x - a.x, b.y - a.y);
```

เมทริกซ์รากผกผันลบการแมปวิวพอร์ตของราก เมทริกซ์สัมพัทธ์เก็บการแปลงพาธเข้าสู่พื้นที่ผู้ใช้ราก โค้ดสั้นนี้สมมติ SVG ที่ติดกับเอกสาร มีเมทริกซ์ผกผันได้ และส่วนเส้นตรงเฉพาะข้างต้น จุดปลายทราบจากต้นฉบับพาธ

สำหรับโค้ง ระยะระหว่างปลายเป็นเพียงเส้นคอร์ด หากวัดโค้งที่แปลงทั่วไป ให้แปลงรูปทรงสู่ระบบพิกัดเป้าหมายแล้ววัด หรือใช้การประมาณเชิงตัวเลขควบคุมที่เก็บเส้นขอบแยก อย่าใช้สูตรจุดปลายกับเส้นโค้งหรือคูณรูปทรงที่แปลงไม่เท่ากันด้วยตัวคูณสเกลเดาค่าเดียว

![ตัวควบคุมวัดในเบราว์เซอร์จริง แสดงสเกลเท่ากันและไม่เท่ากัน สัญลักษณ์สองเส้นขอบ ความยาวพาธเฉพาะที่ และการคำนวณมิลลิเมตรตามที่ระบุ](https://perfectvector.com/blog/measure-svg-path-length/path-length-controls.webp)

*รูปทรงที่สร้างเองพร้อมผลเบราว์เซอร์จริง แยกป้ายความยาวเฉพาะที่ ความยาวหลังแปลงในพื้นที่ราก และมิลลิเมตรตามขนาดระบุที่คำนวณ ไม่ได้แสดงการทดสอบแอปปลายทางหรือผลิตจริง*

## แปลงมิลลิเมตรหลังตรึงการแมปเท่านั้น

เอกสารสัญลักษณ์ต้นฉบับประกาศ `width="50mm"`, `height="50mm"` และ `viewBox="0 0 100 100"` เมื่อแมปเท่ากันตามตั้งใจ คือ 0.5 มม. ต่อหน่วยผู้ใช้ ความกว้างนอกสัญลักษณ์กิน 80 หน่วย จึงกว้างตามระบุ 40 มม.

เส้นขอบสองเส้นรวม 380 หน่วยผู้ใช้ ที่สเกลประกาศ:

```text
50 mm / 100 user units = 0.5 mm per user unit
380 user units × 0.5 mm per user unit = 190 mm of contours
```

นี่เป็นการคำนวณจากขนาดที่สร้าง ไม่ได้วัดวัตถุพิมพ์ ตรวจจอด้วยไม้บรรทัด หรือทดสอบขนาดนำเข้าของตัวแก้ไข CSS ทับค่าวิวพอร์ต SVG ได้ และปลายทางอาจเปลี่ยนสเกล ยืนยันขนาดส่งมอบในปลายทางก่อนถือการคำนวณตามระบุเป็นค่าผลิต

ความกว้างเอกสารทั้งหมดยังต่างจากความกว้างงานข้างใน หากตั้งเฉพาะความกว้างนอกสัญลักษณ์เป็น 50 มม. แทน ความกว้าง 80 หน่วยให้ตัวคูณอื่นคือ `50 / 80 = 0.625 mm per unit` 380 หน่วยเดิมจะเป็นเส้นขอบ 237.5 มม. บันทึกว่าตั้งความกว้างใด ใช้[คู่มือกรอบขอบเขต SVG](https://perfectvector.com/th/blog/svg-bounding-box) เมื่อต้องตรวจขอบเขตก่อน

## `pathLength` ปรับเทียบระยะโดยไม่เปลี่ยนรูปทรง

เรายังทำสำเนาส่วนเส้นเดิม 50 หน่วยพร้อม `pathLength="1"` ผล `getTotalLength()` ยังเป็น 50 แอตทริบิวต์ไม่เปลี่ยนจุดปลายหรือทำความยาวรูปทรงเป็นหนึ่งหน่วย

[ข้อกำหนด API รูปทรง SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) ระบุชัดว่าไม่รวม `pathLength` ในผลคำนวณ [เอกสาร `pathLength` ของ MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) อธิบายการปรับเทียบพฤติกรรมระยะตามพาธ รวมเส้นประ มีประโยชน์เมื่อทำเอฟเฟกต์ด้วยระยะปรับมาตรฐาน แต่ไม่แทนการวัดเส้นทางพื้นฐาน

สำหรับเผยภาพวาดทีละเส้น ดู[คู่มือแอนิเมชันเส้นขอบ SVG](https://perfectvector.com/th/blog/svg-stroke-animation) แยกค่าขีดประที่ปรับเทียบจากความยาวรูปทรงที่บันทึกในการตรวจงาน

## รวมเส้นขอบโดยไม่เรียกผลรวมว่าระยะเดินเครื่อง

สัญลักษณ์มีขอบนอกกับรูข้าวหลามตัด พาธผสมเดิมเก็บเส้นขอบปิดทั้งสอง:

```xml
<path fill-rule="evenodd"
      d="M10 10 H90 V60 L50 90 L10 60 Z
         M50 25 L65 45 L50 65 L35 45 Z" />
```

ขอบนอกยาว 280 หน่วยและใน 100 พาธผสมคืน 380 วัดเป็นพาธแยกแล้วบวกก็ได้ 380 [ข้อกำหนดพาธ SVG](https://www.w3.org/TR/SVG2/paths.html) แยกพาธย่อยใหม่จากส่วนเส้นและส่วนปิด การย้ายไปที่รูไม่เพิ่มส่วนเชื่อมที่วาดระหว่างเส้นขอบ

ผลรวมอธิบายรูปทรงที่เลือกเก็บ รอยเส้นหนาที่ลากอาจมีเส้นทางขอบสองด้าน พาธซ้ำอาจเพิ่มรูปทรงอีกครั้ง สัญลักษณ์อาจมีขอบภายในเล็กที่ไม่ตั้งใจประมวลผล วัดวัตถุและเส้นขอบที่ต้องการจริงและตรวจก่อนตีความยอดรวม

ระยะเดินเครื่องเป็นอีกผล งานอาจมีการเดินระหว่างเส้นขอบ การเลือกลำดับ การผ่านซ้ำ หรือการเปลี่ยนพาธเฉพาะปลายทาง ผลรวมเบราว์เซอร์ไม่ยืนยันสิ่งเหล่านั้น และไม่ให้เวลาตัด การใช้วัสดุ หรือผลเครื่องสำเร็จ หากต้องการเส้นกลางเดียวจากภาพสแกน [คู่มือ SVG เส้นเดียว](https://perfectvector.com/th/blog/drawing-to-single-line-svg) จัดการงานสร้างรูปทรงที่ต่างกันนั้น

## บันทึกการวัดพร้อมสมมติฐาน

1. ระบุรูปทรงที่เลือกและตรวจว่ามีหลายเส้นขอบหรือซ้ำหรือไม่
2. วัดตัวควบคุมที่ทราบและพาธที่เลือกในหน่วยผู้ใช้เฉพาะที่
3. บันทึกการแปลงและพื้นที่พิกัดที่ต้องใช้สำหรับผล
4. กำหนดขนาดเอกสารหรืองานที่ตั้งใจก่อนแปลงหน่วย
5. แยกป้ายค่าปรับเทียบ ผลรวมเส้นขอบ และการวัดปลายทาง

หากตัวควบคุมตรงที่ทราบไม่คืน 50 ภายในค่าคลาดเคลื่อนที่ประกาศ ตรวจองค์ประกอบที่เลือกและข้อมูลต้นฉบับเปลี่ยนหรือไม่ หากผลเฉพาะที่ตรงแต่ขนาดตามระบุต่าง ตรวจวิวพอร์ต การแปลง และสเกลปลายทางก่อนแก้พาธ ทศนิยมเพิ่มไม่แก้การแมปพิกัดผิด

การตรวจรูปทรงไฟล์เสร็จเมื่อผู้อื่นทำซ้ำผลรวมเส้นขอบที่เลือกและเข้าใจหน่วย การแมป ค่าคลาดเคลื่อน และวัตถุรวมได้ ตัวอย่างเบราว์เซอร์ที่เก็บไว้ผ่านตัวควบคุมตัวเลขเหล่านั้น ไม่ได้ทดสอบนำเข้าตัวแก้ไข ระยะเดินเครื่อง หรือขนาดกายภาพ

หากต้นฉบับเดียวเป็นบิตแมป [ขั้นตอนภาพเป็นเวกเตอร์ของ PerfectVector](https://perfectvector.com/th/image-to-vector) สร้างรูปทรง SVG แก้ไขได้ก่อนได้ ตรวจเส้นขอบและรูที่คืนมา แล้ววัดรูปทรงที่เลือกด้วยสเกลชัด การแปลงเวกเตอร์สร้างพาธจากพิกเซล ไม่คืนขนาดกายภาพที่หาย อนุมานเส้นกลาง หรือให้ระยะเดินเครื่อง เก็บเวกเตอร์ต้นฉบับหากมี สัญลักษณ์ในบทความสร้างโดยตรง ไม่ได้ลากเส้น

## คำถามที่พบบ่อย

**`getTotalLength()` คืนพิกเซลหรือมิลลิเมตร?**
คืนความยาวที่เบราว์เซอร์คำนวณในหน่วยผู้ใช้ SVG กำหนดการแมปพิกัดและขนาดก่อนแสดงผลในพิกเซลวิวพอร์ตหรือหน่วยกายภาพตามระบุ

**ทำไมสเกลพาธแล้วผล API เฉพาะที่ไม่เปลี่ยน?**
เส้นทางเฉพาะที่ที่เก็บกับรูปหลังแปลงอยู่ในพื้นที่พิกัดต่างกัน ส่วนเส้นข้อมูลเดียวกันของเราคืน 50 เฉพาะที่หลังสเกลทั้งเท่ากันและไม่เท่ากัน ความยาวหลังแปลงเป็น 100 และประมาณ 72.111 หน่วย SVG ราก

**`pathLength="1"` หมายถึงพาธยาวหนึ่งหน่วยหรือไม่?**
ให้ค่าปรับเทียบสำหรับพฤติกรรมระยะตามพาธที่รองรับ ความยาวคำนวณ API รูปทรงไม่ใช้แอตทริบิวต์นั้น ตัวควบคุม 50 หน่วยของเรายังคืน 50

**ประมาณเวลาตัดจากผลรวมเส้นขอบได้หรือไม่?**
ผลรวมอย่างเดียวไม่พอ ไม่ยืนยันเส้นทางที่ปลายทางสร้าง การเดินระหว่างขอบ การผ่านซ้ำ การเปลี่ยนความเร็ว หรือพฤติกรรมวัสดุ ใช้การตรวจงานปลายทางจริงกับการทดสอบผลิตที่เหมาะสม

## แหล่งข้อมูล

1. [MDN: SVGGeometryElement.getTotalLength()](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) — ความยาวพาธคำนวณโดยเบราว์เซอร์ในหน่วยผู้ใช้
2. [W3C API รูปทรง SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) — ความยาวคำนวณและความเป็นอิสระจากการปรับเทียบ `pathLength`
3. [W3C ระบบพิกัด SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — วิวพอร์ต `viewBox` และการแมปแปลง
4. [MDN: pathLength](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) — การปรับเทียบพฤติกรรมระยะตามพาธ
5. [W3C พาธ SVG](https://www.w3.org/TR/SVG2/paths.html) — พาธย่อย ส่วนเส้นที่วาด และคำสั่งปิด

***

ต้องการรูปทรงแก้ไขได้จากบิตแมปก่อนวัดหรือไม่? [สร้าง SVG ตัวเลือก](https://perfectvector.com/th/image-to-vector) ตรวจว่ามีเส้นขอบใด และตั้งสเกลที่ต้องการก่อนบันทึกความยาว

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/measure-svg-path-length)
- [เส้นรอบรูปจุดใน SVG: ควบคุมระยะเส้นประและปลายมน](https://perfectvector.com/th/blog/svg-dotted-outlines.md)
- [หมุด SVG ใน Leaflet: จัดปลายด้วย iconAnchor](https://perfectvector.com/th/blog/leaflet-svg-marker-anchor.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)