Dolgulu Şekli Değiştirerek SVG Yol Köşelerini Yuvarlayın

SVG yolunun dolgulu köşesini yuvarlamak için yol geometrisini değiştirin. Bitişik iki düz parçayı köşeden önce bitirin, ardından yeni uç noktalarını eğriyle bağlayın. stroke-linejoin="round", birleşimde boyanan konturu değiştirir; özgün dolgulu dış hattı yerinde bırakır.

Bu öğretici, özgün dolgulu amblemin tek dik açılı köşesini yuvarlar. Düz metin düzenleyici ve tarayıcı gerekir. Sonunda 20 birimlik dairesel köşe geçişi içeren tam SVG, seçilen yarıçapın sığdığını gösteren kontrol ve karşılaştırıp geri dönebileceğiniz özgün köşeli dosya elde edersiniz.

Köşe geçişi, keskin köşenin yerini alan ve bitişik kenarlara teğet buluşan eğridir. Örnek yatay ve dikey düz kenarlar arasında çeyrek daire yayı kullanır. Rastgele izlenmiş Bézier yollarını otomatik yuvarlamaz.

Tasarımın gerektirdiği değişikliği seçin

stroke-linejoin başvurusu, yol köşelerinde konturun nasıl çizildiğini tanımlar. Değiştirmek istediğiniz boyalı kenarlıksa yuvarlak birleşim kullanın. Dolgulu silueti değiştirmek için gerçek yolunu düzenleyin.

Sade dikdörtgen için SVG rect başvurusu, rx ve ry değerlerini belgeler. Amblemimizde çapraz kenar da vardır; yuvarlak dikdörtgene dönüştürmek seçilen köşeden fazlasını değiştirirdi.

Sorun yalnızca konturdaki uzun sivri çıkıntıysa miter sivrilik tanılamasıyla başlayın. Bu makale dolgulu geometriyi değiştirir.

Köşeli özgün dosyayı kaydedin

Bu tam dosyayı emblem-original.svg içine kopyalayıp tarayıcıda açın. Sağ üst köşe (170, 30)'dur. Gelen kenar yataydır; giden kenar aşağı (170, 100)'e devam eder.

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H170V100L110 160H30Z"/>
</svg>

Bu dosyayı karşılaştırma ana dosyası olarak tutun. Yola stroke="#df9d34", stroke-width="8" ve stroke-linejoin="round" eklemek yuvarlak boyalı kenarlık verir; koyu dolgusu özgün keskin köşeye ulaşmaya devam eder.

Köşeyi 20 birimlik yayla değiştirin

Gelen çizginin sonunu köşenin 20 birim soluna, (150, 30)'a taşıyın. Giden çizginin başlangıcını 20 birim aşağı, (170, 50)'ye taşıyın. Merkezi (150, 50), yarıçapı 20 olan daire bu noktaları çeyrek yay olarak birleştirir.

İkinci tam dosyayı emblem-rounded.svg olarak kaydedin:

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z"/>
</svg>

A20 20 0 0 1 170 50, yatay ve dikey yarıçapları 20, dönüşü sıfır, küçük yay ve tarama bayrağı 1 olan, (170, 50)'de biten dairesel yay demektir. SVG yol belirtimi bu parametreleri tanımlar. Saat yönündeki bu köşede amaçlanan çeyrek daireyi seçerler. Yay bayrakları rehberi, yanlış rotadan kıvrılan yayı tanılamaya yardımcı olur.

Dairenin yarıçapı ilk uçta dikey, ikinci uçta yataydır. Dolayısıyla teğeti yatay gelen ve dikey giden çizgiyi izler. Eğri yuvarlak görünürken birleşimde kırılma yapabilir; bu yapı söz konusu kenarlara eşleşen teğet yönleri verir.

Yarıçapın mevcut kenarlara sığdığını kontrol edin

Bu 90 derecelik köşede dairesel geçiş, her bitişik kenarda yarıçapına eşit mesafe tüketir. Gelen kenar 140 birimdir, giden yalnızca 70'tir. Bu tek köşe yapısında pozitif yarıçap en fazla 70 olmalıdır; giden kenarda düz bölüm korumak istiyorsanız daha küçük yarıçap seçin.

Aşağıdaki işlev bilinçli olarak yalnızca bu amblem ve köşeyle sınırlıdır. Yeni d değerini üretmek için JavaScript konsolunda veya Node.js'de çalıştırın.

