SVG yay bayrakları: A komutuyla doğru eğriyi çizin

SVG A komutundaki iki bayrak, başlangıç ve bitiş noktalarını hangi yayın birleştireceğini seçer. Kısa yol için large-arc-flag değerini 0, uzun yol için 1 yapın. Elips çevresindeki yönü seçmek için sweep-flag değerini 0 veya 1 yapın. Uç noktaları ve yarıçapları sabit tutup yalnızca bu iki rakamı değiştirerek dört olasılığın tamamını görebilirsiniz. SVG 2 Paths belirtimi, bu dört yay arasından seçimi tanımlar.

Bu, kod düzenlemesinden sonra bir logonun eğri kenarı, rozet halkası veya arayüz süsü yanlış yöne kıvrıldığında yararlıdır. Kaynak PNG ise vektörleştirme önce düzenlenebilir şekiller sağlayabilir; A komutu ise ayrı ve bilinçli bir geometri düzenlemesidir.

A'dan sonraki yedi değeri okuyun

Mutlak yay komutunun sırası şöyledir:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx ve ry, elipsin yarıçaplarıdır. x-axis-rotation, elipsi geçerli koordinat sisteminde döndürür. İki bayrağın her biri 0 veya 1 değerini alır. Son olarak x y, bitiş noktasıdır. Başlangıç, önceki komutun bıraktığı geçerli noktadır; bu komut çoğunlukla M x y olur. Küçük harfli a, mutlak bitiş noktası yerine göreli bir bitiş noktası kullanır; MDN — Paths öğreticisi, komut biçimlerini açıklar.

Örneğin M70 370 A140 110 0 0 1 280 420, (70, 370) noktasında başlar, 140 ve 110 yarıçaplarını kullanır, elipsi döndürmez, sweep 1 ile kısa yolu seçer ve (280, 420) noktasında biter. Sayılar SVG'nin kullanıcı koordinat sistemindedir. Bunlar fiziksel baskı boyutunu otomatik olarak garanti etmez.

Olası dört yayı görün

Bu özgün test örneğini tek bir SVG dosyasından görüntüledik. Her panel aynı başlangıç (70, 370), bitiş (280, 420), yarıçaplar 140 110 ve dönüş 0 değerlerini kullanır. Yalnızca bayraklar değişir. Turuncu başlangıcı, yeşil bitişi işaretler. Bu, kendi yol komutlarımızın tarayıcı tarzında görüntülenmesidir; PerfectVector dönüştürme çıktısı değildir.

“Üstte” ve “altta” etiketleri bu başlangıcı, bitişi ve koordinat düzenini tanımlar. Bunlar 0 ve 1 değerlerinin evrensel anlamları değildir. Uç noktaların farklı yerleşimi veya dönüşüm uygulanmış bir grup, görünür yayı başka bir konuma taşıyabilir. Sweep bayrağı, seçilen elips boyunca açının artma veya azalma yönünü belirler; y ekseninin aşağıya baktığı tipik bir SVG viewBox içinde sweep 1 genellikle saat yönünde görünür. SVG Tutorial — Arc etkileşimli düzenleyicisi, diğer girdiler sabitken yönün değişimini izlemek için yararlıdır.

Bir paneli yeniden oluşturmak için bunu arc.svg olarak kaydedip tarayıcıda açın:

<svg xmlns="http://www.w3.org/2000/svg"
     width="380" height="600" viewBox="0 0 380 600">
  <path d="M70 370 A140 110 0 0 1 280 420"
        fill="none" stroke="#1b64d8"
        stroke-width="12" stroke-linecap="round" />
  <circle cx="70" cy="370" r="9" fill="#ff704e" />
  <circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>

Yukarıdaki tabloyu kullanarak yalnızca dönüş değeri 0 sonrasındaki iki rakamı değiştirin. Aynı anda bir yarıçapı veya uç noktayı da değiştirirseniz yolu hangi düzenlemenin değiştirdiğini artık ayırt edemezsiniz.

