Ölçeği karıştırmadan SVG yol uzunluğunu ölçün

SVG yolunu ölçmek için geometri öğesinde getTotalLength() çağırın, ardından sayının arkasındaki koordinat sistemini belirleyin. Tarayıcı kullanıcı biriminde uzunluk döndürür. Bu sayı otomatik olarak görüntülenen uzunluk, milimetre ölçümü veya makinenin hareket mesafesi değildir.

Örneğin özgün köşegenimiz 50 kullanıcı birimidir. Eşit ölçekleme kök uzay uzunluğunu 100'e çıkarırken yalnızca yatay yönü ölçeklemek yaklaşık 72,111 yapar. Yerel API sonucu iki durumda da 50 kalır. Bu sayılar farklı ölçüm sorularını yanıtlar.

Çizimi ölçmeden önce bilinen parçayı ölçün

Erişilebilir geometrili SVG ve satır içi SVG ile JavaScript çalıştıran tarayıcı gerekir. Çizimin kopyasında çalışın. Sonucu kaydetmeden önce yerel geometri mi, dönüştürülmüş geometri mi yoksa belirli fiziksel boyuttaki uzunluk mu gerektiğine karar verin.

Yol, hareket, çizgi, eğri ve kapatma gibi komutlarla rota saklar. Kullanıcı birimi o SVG koordinat sistemine aittir; eşlemeyi kontrol etmeden piksel veya milimetre diye yeniden adlandırmayın. MDN'nin getTotalLength() başvurusu, sonucu tarayıcının kullanıcı birimlerinde hesapladığı yol uzunluğu olarak tanımlar.

Bu eksiksiz HTML örneği düz parça ölçer. HTML dosyası olarak kaydedip tarayıcıda açın:

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

Yatay değişim 30, dikey değişim 40'tır; dolayısıyla beklenen uzunluk sqrt(30² + 40²) = 50 olur. Gösterilen sonuç, karmaşık eğriye veya içe aktarılmış ambleme güvenmeden önce bilinen kontrol sağlar. 240 piksellik görüntü alanı yerel sonucu 100 kullanıcı birimine dönüştürmez.

Tarayıcı örneğimizde 0,01 kullanıcı birimi tolerans belirledik. Yarıçapı 10 olan çeyrek daire kontrolünün analitik uzunluğu 5π, yaklaşık 15,708'dir. Test tarayıcısı Chrome 155 bildirdi ve yaklaşık 15,7102 döndürerek tolerans içinde kaldı. Tarayıcı eğri uzunluğunu sayısal hesaplar; her uygulamadan aynı son ondalıkları istemek yerine yararlı hassasiyeti tutup uygun toleransla karşılaştırın.

Yerel ve dönüştürülmüş uzunlukları ayrı tutun

Sonraki iki örneğimiz aynı d="M10 10 L40 50" verisini koruyup dönüşüm ekler:

Eşit ölçekleme her yönü aynı büyüklükle çarpar; bu nedenle ikinci satırda yerel uzunluğu 2 ile çarpmak çalışır. Eşit olmayan ölçekleme yönleri farklı işler. Üçüncü satırda değişmiş parça yatayda 60, aşağı 40 birimdir: sqrt(60² + 40²); 50 × 2 değil.

SVG koordinat sistemi tanımı, dönüşümlerin ve viewBox eşlemesinin koordinat sistemlerini nasıl kurduğunu açıklar. Hedef uzayı adlandırın. Kök SVG kullanıcı birimindeki uzunluk, görüntü alanındaki CSS piksellerinden yine farklıdır.

Bu bilinen düz parça için uç noktalarını kök SVG'nin kullanıcı uzayına eşledik:

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);

Ters kök matrisi kökün görüntü alanı eşlemesini kaldırır; göreli matris yolun kök kullanıcı uzayına dönüşümünü korur. Bu parça, terslenebilir matrisleri olan bağlı SVG'yi ve yukarıdaki belirli düz parçayı varsayar. Uç noktaları o yolun kaynağından bilinir.

