SVG göreli yol komutları: Geçerli noktayı izleyin

M, L ve C gibi mutlak SVG yol komutları, geçerli kullanıcı koordinat sistemindeki konumları kullanır. Göreli biçimleri olan m, l ve c ise geçerli noktaya göre yer değiştirme değerleri kullanır. Bir yolu okumak ya da yeniden yazmak için her parçadan sonra bu noktayı izleyin. Sayıları değiştirmeden komut harfini değiştirmek şekli değiştirebilir.

Karışıklığın önemli bir kısmı iki kuraldan kaynaklanır: başlangıçtaki m komutunun ilk çifti mutlak bir taşıma olarak çalışırken sonraki çiftler göreli çizgiler oluşturur; Z veya z ise alt yolu kapatıp geçerli noktayı o alt yolun başlangıcına döndürür. Kapanıştan sonraki yeni bir göreli taşıma, bu sıfırlanmış noktayı kullanır.

Konumları ve yer değiştirmeleri ayrı okuyun

W3C yol belirtimi, bir yolu geçerli noktası, alt yolları ve çizim komutları üzerinden tanımlar. Koordinatlar SVG kullanıcı birimleridir; mutlaka ekran pikseli olmak zorunda değildir. Bir viewBox veya dönüşüm, bunları ekranda farklı bir konuma eşleyebilir.

(40, 40) noktasından başlayınca şu iki komut aynı çizgiyi tanımlar:

L180 40
l140 0

İlki uç noktayı (180, 40) olarak belirtir. İkincisi (40, 40) üzerine (140, 0) ekler. İkisi de (180, 40) noktasında biter; burası sonraki parça için geçerli nokta olur.

Buna karşılık l180 40, (180, 40) ekleyerek (220, 80) noktasında biter. Komutun sözdizimi geçerlidir, ancak farklı bir çizgi çizer.

Büyük ve küçük harfli Z aynı etkiye sahiptir: koordinat argümanı almazlar. MDN d başvurusu, komutları ve her birinin parametrelerini listeler.

Aynı özgün çizimin iki tanımını karşılaştırın

Bu tam SVG'yi absolute.svg olarak kaydedip tarayıcıda açın. Kare boşluklu, bileşik bir petrol yeşili rozet ve ayrı bir mercan rengi kübik eğri içerir:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="240" viewBox="0 0 300 240">
  <path class="badge" fill="#173b40" fill-rule="evenodd" d="M40 40L180 40L210 80L180 140L40 140Z M80 70L80 110L120 110L120 70Z"/>
  <path class="curve" fill="none" stroke="#f28567" stroke-width="6" d="M40 190C80 145 155 225 220 180"/>
</svg>

relative.svg için SVG boyutunu, viewBox'ı ve stilleri koruyun; ancak iki path öğesini şunlarla değiştirin:

<path class="badge" fill="#173b40" fill-rule="evenodd"
  d="m40 40 140 0 30 40 -30 60 -140 0z m40 30 0 40 40 0 0 -40z"/>
<path class="curve" fill="none" stroke="#f28567" stroke-width="6"
  d="m40 190c40 -45 115 35 180 -10"/>

Her iki özgün dosyayı, mutlak rozetin bilerek bozulmuş bir kopyasıyla birlikte tarayıcıda görüntüledik. Bozuk kopyada yalnızca ilk L180 40, l180 40 olarak değiştirildi; sayılar aynı kaldı.

Sayfamız, her yol için toplam uzunluğun karşılık gelen oranlarında 301 örneği karşılaştırmak üzere tarayıcının yerleşik SVG getTotalLength() ve getPointAtLength() yöntemlerini kullandı. Görüntülenen uzunluklar her rozet için 657.082, her eğri için 189.066 kullanıcı birimiydi. Örneklenen noktalar arasındaki en büyük fark, her iki çift için de 0.000000 olarak görüntülendi.

