> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Ukur Panjang Jalur SVG Tanpa Keliru Skala
> Ukur jalur SVG dalam satuan pengguna, perhitungkan transformasi dan ukuran nominal, serta bedakan total kontur, kalibrasi pathLength, dan gerak mesin.
Source: https://perfectvector.com/id/blog/measure-svg-path-length
Language: id
Author: Irene Kim
Published: 2026-10-16T08:00:00+09:00
Untuk mengukur jalur SVG, panggil `getTotalLength()` pada elemen geometri, lalu identifikasi sistem koordinat di balik angkanya. Browser mengembalikan panjang dalam satuan pengguna. Angka tersebut tidak otomatis merupakan panjang tampilan, ukuran milimeter, atau jarak tempuh mesin.
Misalnya, diagonal asli kami memiliki panjang 50 satuan pengguna. Skala seragam menggandakan panjangnya dalam ruang akar menjadi 100, sedangkan penskalaan hanya pada arah horizontal menjadikannya sekitar 72.111. Hasil API lokal tetap 50 dalam kedua kasus. Angka tersebut menjawab pertanyaan pengukuran yang berbeda.
## Ukur segmen yang diketahui sebelum mengukur ilustrasi
Anda membutuhkan SVG dengan geometri yang dapat diakses dan browser yang menjalankan SVG inline serta JavaScript. Kerjakan salinan ilustrasi. Tentukan apakah Anda membutuhkan geometri lokal, geometri hasil transformasi, atau panjang pada ukuran fisik tertentu sebelum mencatat hasil.
Jalur menyimpan rute menggunakan perintah seperti pindah, garis, kurva, dan tutup. Satuan pengguna termasuk dalam sistem koordinat SVG itu; jangan menamainya piksel atau milimeter tanpa memeriksa pemetaan. [Referensi `getTotalLength()` MDN](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) mendefinisikan hasil sebagai panjang jalur yang dihitung browser dalam satuan pengguna.
Contoh HTML lengkap ini mengukur segmen lurus. Simpan sebagai berkas HTML dan buka dalam browser:
```html
SVG length control
```
Perubahan horizontalnya 30 dan vertikalnya 40, sehingga panjang yang diharapkan adalah `sqrt(30² + 40²) = 50`. Hasil tampilan menyediakan kontrol yang diketahui sebelum Anda mempercayai kurva kompleks atau lambang hasil impor. Viewport 240 piksel tidak mengubah hasil lokal itu menjadi 100 satuan pengguna.
Dalam contoh browser kami, toleransi ditetapkan sebesar 0.01 satuan pengguna. Kontrol seperempat lingkaran dengan radius 10 memiliki panjang analitis `5π`, sekitar 15.708. Browser pengujian melaporkan Chrome 155 dan mengembalikan sekitar 15.7102, dalam toleransi tersebut. Browser menghitung panjang kurva secara numerik, jadi pertahankan presisi yang berguna dan bandingkan terhadap toleransi yang sesuai, bukan menuntut digit desimal akhir identik dari setiap implementasi.
## Pisahkan panjang lokal dan hasil transformasi
Dua spesimen berikut mempertahankan `d="M10 10 L40 50"` yang sama dan menambahkan transformasi:
| Segmen asli | Panjang API lokal | Panjang setelah transformasi yang disebutkan, dalam satuan pengguna SVG akar |
| ------------------ | ----------------- | ---------------------------------------------------------------------------- |
| Tanpa transformasi | 50 | 50 |
| `scale(2)` | 50 | 100 |
| `scale(2 1)` | 50 | Sekitar 72.111 |
Penskalaan seragam mengalikan setiap arah dengan besar faktor yang sama, sehingga mengalikan panjang lokal dengan 2 berlaku untuk baris kedua. Penskalaan tidak seragam memperlakukan arah secara berbeda. Pada baris ketiga, segmen berubah menjadi 60 satuan mendatar dan 40 ke bawah: `sqrt(60² + 40²)`, bukan `50 × 2`.
[Spesifikasi sistem koordinat SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) menjelaskan bagaimana transformasi dan pemetaan `viewBox` membentuk sistem koordinat. Sebutkan ruang tujuan Anda. Panjang dalam satuan pengguna SVG akar tetap berbeda dari piksel CSS dalam viewport.
Untuk segmen lurus yang diketahui ini, kami memetakan titik ujungnya ke ruang pengguna SVG akar:
```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);
```
Matriks akar invers menghilangkan pemetaan viewport akar; matriks relatif mempertahankan transformasi jalur ke ruang pengguna akar. Potongan ini mengasumsikan SVG yang terpasang pada dokumen dengan matriks yang dapat diinvers dan segmen lurus tertentu di atas. Titik ujungnya diketahui dari sumber jalur tersebut.
Untuk kurva, jarak antara titik ujung hanyalah tali busur. Untuk mengukur kurva yang ditransformasi secara umum, transformasikan geometrinya ke sistem koordinat tujuan dan ukur geometri tersebut, atau gunakan pendekatan numerik terkontrol yang mempertahankan kontur terpisah. Jangan menerapkan rumus titik ujung ini pada rute melengkung atau mengalikan bentuk yang ditransformasi tidak seragam dengan satu faktor skala tebakan.
*Geometri asli yang dibuat langsung dengan hasil browser aktif. Panjang lokal, panjang hasil transformasi dalam ruang akar, dan milimeter nominal hasil perhitungan diberi label terpisah. Tidak ada aplikasi tujuan atau uji produksi fisik yang ditampilkan.*
## Konversikan ke milimeter setelah pemetaan ditetapkan
Dokumen lambang asli kami menyatakan `width="50mm"`, `height="50mm"`, dan `viewBox="0 0 100 100"`. Dengan pemetaan seragam yang dituju, ini berarti 0.5 mm per satuan pengguna. Lebar luar lambang membentang 80 satuan, sehingga lebar nominalnya 40 mm.
Total panjang kedua konturnya adalah 380 satuan pengguna. Pada skala yang dinyatakan tersebut:
```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
```
Ini adalah perhitungan dari dimensi yang dibuat. Kami tidak mengukur objek tercetak, tidak memverifikasi monitor dengan penggaris, dan tidak menguji ukuran impor editor. CSS dapat menimpa viewport SVG dan tujuan dapat mengubah ukuran ilustrasi. Konfirmasikan dimensi penyerahan dalam tujuan itu sebelum menganggap perhitungan nominal sebagai pengukuran produksi.
Lebar seluruh dokumen juga berbeda dari lebar ilustrasi di dalamnya. Jika Anda justru menetapkan hanya lebar luar lambang menjadi 50 mm, lebarnya yang 80 satuan memberikan faktor berbeda: `50 / 80 = 0.625 mm per unit`. Sebanyak 380 satuan yang sama kemudian mewakili kontur sepanjang 237.5 mm. Catat lebar mana yang Anda tetapkan; gunakan [panduan kotak pembatas SVG](https://perfectvector.com/id/blog/svg-bounding-box) bila perlu memeriksa bentangnya terlebih dahulu.
## `pathLength` mengalibrasi jarak tanpa mengubah ukuran geometri
Kami juga membuat salinan segmen asli 50 satuan dengan `pathLength="1"`. Hasil `getTotalLength()` tetap 50. Atribut itu tidak mengubah titik ujung atau membuat panjang geometrinya menjadi satu satuan.
[Spesifikasi API geometri SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) secara eksplisit mengecualikan `pathLength` dari hasil perhitungan. [Referensi `pathLength` MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) menjelaskan kalibrasinya untuk perilaku jarak sepanjang jalur, termasuk garis putus-putus. Ini berguna ketika membuat efek dengan jarak ternormalisasi; ini bukan pengganti pengukuran rute dasarnya.
Untuk animasi pengungkapan gambar, ikuti [panduan animasi garis SVG](https://perfectvector.com/id/blog/svg-stroke-animation). Pisahkan nilai garis putus-putus yang dikalibrasi dari panjang geometri yang Anda catat untuk pemeriksaan ilustrasi.
## Jumlahkan kontur tanpa menganggapnya sebagai jarak tempuh mesin
Lambang kami memiliki batas luar dan lubang berbentuk belah ketupat. Jalur majemuk asli menyimpan kedua kontur tertutup:
```xml
```
Kontur luar berukuran 280 satuan dan kontur dalam 100. Jalur majemuk mengembalikan 380; mengukur kedua kontur sebagai elemen jalur terpisah dan menjumlahkannya juga mengembalikan 380. [Spesifikasi jalur SVG](https://www.w3.org/TR/SVG2/paths.html) membedakan subjalur baru dari segmen garis dan penutup. Berpindah ke lubang tidak menambahkan segmen penghubung yang digambar di antara kontur.
Jumlah itu menjelaskan geometri tersimpan yang dipilih. Garis tebal hasil penjiplakan mungkin memiliki dua rute batas; jalur duplikat dapat menambahkan geometri lagi; lambang mungkin mencakup kontur internal kecil yang tidak ingin Anda proses. Ukur objek serta kontur yang benar-benar dimaksud dan periksa sebelum menafsirkan total.
Jarak tempuh mesin adalah hasil terpisah. Pekerjaan dapat mencakup gerakan antarkontur, pilihan urutan, lintasan berulang, atau perubahan jalur khusus tujuan. Total browser kami tidak membuktikan semua itu. Total juga tidak memberikan waktu potong, konsumsi bahan, atau keberhasilan mesin. Jika Anda membutuhkan satu rute tengah dari gambar pindai, [panduan SVG satu garis](https://perfectvector.com/id/blog/drawing-to-single-line-svg) membahas tugas rekonstruksi berbeda tersebut.
## Catat pengukuran beserta asumsinya
1. Identifikasi geometri yang dipilih dan periksa apakah memuat beberapa kontur atau duplikat.
2. Ukur kontrol yang diketahui serta jalur terpilih dalam satuan pengguna lokal.
3. Catat transformasi dan ruang koordinat yang diperlukan untuk hasil Anda.
4. Tetapkan dimensi dokumen atau ilustrasi yang dituju sebelum mengonversi satuan.
5. Beri label terpisah untuk nilai kalibrasi, total kontur, dan pengukuran tujuan.
Jika kontrol lurus yang diketahui tidak mengembalikan 50 dalam toleransi yang dinyatakan, periksa elemen yang Anda pilih dan apakah data sumbernya berubah. Jika hasil lokal sesuai tetapi ukuran nominal berbeda, periksa viewport, transformasi, dan skala tujuan sebelum mengubah jalur. Lebih banyak angka desimal tidak akan menyelesaikan pemetaan koordinat yang salah.
Pemeriksaan geometri berkas selesai ketika orang lain dapat mereproduksi total kontur terpilih dan memahami satuan, pemetaan, toleransi, serta objek yang disertakan. Contoh browser yang kami simpan lolos kontrol numerik itu. Tidak ada pengujian impor editor, gerak mesin, atau ukuran fisik yang dilakukan.
Jika satu-satunya sumber berupa bitmap, [alur gambar-ke-vektor PerfectVector](https://perfectvector.com/id/image-to-vector) dapat merekonstruksi geometri SVG yang dapat diedit terlebih dahulu. Periksa kontur dan lubang yang dipulihkan, lalu ukur geometri terpilih itu dengan skala eksplisit. Vektorisasi membuat jalur dari piksel; vektorisasi tidak memulihkan ukuran fisik yang hilang, tidak menyimpulkan garis tengah, dan tidak menyediakan perkiraan jarak tempuh mesin. Simpan vektor asli bila tersedia. Lambang artikel ini dibuat langsung dan tidak dijiplak.
## Pertanyaan umum
**Apakah `getTotalLength()` mengembalikan piksel atau milimeter?**
API mengembalikan panjang yang dihitung browser dalam satuan pengguna SVG. Tetapkan pemetaan koordinat dan ukuran sebelum menyatakan hasil sebagai piksel viewport atau satuan fisik nominal.
**Mengapa penskalaan jalur tidak mengubah hasil API lokal?**
Rute lokal tersimpan dan representasi hasil transformasinya menempati ruang koordinat berbeda. Segmen dengan data sama kami mengembalikan 50 secara lokal setelah penskalaan seragam maupun tidak seragam. Panjang hasil transformasinya adalah 100 dan sekitar 72.111 satuan SVG akar.
**Apakah `pathLength="1"` berarti panjang jalur satu satuan?**
Atribut menyediakan nilai kalibrasi untuk perilaku jarak sepanjang jalur yang didukung. Panjang hasil API geometri mengabaikan atribut itu; kontrol 50 satuan kami tetap mengembalikan 50.
**Bisakah saya memperkirakan waktu potong dari total kontur?**
Total saja tidak cukup. Total tidak membuktikan rute yang dihasilkan tujuan, gerakan antarkontur, lintasan berulang, perubahan kecepatan, atau perilaku bahan. Gunakan pemeriksaan pekerjaan dalam tujuan sebenarnya dan uji produksi yang sesuai.
## Sumber
1. [MDN: SVGGeometryElement.getTotalLength()](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) — Panjang jalur yang dihitung browser dalam satuan pengguna.
2. [W3C: API geometri SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) — Panjang hasil perhitungan dan ketidakbergantungannya pada kalibrasi `pathLength`.
3. [W3C: Sistem koordinat SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — Pemetaan viewport, `viewBox`, dan transformasi.
4. [MDN: pathLength](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) — Kalibrasi perilaku jarak sepanjang jalur.
5. [W3C: Jalur SVG](https://www.w3.org/TR/SVG2/paths.html) — Subjalur, segmen yang digambar, dan perintah penutup.
***
Butuh geometri yang dapat diedit dari bitmap sebelum mengukur? [Buat kandidat SVG](https://perfectvector.com/id/image-to-vector), periksa kontur yang dimuatnya, lalu tetapkan skala yang dituju sebelum mencatat panjang.
## Explore
- [Read the HTML article](https://perfectvector.com/id/blog/measure-svg-path-length)
- [Outline Bertitik SVG: Atur Spasi Dash dan Ujung Round](https://perfectvector.com/id/blog/svg-dotted-outlines.md)
- [Marker SVG Leaflet: Sejajarkan Ujung dengan iconAnchor](https://perfectvector.com/id/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)