Noktalı SVG konturları: Aralık ve yuvarlak uç ayarı

Noktalı bir SVG konturu için şekle bir kontur verin, stroke-linecap="round" ayarlayın ve stroke-dasharray="0 20" gibi sıfır uzunluklu bir kesik çizginin ardından pozitif bir boşluk kullanın. Kontur genişliği noktanın çapını belirler. Kesik çizgi dizisindeki ikinci sayı, yol boyunca nokta merkezleri arasındaki mesafeyi belirler; noktaların görünür kenarları arasındaki boş alanı değil.

Uçları yuvarladıktan sonra bordür sıkışık görünüyorsa bu ayrım önemlidir. Kapalı bir rozet başka bir sorun daha getirir: tekrar, başlangıç noktasına daha kısa bir kalan aralıkla ulaşabilir. Aşağıdaki örnekler uç biçimini, görünür aralığı ve kapanış birleşimini birbirinden ayırır; böylece doğru değeri ayarlayabilirsiniz.

Bunlar dekoratif kontur ayarlarıdır. Yeni bir ofset konturu oluşturmaz veya boyanan her noktayı ayrı bir kesim yoluna dönüştürmez.

Düz uçları, yuvarlak uçları ve noktaları karşılaştırın

stroke-dasharray, boyanan kesik çizgi uzunlukları ile boyanmayan boşluk uzunluklarını dönüşümlü olarak uygular. İki sayılık bir liste, bu tekrarı incelemeyi kolaylaştırır. MDN — stroke-dasharray ayrıca tek sayıda öğe içeren bir listenin, çift sayıda öğeli bir dizi oluşturmak üzere nasıl tekrarlandığını açıklar.

Bu bağımsız SVG'yi bir dosyaya kopyalayıp tarayıcıda açın. Her özgün yol 240 birim uzunluğundadır ve kontur genişliği 8'dir:

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

İlk satır, düz uçlarla 12 20 kullanır. Her tam kesik çizgi 12 birim kaplar ve ardından 20 birim görünür boşluk bırakır. İkinci satır aynı sayıları yuvarlak uçlarla kullanır. Her uç, kesik çizginin temel bitiş noktasının 4 birim ötesine uzanır; dolayısıyla tam bir kesik çizgi 20 birim kaplar ve görünür boşluk 12'ye düşer.

Üçüncü satır, kesik çizgi uzunluğunu sıfıra indirir. Yuvarlak uçlar, bu düz yolda çapı 8 olan ve merkezleri birbirinden 20 birim uzakta bulunan noktalar oluşturur. Görünür kenarları arasındaki boşluk 12 birimdir. W3C'nin SVG boyama kuralları, sıfır uzunluklu kesik çizgilerin ele alınması dâhil olmak üzere kesik çizgi uçlarını tanımlar; MDN — stroke-linecap ise uç geometrisini açıklar.

Mesafe kalibrasyonu veya dönüşüm uygulanmamış düz bir parçada, tam ve birbirinden ayrı kesik çizgiler için yararlı hesaplamalar şunlardır:

• Düz uç: görünür kesik çizgi uzunluğu = dash; görünür boşluk = gap.
• Yuvarlak uç: görünür kesik çizgi uzunluğu = dash + stroke-width; görünür boşluk = gap - stroke-width.
• Yuvarlak nokta: çap = stroke-width; merkez aralığı = gap; görünür boşluk = gap - stroke-width.

Son hesaplamanın sonucu sıfır veya negatifse noktalar birbirine dokunur ya da üst üste biner. Kıvrımlarda yol boyunca ölçülen mesafe, noktalar arasındaki doğrudan mesafeden farklıdır. Düz çizgi için hesaplanan boşluğu tüm kontura uygulamak yerine köşeleri ve eğrileri inceleyin.

Tekrarı kapalı bir rozete uyarlayın

Aşağıdaki dikdörtgen rozet yollarının her biri 180 × 120 birimdir. Çevreleri 2 × (180 + 120) = 600 olur. Yol, sol üst köşeden başlayıp saat yönünde ilerler.

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