Bu ölçüm, çizgi köşeleri ve kübik noktaları aşağıdaki hesaplamalarda da eşleşen bu belirli dizgeleri destekler. Rastgele bir yeniden yazımın ya da dönüştürücünün tüm SVG komutlarını doğru işlediğinin kanıtı değildir. Karşılaştırma boyunca aynı, dönüşüm uygulanmamış görüntü alanı ve boyama ayarları kullanılır.

İlk m komutunu ve örtük çizgilerini izleyin

Rozetimiz şöyle başlar:

m40 40 140 0 30 40 -30 60 -140 0z

Yalnızca ilk çift taşıma yapar. Kalan çiftler örtük göreli l parçaları gibi davranır. moveto tanımı, başlangıçtaki m40 40 mutlak başlangıç olarak ele alınsa da sonraki çiftlerin göreli kaldığını açıkça belirtir.

Her seferinde bir çifti izleyin:

Karşılaştırmak gerekirse, birden fazla çift içeren büyük harfli M, sonraki çiftlerini örtük mutlak L parçalarına dönüştürür. Her çifti yeni bir taşıma olarak değerlendirmez ve bu küçük harfli örnekteki yer değiştirme değerlerini kullanmaz.

Bir path öğesi kendi yol dizisini oluşturur. Başlangıçtaki göreli m komutunu, önündeki başka bir path öğesinin uç noktasından başlatmayın.

Sonraki taşıma için kapalı alt yolun başlangıcını kullanın

Boşluk, ilk z sonrasında başlar:

m40 30 0 40 40 0 0 -40z

O anda geçerli nokta (40, 40) olduğundan yeni göreli taşıma (40, 30) ekleyerek boşluğu (80, 70) noktasında başlatır. Örtük çizgiler, kapanmadan önce sırasıyla (80, 110), (120, 110) ve (120, 70) noktalarına ulaşır.

Yanlışlıkla dış rozetin son çizgisinin uç noktası olan (40, 140) noktasını temel alsaydınız, bu taşımayı (80, 170) konumuna yerleştirirdiniz. Önceki kapanış geçerli noktayı sıfırladığı için bu hesap yanlıştır. closepath tanımı, geçerli noktayı geçerli alt yolun ilk noktasına döndürür.

İki alt yol da tek bir path öğesine aittir. Bu örnekte fill-rule="evenodd", içteki kareyi bir boşluğa dönüştürür. Koordinat yeniden yazımlarını karşılaştırırken dolgu kuralını ve boyama ayarlarını sabit tutun; böylece dolgu değişikliği, sınadığınız geometriyi gizlemez.

Her kübik kontrol noktasını aynı başlangıçtan ölçün

Ayrı eğri (40, 190) noktasında başlar:

M40 190 C80 145 155 225 220 180
m40 190 c40 -45 115 35 180 -10

Bu tek küçük harfli c parçasında üç çiftin tümü (40, 190) noktasına göre yer değiştirmedir. İkinci kontrol noktası ilk kontrol noktasından, uç nokta da ikinci kontrol noktasından ölçülmez.

Parçadan sonra geçerli noktayı uç noktası olan (220, 180) olarak güncelleyin. Sonraki göreli parça bu yeni başlangıcı kullanır. MDN yollar öğreticisi, kübik kontrol noktalarını ve mutlak/göreli biçimleri açıklar; Bézier birleşim kılavuzu ise teğet tutamaçlarını ve kısaltılmış S komutunu ayrıca ele alır.

Koordinat çıkarma işlemini her komuttaki her sayıya genellemeyin. Bir yayda yarıçapların, dönme açısının ve bayrakların görevleri farklıdır; yalnızca uç nokta çifti mutlak ve göreli konumlar arasında değişir. A veya a verisini yeniden yazmadan önce yay bayrakları açıklamasına bakın. Bu örnek genel bir yol dönüştürme yordamı yerine çizgileri, taşımaları, kapanışı ve sıradan bir kübik parçayı gösterir.

Yerleşimi yol sözdizimiyle karıştırmadan çizimi taşıyın