Eğride uç noktalar arasındaki mesafe yalnızca kiriştir. Genel dönüştürülmüş eğriyi ölçmek için geometriyi hedef koordinat sistemine dönüştürüp ölçün veya ayrı konturları koruyan kontrollü sayısal yaklaşım kullanın. Uç nokta formülünü eğri rotaya uygulamayın veya eşit olmayan dönüştürülmüş şekli tek tahminî ölçek katsayısıyla çarpmayın.

Eşlemeyi sabitledikten sonra milimetreye çevirin

Özgün amblem belgemiz width="50mm", height="50mm" ve viewBox="0 0 100 100" belirtir. Amaçlanan eşit eşlemeyle kullanıcı birimi başına 0,5 mm'dir. Amblemin dış genişliği 80 birimdir, dolayısıyla nominal genişliği 40 mm olur.

İki konturunun toplam uzunluğu 380 kullanıcı birimidir. Belirtilen ölçekte:

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

Bu, hazırlanmış boyutlardan yapılan hesaptır. Basılmış nesneyi ölçmedik, ekranı cetvelle doğrulamadık veya düzenleyicinin içe aktarma boyutunu test etmedik. CSS, SVG görüntü alanını geçersiz kılabilir; hedef uygulama çizimi yeniden ölçekleyebilir. Nominal hesabı üretim ölçümü saymadan önce teslim edilen boyutları o hedefte doğrulayın.

Tüm belge genişliği, içindeki çizimin genişliğinden de farklıdır. Yalnızca amblemin dış genişliğini 50 mm yaparsanız 80 birimlik genişliği farklı katsayı verir: 50 / 80 = 0.625 mm per unit. Aynı 380 birim bu durumda 237,5 mm konturu temsil eder. Hangi genişliği ayarladığınızı kaydedin; önce sınırları incelemeniz gerekiyorsa SVG sınırlayıcı kutu kılavuzunu kullanın.

pathLength geometriyi boyutlandırmadan mesafeleri kalibre eder

Özgün 50 birimlik parçanın pathLength="1" içeren kopyasını da yaptık. getTotalLength() sonucu 50 kaldı. Öznitelik uç noktalarını değiştirmedi veya geometrik uzunluğu bir birim yapmadı.

SVG geometri API tanımı, hesaplanan sonuçtan pathLength değerini açıkça hariç tutar. MDN'nin pathLength başvurusu, kesikli konturlar dâhil yol boyunca mesafe davranışını kalibre etmesini açıklar. Normalleştirilmiş mesafeli efekt hazırlarken yararlıdır; alttaki rotayı ölçmenin yerine geçmez.

Çizimin açığa çıkması için SVG kontur animasyonu kılavuzunu izleyin. Kalibre edilmiş kesik değerlerini çizim incelemesi için kaydettiğiniz geometrik uzunluktan ayrı tutun.

Toplamı makine hareketi saymadan konturları ekleyin

Amblemimiz dış sınır ve baklava biçimli delik içerir. Özgün bileşik yol iki kapalı konturu da saklar:

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

Dış kontur 280, iç kontur 100 birimdir. Bileşik yol 380 döndürdü; iki konturu ayrı yol öğeleri olarak ölçüp toplamak da 380 verdi. SVG yol tanımı, yeni alt yolları çizgi ve kapatma parçalarından ayırır. Deliğe hareket etmek konturlar arasında çizilmiş bağlantı parçası eklemez.

Bu toplam seçilen saklanmış geometriyi anlatır. İzlenmiş kalın çizgide iki sınır rotası olabilir; kopya yol geometriyi tekrar ekleyebilir; amblem işlemeyi amaçlamadığınız küçük iç konturlar içerebilir. Gerçekten kastettiğiniz nesne ve konturları ölçün, toplamı yorumlamadan önce inceleyin.

Makine hareketi ayrı sonuçtur. İş, konturlar arası hareketi, sıra seçimlerini, tekrarlı geçişleri veya hedefe özgü yol değişikliklerini içerebilir. Tarayıcı toplamımız bunların hiçbirini kanıtlamaz. Kesim süresi, malzeme tüketimi veya başarılı makine sonucu da vermez. Taranmış çizimden tek merkez rota gerekiyorsa tek çizgili SVG kılavuzu farklı yeniden oluşturma görevini ele alır.

Ölçümü varsayımlarıyla kaydedin