function roundEmblemCorner(radius) {
  const incomingLength = 170 - 30;
  const outgoingLength = 100 - 30;
  if (!Number.isFinite(radius) || radius <= 0 ||
      radius > Math.min(incomingLength, outgoingLength)) {
    throw new Error('Radius must be positive and fit both adjacent edges.');
  }
  return `M30 30H${170 - radius}` +
    `A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
    'V100L110 160H30Z';
}
 
roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z

80 yarıçapta basit yapı yayı (170, 110)'da, sonraki köşe (170, 100)'ün ötesinde bitirirdi. Sonraki V100 yönü ters çevirirdi. Tarayıcının çizdiği herhangi bir sonucu kabul etmek yerine bu yarıçapı reddedin.

Diğer düz kenar açılarında teğet mesafesi açıya bağlıdır. İç açısı θ olan sıradan dışbükey köşede mesafe r / tan(θ / 2) değeridir. Ortak kenarın iki ucunu yuvarlıyorsanız tüketilen iki mesafe o kenara birlikte sığmalıdır. İçbükey köşeler, mevcut eğriler ve bileşik şekiller ek geometri kararları gerektirir; bu işlev bunları işlemez.

Değişen silueti doğrulayıp kaynağı koruyun

1. İki tam SVG dosyasını aynı boyutta ve zeminde açın.
2. Boyalı birleşim sürümünden konturu geçici kaldırın. Dolgusu köşeli özgün dosyayla eşleşmelidir.
3. Yuvarlak sürümün sağ üst konturunu karşılaştırın. Kalan kenarlar, çapraz kenar ve genel konum özgün dosyayla eşleşmelidir.
4. Yarıçap kontrolünü önce 20, sonra 80 ile çalıştırın. İlki gösterilen yolu üretir, ikincisi yarıçap hatası verir.
5. Kaydedilen SVG'yi kullanılacağı hedefte inceleyin. Yuvarlama bilinçli özelliği kaldırıyorsa veya hedef görünümü değiştiriyorsa özgün dosyayı geri yükleyin.

Yöntem notu: Özgün, yuvarlak konturlu ve köşe geçişli yolları Chromium'da görüntüledik. (169, 31) dolgu örneği ilk iki şeklin içinde, köşe geçişli şeklin dışındaydı. Yukarıdaki işlev 20'yi kabul edip 80'i reddetti. Yayın iki ucunu yarıçap ve bitişik teğet yönleriyle de kontrol ettik. Bu, sunulan düz kenarlı örneği doğrular; genel köşe algoritmasını veya kesici çıktısını değil.

Eğri dışa taşıyorsa yay uç noktasını ve tarama bayrağını inceleyin. Kırılma kalıyorsa eğrinin teğetinin komşu parçayla eşleştiğini kontrol edin; Bézier yumuşak birleşim rehberi bu ayrı onarımı açıklar. SVG düzenleme rehberi, açmayı, incelemeyi ve kullanılabilir ana dosyayı korumayı ele alır.

Köşe düzenlemeden önce PerfectVector'ın rolü

Tasarım yalnızca raster görselse PerfectVector vektör yollarını geri kazanabilir. Önce dış hattı inceleyin, ardından kopyada hangi köşelerin değişeceğine karar verin. Görselden vektöre iş akışı geri kazanma adımını sağlar; bu köşe geçişini otomatik uygulamaz.

Varsa özgün vektör dosyasını kullanın. İzlenmiş kontur, bu düz kenarlı örneğe uymayan Bézier parçaları ve küçük düzensizlikler içerebilir. Basit hedef amblemi yeniden çizmek, her izlenmiş birleşimi yuvarlamaktan kolay olabilir. Bilinçli yeniden tasarımdan önce onaylı şekli koruyun ve sonraki teslim kontrolü için blog iş akışı rehberlerini kullanın.

Sık sorulan sorular

Yuvarlak kontur birleşimi dolgu köşemi neden keskin bırakıyor?

Birleşim yolun etrafındaki boyalı konturu yönetir. Dolgu mevcut yol geometrisini izler; geometriyi eğriyle değiştirene kadar özgün köşeyi korur.

İşlevi her SVG yolunda kullanabilir miyim?

Hayır. Gösterilen düz kenarlı amblemin belirtilen tek dik açılı köşesini işler. Diğer açılar, içbükey köşeler, mevcut eğriler ve ortak kenar kısıtları kendi yapılarını gerektirir.

Bu dosyayı kesime hazır hale getirir mi?

Örnekte tek dolgulu dış hattı değiştirir. Kaydedilen geometriyi inceleyin ve gerçek kesicinizin veya üretim sürecinizin gerektirdiği kontrolleri yapın; bu tarayıcı testi fiziksel kesim sonucunu kanıtlamaz.

Kaynaklar

1. MDN — SVG stroke-linejoin — Karşılaştırmada dolgu geometrisinden ayrılan kontur boyama ayarını tanımlar.
2. MDN — SVG rect — Sade dikdörtgenlerin daha basit yarıçap denetimlerini belgeler.
3. W3C — SVG eliptik yay komutları — Tam yuvarlak yolda kullanılan yay yarıçaplarını, bayrakları ve uç noktasını tanımlar.

Özgün yollar eksikse tasarımınızı PerfectVector ile geri kazanın. Dış hattını referansla karşılaştırın, geri kazanılan ana dosyayı kaydedin ve bilinçli köşe düzenlemelerini ayrı kopyada hedef boyutta test edin.