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

# Mierz długość ścieżki SVG bez mylenia skali

> Mierz ścieżki SVG w jednostkach użytkownika, uwzględniaj transformacje i rozmiar nominalny oraz odróżniaj sumę konturów od kalibracji pathLength i ruchu maszyny.

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

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

Aby zmierzyć ścieżkę SVG, wywołaj `getTotalLength()` na elemencie geometrii, a następnie ustal układ współrzędnych stojący za liczbą. Przeglądarka zwraca długość w jednostkach użytkownika. Liczba nie jest automatycznie długością wyświetlaną, pomiarem w milimetrach ani drogą maszyny.

Na przykład nasza oryginalna przekątna ma 50 jednostek użytkownika. Jednolite skalowanie podwaja długość w przestrzeni głównej do 100, a skalowanie tylko poziome daje około 72,111. Lokalny wynik API w obu przypadkach pozostaje 50. Liczby odpowiadają na inne pytania pomiarowe.

## Zmierz znany odcinek przed grafiką

Potrzebujesz SVG z dostępną geometrią i przeglądarki uruchamiającej bezpośredni SVG oraz JavaScript. Pracuj na kopii. Przed zapisaniem wyniku zdecyduj, czy potrzebujesz geometrii lokalnej, przekształconej czy długości w określonym rozmiarze fizycznym.

Ścieżka zapisuje trasę poleceniami przesunięcia, linii, krzywej i zamknięcia. Jednostka użytkownika należy do układu SVG; nie nazywaj jej pikselem lub milimetrem bez sprawdzenia mapowania. [Opis `getTotalLength()` MDN](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) definiuje wynik jako obliczoną przez przeglądarkę długość ścieżki w jednostkach użytkownika.

Kompletny HTML mierzy prosty odcinek. Zapisz go jako plik HTML i otwórz w przeglądarce:

```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>
```

Zmiana pozioma wynosi 30, pionowa 40, więc oczekiwana długość to `sqrt(30² + 40²) = 50`. Wyświetlany wynik daje znaną kontrolę przed zaufaniem złożonej krzywej lub importowanemu emblematowi. Obszar widoku 240 pikseli nie zmienia wyniku lokalnego na 100 jednostek użytkownika.

W próbce przeglądarkowej zadeklarowaliśmy tolerancję 0,01 jednostki użytkownika. Kontrolna ćwiartka koła o promieniu 10 ma długość analityczną `5π`, około 15,708. Przeglądarka testowa zgłosiła Chrome 155 i zwróciła około 15,7102, w granicach tolerancji. Przeglądarka liczy krzywą numerycznie, więc zachowaj użyteczną precyzję i porównuj z odpowiednią tolerancją zamiast żądać identycznych ostatnich cyfr od każdej implementacji.

## Oddziel długość lokalną od przekształconej

Następne dwie próbki zachowują `d="M10 10 L40 50"` i dodają transformacje:

| Oryginalny odcinek | Lokalna długość API | Długość po podanej transformacji w głównych jednostkach użytkownika SVG |
| ------------------ | ------------------- | ----------------------------------------------------------------------- |
| Bez transformacji  | 50                  | 50                                                                      |
| `scale(2)`         | 50                  | 100                                                                     |
| `scale(2 1)`       | 50                  | Około 72,111                                                            |

Jednolite skalowanie mnoży każdy kierunek przez tę samą wartość, więc w drugim wierszu działa pomnożenie lokalnej długości przez 2. Skalowanie nierównomierne traktuje kierunki inaczej. W trzecim wierszu zmieniony odcinek ma 60 jednostek w poziomie i 40 w dół: `sqrt(60² + 40²)`, nie `50 × 2`.

[Specyfikacja układów współrzędnych SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) wyjaśnia ustanawianie układów przez transformacje i mapowanie `viewBox`. Nazwij docelową przestrzeń. Długość w jednostkach głównego SVG nadal różni się od pikseli CSS obszaru widoku.