1. Seçilen geometriyi belirleyip birden fazla kontur veya kopya içerip içermediğini kontrol edin.
2. Bilinen kontrolü ve seçilen yolları yerel kullanıcı birimlerinde ölçün.
3. Sonucunuz için gereken dönüşümleri ve koordinat uzayını kaydedin.
4. Birimleri çevirmeden önce amaçlanan belge veya çizim boyutlarını belirleyin.
5. Kalibrasyon değerlerini, kontur toplamlarını ve hedef ölçümlerini ayrı etiketleyin.

Bilinen düz kontrol, belirttiğiniz tolerans içinde 50 döndürmüyorsa seçtiğiniz öğeyi ve kaynak verisinin değişip değişmediğini kontrol edin. Yerel sonuçlar uyuyor ancak nominal boyut farklıysa yolları değiştirmeden önce görüntü alanını, dönüşümleri ve hedef ölçeği inceleyin. Daha fazla ondalık basamak yanlış koordinat eşlemesini çözmez.

Başka kişi seçilen kontur toplamını yeniden üretip birimlerini, eşlemesini, toleransını ve içerilen nesneleri anladığında dosya geometrisi kontrolü tamamlanır. Korunan tarayıcı örneğimiz bu sayısal kontrolleri geçti. Düzenleyici içe aktarması, makine hareketi veya fiziksel boyut testi yapılmadı.

Tek kaynak bitmap ise PerfectVector'ın görüntüden vektöre iş akışı önce düzenlenebilir SVG geometrisi oluşturabilir. Kurtarılan konturları ve delikleri inceleyin, ardından seçilen geometriyi açık ölçekle ölçün. Vektörleştirme piksellerden yollar oluşturur; kayıp fiziksel boyutu kurtarmaz, merkez çizgisi çıkarmaz veya makine hareketi tahmini sağlamaz. Varsa mevcut özgün vektörü koruyun. Makaledeki amblem doğrudan hazırlandı, izlenmedi.

Sık sorulan sorular

getTotalLength() piksel mi, milimetre mi döndürür? Tarayıcının hesapladığı uzunluğu SVG kullanıcı birimlerinde döndürür. Sonucu görüntü alanı pikseli veya nominal fiziksel birimle ifade etmeden önce koordinat ve boyut eşlemesini belirleyin.

Yolumu ölçeklemek yerel API sonucunu neden değiştirmiyor? Saklanan yerel rota ve dönüştürülmüş gösterimi farklı koordinat uzaylarındadır. Aynı verili parçamız, eşit ve eşit olmayan ölçeklemeden sonra yerelde 50 döndürdü. Dönüştürülmüş uzunlukları 100 ve yaklaşık 72,111 kök SVG birimiydi.

pathLength="1" yolun bir birim uzunluğunda olduğunu mu söyler? Desteklenen yol boyunca mesafe davranışı için kalibrasyon değeri sağlar. Geometri API'sinin hesapladığı uzunluk bu özniteliği yok sayar; 50 birimlik kontrolümüz yine 50 döndürdü.

Kontur toplamından kesim süresini tahmin edebilir miyim? Tek başına toplam yetmez. Hedefin üretilmiş rotalarını, konturlar arası hareketi, tekrarlı geçişleri, hız değişimlerini veya malzeme davranışını kanıtlamaz. Gerçek hedefin iş kontrollerini ve uygun üretim testini kullanın.

Kaynaklar

1. MDN: SVGGeometryElement.getTotalLength() — Tarayıcının kullanıcı birimlerinde hesapladığı yol uzunluğu.
2. W3C SVG geometri API'si — Hesaplanan uzunluk ve pathLength kalibrasyonundan bağımsızlığı.
3. W3C SVG koordinat sistemleri — Görüntü alanı, viewBox ve dönüşüm eşlemeleri.
4. MDN: pathLength — Yol boyunca mesafe davranışının kalibrasyonu.
5. W3C SVG yolları — Alt yollar, çizilen parçalar ve kapatma komutları.

Ölçmeden önce bitmap'ten düzenlenebilir geometri mi gerekiyor? SVG adayı oluşturun, içerdiği konturları inceleyin ve uzunluğu kaydetmeden önce amaçlanan ölçeği belirleyin.