Yanlış yöne giden bir eğriyi düzeltin

1. Parçayı bulun. Yolun d değerinde parçanın öncesindeki başlangıç noktasını, A komutunu ve bitiş noktasını belirleyin. Bir yol birkaç yay parçası içerebilir; yalnızca yanlış olanı düzenleyin.
2. Uzun veya kısa yol seçimini kontrol edin. Küçük bir eğri birden elipsin büyük bölümünü dolaşıyorsa large-arc-flag değerini 1 yerine 0 yapın. Planlanan halka parçası kısa bir bağlantıya dönüşüyorsa 1 deneyin.
3. Tarafı veya ilerleme yönünü kontrol edin. Diğer her şeyi sabit tutarak sweep-flag değerini değiştirin. Bu genellikle yayı, uç noktalar arasındaki kirişin diğer tarafına taşır.
4. Görselin tamamını inceleyin. Düzeltilmiş bir parça yine de komşu parçayla uygunsuz bir açıyla birleşebilir veya viewBox dışına uzanabilir. Dosyayı hedef görüntüleme boyutunda yeniden açın; ardından bitişik geometriyi veya tuvali gerektiği şekilde ayarlayın.

Hiçbir bayrak çifti istenen siluetle eşleşmiyorsa sorun muhtemelen bayrak değildir. Yarıçaplar ve uç noktalar aday elipsleri belirler; bayraklar yalnızca bunlar arasından seçim yapar. NaN — SVG Path Commands: Arcs kılavuzu, yarıçapı veya uç noktayı değiştirmenin temel elipsi nasıl değiştirdiğini gösterir.

Dönüş ve yarıçap sınırları

rx ve ry farklı olduğunda x-axis-rotation önemlidir: yay seçilmeden önce elipsi döndürür. Yarıçaplar eşitse bir çemberi döndürmek dış hatlarını değiştirmez. Eğik oval kenarlı bir logo için önce amaçlanan yarıçapları ve dönüşü deneyin, ardından bayrakları seçin. Aksi hâlde yanlış elipsin doğru tarafını seçebilirsiniz.

SVG 2 Implementation Notes, özel durumları tanımlar. Yarıçaplardan biri sıfırsa parça düz çizgi olarak işlenir. Yarıçaplar uç noktaları birleştiremeyecek kadar küçükse çizim motoru, yayı mümkün kılacak kadar büyütür. Başlangıç ve bitiş aynıysa yay parçası çizilmez. Bu kurallar, bir bayrağı değiştirmenin bazen neden hiçbir şey yapmıyor gibi göründüğünü açıklar. Ayrıca yalnızca görüntülenen sonuca bakmak, yazdığınız yarıçapların gerçekten düzeltme uygulanmadan kullanıldığını kanıtlamayabilir.

Vektörleştirilmiş eğriyi yay formülü olarak değil, başlangıç noktası olarak kullanın

Raster bir logo temiz bir dairesel sınır gösterebilir; ancak elde edilen SVG bunu açık bir A komutu yerine Bézier parçaları ve düğümlerle tanımlayabilir. Görsel vektörleştirici, görünür şekilleri yeniden oluşturur; tasarımcının özgün çember merkezini, yarıçaplarını veya yay bayraklarını mutlaka çıkarmaz. Özgün vektör ana dosyası mevcutsa onu yeniden vektörleştirmek yerine doğrudan düzenleyin.

Yalnızca PNG veya JPG mevcutsa PerfectVector ile görseli düzenlenebilir vektör yollarına dönüştürün, elde edilen konturu inceleyin; ardından kesin bir geometrik yeniden çizim gerekip gerekmediğine karar verin. Rozet halkası için amaçlanan merkezi ve yarıçapları bir vektör düzenleyicide ölçün ve tutarlı geometri önemliyse yalnızca o eğri bölümü değiştirin. Geometrik olarak tam bir elipsin bozacağı düzensiz çizimler için kabul ettiğiniz vektörleştirme sonucunu koruyun. SVG düzenleme kılavuzumuz, görsel bir düzenleyici ile noktasal bir kod düzenlemesi arasında seçim yapmayı ele alır; düğüm temizleme kılavuzu ise vektörleştirilmiş eğriyi yeniden şekillendirmek zor olduğunda yardımcı olur.