Dla znanego prostego odcinka zmapowaliśmy końce do przestrzeni użytkownika głównego 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);
```

Odwrotna macierz główna usuwa mapowanie obszaru widoku; macierz względna zachowuje transformację ścieżki do głównej przestrzeni użytkownika. Fragment zakłada dołączony SVG z odwracalnymi macierzami i konkretny prosty odcinek powyżej. Jego końce znamy ze źródła ścieżki.

Dla krzywej odległość między końcami jest tylko cięciwą. Aby zmierzyć ogólnie przekształconą krzywą, przekształć geometrię do docelowego układu i zmierz ją lub użyj kontrolowanego przybliżenia numerycznego zachowującego oddzielne kontury. Nie stosuj formuły końców do zakrzywionej trasy ani nie mnóż nierównomiernie przekształconego kształtu przez jeden zgadywany współczynnik skali.

![Rzeczywiste kontrole pomiarów przeglądarki pokazujące skalowanie jednolite i nierównomierne, emblemat o dwóch konturach, lokalne długości ścieżek i nominalne przeliczenie milimetrów](https://perfectvector.com/blog/measure-svg-path-length/path-length-controls.webp)

*Oryginalna autorska geometria z bieżącymi wynikami przeglądarki. Osobno opisano długości lokalne, przekształcone w przestrzeni głównej i nominalne milimetry z obliczeń. Nie pokazano testu aplikacji docelowej ani fizycznej produkcji.*

## Przeliczaj na milimetry po ustaleniu mapowania

Oryginalny dokument emblematu deklaruje `width="50mm"`, `height="50mm"` i `viewBox="0 0 100 100"`. Przy zamierzonym jednolitym mapowaniu daje to 0,5 mm na jednostkę użytkownika. Zewnętrzna szerokość emblematu wynosi 80 jednostek, więc nominalnie 40 mm.

Dwa kontury mają łącznie 380 jednostek użytkownika. Przy deklarowanej skali:

```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
```

To obliczenie z autorskich wymiarów. Nie mierzyliśmy drukowanego obiektu, nie weryfikowaliśmy monitora linijką ani rozmiaru importu edytora. CSS może nadpisać obszar widoku SVG, a aplikacja docelowa przeskalować grafikę. Potwierdź w niej dostarczane wymiary przed uznaniem nominalnego obliczenia za pomiar produkcyjny.

Szerokość całego dokumentu różni się też od szerokości grafiki wewnątrz. Jeśli zamiast tego ustawisz zewnętrzną szerokość samego emblematu na 50 mm, jego 80 jednostek daje inny współczynnik: `50 / 80 = 0.625 mm per unit`. Te same 380 jednostek oznacza wtedy 237,5 mm konturów. Zapisz, którą szerokość ustawiasz; użyj [poradnika pola ograniczającego SVG](https://perfectvector.com/pl/blog/svg-bounding-box), jeśli najpierw trzeba sprawdzić zasięg.

## `pathLength` kalibruje odległości bez zmiany geometrii

Utworzyliśmy też kopię pierwotnego odcinka 50 jednostek z `pathLength="1"`. Wynik `getTotalLength()` pozostał 50. Atrybut nie zmienił końców ani nie skrócił geometrii do jednej jednostki.

[Specyfikacja API geometrii SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) wyraźnie wyklucza `pathLength` z obliczonego wyniku. [Opis `pathLength` MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) wyjaśnia kalibrację zachowań odległości wzdłuż ścieżki, w tym kresek obrysu. Jest przydatna przy efekcie ze znormalizowanymi odległościami, ale nie zastępuje pomiaru podstawowej trasy.

Dla odsłaniania rysunku użyj [poradnika animacji obrysu SVG](https://perfectvector.com/pl/blog/svg-stroke-animation). Oddziel skalibrowane wartości kresek od geometrycznej długości zapisywanej przy kontroli grafiki.

## Sumuj kontury bez zamieniania wyniku w drogę maszyny

Emblemat ma zewnętrzną granicę i rombowy otwór. Oryginalna ścieżka złożona przechowuje oba zamknięte kontury:

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

Kontur zewnętrzny ma 280 jednostek, wewnętrzny 100. Ścieżka złożona zwróciła 380; pomiar konturów jako oddzielnych elementów i zsumowanie też dały 380. [Specyfikacja ścieżek SVG](https://www.w3.org/TR/SVG2/paths.html) odróżnia nowe podścieżki od segmentów linii i zamknięcia. Przejście do otworu nie dodaje rysowanego odcinka łączącego kontury.

Suma opisuje wybraną zapisaną geometrię. Trasowana gruba kreska może mieć dwie trasy graniczne; duplikat ścieżki może ponownie dodać geometrię; emblemat może zawierać drobne wnętrza nieprzeznaczone do obróbki. Mierz rzeczywiście wybrane obiekty i kontury oraz sprawdź je przed interpretacją sumy.

Droga maszyny jest oddzielnym wynikiem. Zlecenie może obejmować przejazdy między konturami, kolejność, wielokrotne przejścia lub zmiany ścieżek w aplikacji docelowej. Suma przeglądarki niczego z tego nie potwierdza. Nie daje też czasu cięcia, zużycia materiału ani sukcesu maszyny. Jeśli potrzebujesz jednej trasy środkowej ze skanu, [poradnik jednoliniowego SVG](https://perfectvector.com/pl/blog/drawing-to-single-line-svg) omawia to odrębne zadanie rekonstrukcji.

## Zapisz pomiar z założeniami

1. Określ wybraną geometrię i sprawdź wiele konturów lub duplikaty.
2. Zmierz znany wzorzec i wybrane ścieżki w lokalnych jednostkach użytkownika.
3. Zapisz transformacje i przestrzeń współrzędnych potrzebną do wyniku.
4. Ustal docelowe wymiary dokumentu lub grafiki przed przeliczeniem jednostek.
5. Opisuj oddzielnie kalibrację, sumy konturów i pomiary docelowe.

Jeśli znany prosty wzorzec nie zwraca 50 w zadeklarowanej tolerancji, sprawdź wybrany element i zmiany jego danych źródłowych. Jeśli lokalne wyniki się zgadzają, ale nominalny rozmiar jest inny, sprawdź obszar widoku, transformacje i skalę docelową przed zmianą ścieżek. Więcej cyfr po przecinku nie naprawi złego mapowania współrzędnych.

Kontrola geometrii pliku jest zakończona, gdy inna osoba może odtworzyć sumę wybranych konturów i zrozumieć jednostki, mapowanie, tolerancję i zawarte obiekty. Zachowana próbka przeglądarkowa przeszła te kontrole liczbowe. Nie testowano importu edytora, drogi maszyny ani rozmiaru fizycznego.

Jeśli jedynym źródłem jest bitmapa, [proces obrazu do wektorów PerfectVector](https://perfectvector.com/pl/image-to-vector) może najpierw odtworzyć edytowalną geometrię SVG. Sprawdź odzyskane kontury i otwory, potem zmierz wybraną geometrię z jawną skalą. Wektoryzacja tworzy ścieżki z pikseli; nie odzyskuje utraconego rozmiaru fizycznego, nie odgaduje linii środkowej ani drogi maszyny. Zachowaj istniejący oryginał wektorowy, jeśli jest dostępny. Emblemat w artykule utworzono bezpośrednio, bez trasowania.

## Częste pytania

**Czy `getTotalLength()` zwraca piksele czy milimetry?**
Zwraca długość obliczoną przez przeglądarkę w jednostkach użytkownika SVG. Ustal mapowanie współrzędnych i rozmiaru przed wyrażeniem wyniku w pikselach obszaru widoku lub nominalnych jednostkach fizycznych.

**Dlaczego skalowanie ścieżki nie zmienia lokalnego wyniku API?**
Zapisana trasa lokalna i przekształcona reprezentacja zajmują inne przestrzenie współrzędnych. Odcinek z tymi samymi danymi zwracał 50 lokalnie po jednolitym i nierównomiernym skalowaniu. Długości przekształcone wynosiły 100 i około 72,111 jednostek głównego SVG.

**Czy `pathLength="1"` oznacza ścieżkę długości jednej jednostki?**
Daje wartość kalibracji obsługiwanych zachowań odległości wzdłuż ścieżki. Obliczona długość API geometrii ignoruje ten atrybut; kontrola 50 jednostek nadal zwracała 50.

**Czy oszacuję czas cięcia z sumy konturów?**
Sama suma nie wystarcza. Nie określa wygenerowanych tras, przejazdów między konturami, powtarzanych przejść, zmian prędkości ani zachowania materiału. Użyj kontroli zlecenia rzeczywistego środowiska docelowego i właściwego testu produkcyjnego.

## Źródła

1. [MDN: SVGGeometryElement.getTotalLength()](https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength) — Długość ścieżki obliczona przez przeglądarkę w jednostkach użytkownika.
2. [W3C API geometrii SVG](https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength) — Obliczona długość i jej niezależność od kalibracji `pathLength`.
3. [W3C Układy współrzędnych SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — Mapowania obszaru widoku, `viewBox` i transformacji.
4. [MDN: pathLength](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/pathLength) — Kalibracja zachowania odległości wzdłuż ścieżki.
5. [W3C Ścieżki SVG](https://www.w3.org/TR/SVG2/paths.html) — Podścieżki, rysowane odcinki i polecenia zamknięcia.

***

Potrzebujesz edytowalnej geometrii z bitmapy przed pomiarem? [Utwórz kandydacki SVG](https://perfectvector.com/pl/image-to-vector), sprawdź zawarte kontury i ustal zamierzoną skalę przed zapisaniem długości.

## Explore

- [Read the HTML article](https://perfectvector.com/pl/blog/measure-svg-path-length)
- [Kropkowane obrysy SVG: kontroluj odstępy i zaokrąglone zakończenia](https://perfectvector.com/pl/blog/svg-dotted-outlines.md)
- [Znaczniki SVG Leaflet: wyrównaj czubek przez iconAnchor](https://perfectvector.com/pl/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)