Solda 0 32, nokta merkezlerini yol üzerinde 0, 32, 64 ve bu şekilde 576'ya kadar devam eden mesafelere yerleştirir. Yol başlangıcına dönmeden önce yalnızca 24 birim kalır. Kapanış aralığı diğer 32 birimlik aralıklardan daha kısa olduğu için birleşim düzensizdir. SVG'nin görüntüleme boyutunu büyütmek, bu uyumsuzluğu çözmeden büyütür.

Sağda 0 30, çevreyi 20 eşit aralığa böler. Bu belirli dikdörtgende her iki kenar uzunluğu da 30'a bölünebildiğinden köşeler noktalarla hizalanır. Her düz kenarda 8 birimlik noktalar, 22 birim görünür boşluk bırakır. Bu, seçilen rozetin tekrarını düzeltir; her eğri konturda aynı görsel aralığın oluşacağına dair bir vaat değildir.

Kendi konturunuzda istediğiniz nokta sayısını seçin ve başlangıç tekrar mesafesini bulmak için yolun çevresini bu sayıya bölün. Ardından gerçekte görüntülenen sonucu, özellikle kıvrımları, küçük ayrıntıları ve kapanış noktasını kontrol edin. Birden fazla bağlantısız alt yol içeren bir şekil ayrıca dikkat gerektirir; SVG boyama belirtiminde açıklandığı gibi kesik çizgi deseni her alt yol için yeniden başlar.

stroke-dashoffset, desenin başlangıç konumunu yol boyunca kaydırır. Belirgin bir birleşimi daha az dikkat çeken bir yere taşıyabilir, ancak 32 birimlik tekrarın 600'ü tam bölmesini sağlayamaz. Amaç tutarlı bir kapanışsa uygun bir tekrar mesafesi kullanın. MDN — stroke-dashoffset bu faz ayarını belgeler.

Her iki bağımsız SVG dosyasını ayrı ayrı açtık ve tarayıcıda nasıl işlendiklerini bu karşılaştırmayla kontrol ettik. Örneklerde birimsiz değerler kullanılır; pathLength kalibrasyonu, dönüşümler veya harici CSS yoktur. Bu örnekler, elle hazırlanmış bu yolları gösterir; PerfectVector dönüşümü veya uygulamalar arası uyumluluk testi değildir.

Boyutlandırma ve boyama ayarlarını tutarlı tutun

Yukarıdaki gibi SVG'nin kendi koordinatlarında sayısal değerlerle başlayın. Bunları yüzdelerle değiştirip yol çevresinin aynı oranını temsil ettiklerini varsaymayın. MDN — stroke-dasharray, yüzdelerin yol uzunluğuna değil görüntüleme alanına göre hesaplandığını açıklar.

Mesafeleri normalize etmek için pathLength kullanıyorsanız kesik çizgi desenini kalibre edilmiş bu mesafe sisteminde hesaplayın. Bu örneğin kalibre edilmemiş çevresini, başka bir kod parçasındaki normalize edilmiş kesik çizgi değerleriyle karıştırmayın. SVG kontur animasyonu kılavuzu, çizimin aşamalı görünmesi için yerleşik yol uzunluğu kalibrasyonunun ayrı bir kullanımını gösterir.

Yalnızca bordürü istediğinizde fill="none" ayarlayın. Konturun bir kısmı kesikli olsa bile dolgu görünür kalabilir. Beklenen noktalar kaybolursa öğenin görünür bir konturu olduğunu ve bir CSS kuralının sunum özniteliklerini geçersiz kılmadığını doğrulayın. Kaybolan kontur kontrol listesi, aralıkları değiştirmeye başlamadan önce bu kontrolleri ele alır.

Geometrinin çevresinde konturu için yeterli alan bırakın. 8 birimlik bir kontur yolun dışına taşar ve yuvarlak uçlar açık uçların ötesine uzanır. Örnekte, noktalarının görüntüleme alanı tarafından kırpılmaması için kenar boşlukları vardır. Teslim edeceğiniz SVG'yi gerçek görüntüleme boyutunda test edin; büyütülmüş bir önizlemede ayrı görünen küçük noktaları bir simgede görmek zor olabilir.

Çizim hazırlığını bordür tasarımından ayırın