Bu iş bölümü önemlidir: PerfectVector, yalnızca raster olarak mevcut bir kaynağı yollara dönüştürmenize yardımcı olabilir; kesin yay parametrelerini belirlemek ve birleşimleri kontrol etmek ise tasarım kararı olmaya devam eder. Yalnızca bir bayrağı değiştirmek için zaten temiz olan bir SVG'yi PNG'ye dönüştürüp yeniden vektörleştirmeyin.

SVG'yi teslim etmeden önce

• Özgün veya kabul ettiğiniz vektörleştirilmiş ana dosyanın bir kopyasını saklayın.
• Başlangıç noktası, bitiş noktası, yarıçaplar, dönüş ve iki bayrak değerini bu sırayla doğrulayın.
• Seçilen yolu hem yakından hem gerçek kullanım boyutunda karşılaştırın.
• Birleşimleri ve uzun yolun viewBox kenarını aşıp aşmadığını inceleyin.
• Teslim edilen SVG'yi hedef düzenleyicide veya tarayıcıda yeniden açın. Görsel olarak doğru bir ekran görüntüsü, alıcının yolu amaçlandığı gibi düzenleyebildiğini kanıtlamaz.

Sık sorulan sorular

SVG'de large-arc ve sweep bayrakları ne anlama gelir? Large-arc bayrağı, iki uç nokta arasındaki aday yaylardan kısa veya uzun olanı seçer. Sweep bayrağı, parçanın elips çevresinde hangi yönde ilerlediğini seçer. Geometri dejenere değilse birlikte dört aday arasından seçim yaparlar.

SVG large-arc bayrağını değiştirmek neden görünür bir etki yaratmıyor? Uç noktaların elipsin karşıt noktaları olup olmadığını kontrol edin; bu durumda iki yol da yarım turdur. Ayrıca aynı uç noktalar, sıfır yarıçap veya noktaları birleştirmek için çizim motorunun ayarladığı yarıçaplar olup olmadığını kontrol edin. Her seferinde tek bir parametreyi değiştirin ve görüntülenen yolu karşılaştırın.

Görsel vektörleştirme, özgün yay komutumu otomatik olarak geri getirebilir mi? Bunu varsaymayın. Bir vektörleştirici raster görselden düzenlenebilir vektör şekilleri elde edebilir; ancak sonuç Bézier eğrileri veya çok sayıda düğüm kullanabilir. Özgün geometri gerekiyorsa kesin ölçülere sahip çemberi veya elipsi bir vektör düzenleyicide yeniden oluşturun.

Kaynaklar

1. W3C — SVG 2 Paths — Yay sözdizimi, bayrak birleşimleri ve yol geometrisi.
2. W3C — SVG 2 Implementation Notes — Yarıçap düzeltmesi ve dejenere yayların işlenmesi.
3. MDN — SVG Paths — Mutlak ve göreli yol komutları ile yay öğreticisi.
4. SVG Tutorial — Arc — Yarıçapların, dönüşün ve bayrakların etkileşimli gösterimleri.
5. NaN — SVG Path Commands: Arcs — Elipsin noktalara uydurulması ve bayrak sonuçlarının etkileşimli açıklaması.

Yalnızca raster olarak mevcut ambleminizi şekillendirmeden önce düzenlenebilir bir kaynağa mı ihtiyacınız var? Görseli vektör yollarına dönüştürün, sonucu inceleyin ve kesin yarıçapı veya yönü önemli olan yayları yeniden çizin.