Tamamıyla göreli olan bu bileşik rozette başlangıçtaki m40 40 değerini m60 60 yapmak, köşeleri (20, 20) kadar kaydırır: sonraki yer değiştirmeler ve göreli alt yol taşıması, değişen başlangıcı izler. Ayrı eğri yoluna dokunmaz. Karma verilerde sonraki mutlak konumlar da belirtilen koordinatlarına bağlı kaldığından ilk taşımayı düzenlemek yolu bozabilir.

İki yoldan oluşan çizimin tamamını tek bir bütün olarak taşımak için her iki d dizgesini koruyup öğelerini transform="translate(20 20)" içeren bir gruba yerleştirin. SVG koordinat sistemi belirtimi, dönüşümlerin koordinat eşlemelerini nasıl oluşturduğunu açıklar. Grup dönüşümü, özgün yol verisini yeniden yazmadan yerleşimi değiştirir.

Görüntü alanının taşınan çizimi hâlâ kapsadığını kontrol edin; bir grubu ötelemek tuvalini otomatik olarak büyütmez. SVG dönüşüm sırası kılavuzu, öteleme ve ölçekleme birleştirildiğinde yerleşimi ele alır.

Gösterimi değiştirmeden önce kaynak geometriyi inceleyin

Çizim yalnızca PNG veya JPG olarak mevcutsa PerfectVector yardımcı olabilir. Bir SVG adayı hazırlayın, ardından yol verisini düzenlemeden önce elde edilen silueti, boşlukları ve eğri şeklini kaynakla karşılaştırın. Mutlak ya da göreli gösterim, elde edilen geometrinin uygun olup olmadığını belirlemez.

Elinizde vektör ana dosyası varsa onu doğrudan kullanın veya kontrol etmesi daha kolaysa basit bir simgeyi yeniden çizin. Komutları yeniden yazmak, eksik raster bilgilerinden amaçlanan şekli geri getiremez. Görüntü vektörleştirmeye genel bakış, bu ayrı yeniden oluşturma aşamasını açıklar.

Kullanılabilir bir SVG'yi düzenlerken özgün dosyanın kopyasını tutun, her seferinde desteklenen tek bir parçayı değiştirin ve gerçek dosyayı aynı ölçekte karşılaştırın. Geçerli noktanın yanında alt yol başlangıcını da izleyin. Karşılaştırma sırasında dolgu ve kontur ayarlarını koruyun, ardından dışa aktarılan dosyayı onu kullanacak uygulamada sınayın.

Sık sorulan sorular

İlk küçük harfli m başka bir yola göre mi hesaplanır? Hayır. m bir yolun ilk komutuysa ilk çifti mutlak başlangıç olarak değerlendirilir. Ek çiftler örtük göreli çizgilerdir; başka bir path öğesinin uç noktası başlangıç temeli değildir.

Z veya z sonrasında geçerli nokta nerededir? Az önce kapanan alt yolun başlangıcındadır. Sonraki göreli taşıma, önceki çizginin uç noktasını değil, bu sıfırlanmış noktayı kullanır.

Komut harflerini küçülterek bir yolu dönüştürebilir miyim? Hayır. Konum değerleri her komutun anlamına göre yeniden hesaplanmalıdır. Bu örnekteki L180 40, geçerli nokta (40, 40) iken l140 0 olur; l180 40 ise farklı bir çizgi çizer.

Kaynaklar

1. W3C — SVG 2 Paths — Geçerli noktaları, başlangıç moveto komutunu, örtük çizgileri, kapanışı ve kübik parametreleri tanımlar.
2. MDN — Paths tutorial — Mutlak ve göreli çizgi ve eğri komutlarını örnekler.
3. MDN — d attribute — Yaylar ve closepath dâhil komut parametrelerinin rollerini listeler.
4. W3C — SVG 2 Coordinate Systems — Kullanıcı koordinat eşlemelerini ve dönüşümlerle çizim yerleşimini açıklar.

Elinizde yalnızca raster çizim mi var? PerfectVector ile SVG yolları hazırlayın, elde edilen silueti ve boşlukları inceleyin; ardından yalnızca anladığınız komutları düzenleyip teslim edeceğiniz SVG'yi özgün dosyayla karşılaştırarak doğrulayın.