Rozetin içindeki motif yalnızca PNG veya JPG olarak mevcutsa PerfectVector'ın görüntüden vektöre iş akışı, bu motif için düzenlenebilir SVG çizimi hazırlayabilir. Bordürün içine yerleştirmeden önce silüeti, küçük boşlukları ve ayrı bölgeleri özgün görüntüyle karşılaştırın. Dekoratif konturu ayrı bir şekil olarak tutun; böylece kontur genişliği ve nokta aralığı bağımsız olarak değiştirilebilir.

Varsa vektör biçimindeki mevcut asıl dosyayı saklayın. Bir dikdörtgeni veya başka bir basit bordürü doğrudan düzenleyicide çizmek genellikle kolaydır. Vektörleştirme, otomatik olarak bir ofset bordür tasarlamaz, tek bir merkez çizgisini elde etmez veya kesik çizgi aralıklarını seçmez. Vektörleştirilen kalın bir çizginin iki sınırı varsa tek çizgili SVG kılavuzu, bunun tek bir çizim güzergâhından neden farklı olduğunu açıklar.

Kesim iş akışında, makinenin dekoratif kontur boyamasını ayrı nokta biçimli kesimler olarak yorumlayacağını varsaymayın. Amaçlanan geometriyi bir düzenleyicide hazırlayın ve hedef uygulamanın önizlemesini inceleyin. Bu yazı, kesici davranışını değil tarayıcı boyamasını test eder. Blogun düzenleme kılavuzları, ilgili dosya hazırlama kararlarını ele alır.

Son konturu kontrol edin

Dosyayı kabul etmeden önce kısa açık yolu ve kapalı bordürü ayrı ayrı inceleyin. Uç stilini, kontur genişliğini ve tekrar sayılarını doğrulayın; ardından açık yoldaki ilk ve son işaretleri ve kapalı yolun birleşimini inceleyin. Dar eğrileri, çizimin kullanılacağı boyutta kontrol edin.

Kaydedilmiş SVG'yi hedef ortamında yeniden açın. Düzenlenebilir dekoratif boyama gerekiyorsa kontur özelliklerini koruyun. Hedef ortam kalıcı konturlar gerektiriyorsa bu dönüşümü ayrı bir düzenleme adımı olarak yapıp doğrulayın. Aralıkları daha sonra değiştirebilmek için düzenlenebilir bir kaynak kopyası saklayın.

Sık sorulan sorular

Yuvarlak uçları seçtikten sonra kesik çizgilerim neden birbirine daha yakın görünüyor? Yuvarlak uçlar, kesik çizginin her iki ucunun ötesine uzanır. Düz bir parçada, işaretler birbirinden ayrı kaldığı sürece tam kesik çizgiler arasındaki görünür boşluk, belirtilen boşluktan kontur genişliğinin çıkarılmasıyla bulunur.

Kısa kapsüller yerine nasıl yuvarlak noktalar oluşturabilirim? Sıfır uzunluklu bir kesik çizgi, pozitif bir boşluk ve yuvarlak uçlar kullanın. Örneğin, stroke-dasharray="0 20" ile 8 birimlik kontur genişliği, düz bir yolda merkezleri 20 birim aralıklı olan 8 birimlik noktalar oluşturur.

Kapalı bir konturda neden bir boşluk farklı? Tekrar mesafesi çevreyi eşit olarak bölmüyor olabilir. Tekrarı yol uzunluğuna uyarlayın, ardından kapanış noktasını ve köşeleri inceleyin. Kesik çizgi ofsetini kaydırmak desenin fazını değiştirir, ancak aritmetik uyumsuzluğu düzeltmez.

Kaynaklar

1. MDN — stroke-dasharray — Dönüşümlü kesik çizgi ve boşluk listesini ve değerlerinin nasıl ele alındığını tanımlar.
2. MDN — stroke-linecap — Düz ve yuvarlak uç geometrisini ve sıfır uzunluk davranışını açıklar.
3. W3C — SVG painting — Kesik çizgi boyamasını, uçların ele alınmasını ve alt yollarda desenin işlenmesini belirtir.
4. MDN — stroke-dashoffset — Kesik çizgi desenini kaydırmak için kullanılan ofseti tanımlar.

Rozetinizin motifi bir raster görüntüyle başlıyorsa PerfectVector ile bir SVG adayı hazırlayın, konturlarını ve boşluklarını inceleyin ve noktalı bordürü ayrı, düzenlenebilir bir şekil olarak ekleyin.