SVG textPath path Özniteliği: Safari TP 253’te Metin Ayrı Yol İstemiyor

Safari Technology Preview 253, SVG <textPath> öğesine SVG 2 path özniteliği desteği getirdi: metin artık href ile ayrı bir <path> öğesine bağlanmadan, yolu kendi üzerinde taşıyarak eğri boyunca akabiliyor. 23 Eylül 2026 tarihli aynı sürüm, sibling-index() ve sibling-count() fonksiyonlarını container query koşullarının içinde de kullanılabilir yaptı (WebKit).

Dairesel rozet, mühür logosu ya da eğik slogan çizen herkes aynı zahmeti bilir: önce <defs> içine görünmez bir yol tanımla, ona id ver, sonra metni o id’ye bağla. Bu yazıda yeni kısayolun nasıl çalıştığını, hangi tarayıcıda bugün güvenle kullanılabildiğini ve Safari kararlı sürüme geçene kadar nasıl bir yedekle yazılması gerektiğini anlatıyoruz.

SVG textPath path özniteliği nedir?

path, <textPath> öğesinin yol geometrisini doğrudan SVG yol verisi (d sözdizimi) olarak almasını sağlayan SVG 2 özniteliği. Chrome’un sürüm notuna göre bu öznitelik, ayrı tanımlanmış <path> öğelerine olan ihtiyacı azaltıyor (Chrome 147 sürüm notları). Aradaki fark kodda net görünüyor:

<!-- Eski yöntem: ayrı path + href -->
<svg viewBox="0 0 300 160">
  <defs>
    <path id="yay" d="M 20 140 C 80 20, 220 20, 280 140"/>
  </defs>
  <text><textPath href="#yay">Metin yola oturuyor</textPath></text>
</svg>

<!-- Yeni yöntem: yol textPath'in içinde -->
<svg viewBox="0 0 300 160">
  <text>
    <textPath path="M 20 140 C 80 20, 220 20, 280 140">Metin yola oturuyor</textPath>
  </text>
</svg>

ESKİ · HREF

İki öğe, bir bağlantı

<defs> içinde id’li bir <path> tanımlanır, <textPath href="#id"> ona işaret eder. Yol başka yerde de kullanılabilir.

YENİ · PATH

Tek öğe, satır içi yol

Yol verisi doğrudan path="M … C …" olarak yazılır. id yönetimi ve <defs> gerekmez; SMIL ile de canlandırılabilir.

WebKit uygulamasının ayrıntısı da ilginç: satır içi yol verisi zaten <text> öğesinin koordinat uzayında olduğu için ek bir dönüşüm (transform) uygulanmıyor. Öznitelik, <path> öğesinin d’si gibi animasyonlu yol olarak kaydedildiğinden SMIL animasyonuna da açık (WebKit PR #73457). SMIL ile yol canlandırmayı merak ediyorsan JavaScript’siz SVG animasyonu yazımıza bakabilirsin.

path ile href birlikte yazılırsa hangisi kazanır?

SVG 2 kuralına göre iki öznitelik birlikte varsa geometri path’ten alınır. Chrome 147’nin sürüm notları çözümleme sırasını dört maddede özetliyor (Chrome 147):

1 · İKİSİ DE VAR

path kazanır

Hem path hem href yazılmışsa yol path özniteliğinden okunur.

2 · YALNIZCA PATH

Satır içi yol

path tek başına ve geçerli biçimde ayrıştırılıyorsa o yol kullanılır.

3 · PATH BOZUK

href’e düşer

path yoksa ya da ayrıştırılamıyorsa, href ile işaret edilen <path> kullanılır.

4 · YALNIZCA HREF

Eski davranış

Sadece href kullanan mevcut kod aynen çalışmaya devam eder.

Bu sıralama bize pratik bir yedekleme stratejisi veriyor. Yolu hem path olarak hem de <defs> içinde tanımlayıp ikisini birlikte yazarsan, özniteliği tanıyan tarayıcı satır içi yolu kullanır. Tanımayan tarayıcı bilmediği özniteliği görmezden gelir ve href’teki yola bakar. Metnin hiç çizilmemesi riski ortadan kalkar.

<svg viewBox="0 0 300 160">
  <defs>
    <path id="yay" d="M 20 140 C 80 20, 220 20, 280 140"/>
  </defs>
  <text>
    <textPath path="M 20 140 C 80 20, 220 20, 280 140" href="#yay">Metin yola oturuyor</textPath>
  </text>
</svg>

Hangi tarayıcıda ne zaman güvenle kullanılır?

Safari, bu özelliği destekleyen büyük tarayıcılar arasında son sırada. WebKit’in çekme isteği, değişikliğin amacını “Chrome, Edge ve Firefox uygulamalarıyla eşleşmek” olarak tanımlıyor (WebKit PR #73457). Chrome tarafında destek, 7 Nisan 2026’da kararlı sürüme çıkan Chrome 147 ile geldi (Chrome 147). Firefox ise Can I use verisine göre 61. sürümden beri destekliyor (Can I use).

FIREFOX

Destekliyor

61. sürümden beri.

CHROME

Destekliyor

Chrome 147’den beri (kararlı sürüm: 7 Nisan 2026).

EDGE

Destekliyor

WebKit PR’ı Edge’i destekleyen tarayıcılar arasında sayıyor.

SAFARI

Yalnızca TP 253

Kararlı Safari’ye geçiş tarihi açıklanmadı; bugün href yedeği şart.

Özetle: Safari’nin kararlı sürümü güncellenene kadar path’i tek başına kullanmak iPhone ve Mac’teki Safari kullanıcılarını dışarıda bırakır. Önceki bölümdeki path + href kalıbı bugün yayına alınabilecek en güvenli yol. Safari’nin son dönemde kapattığı başka bir açık için top-level await yazımıza bakabilirsin.

Container query koşullarında sibling-index() ne işe yarar?

sibling-index() bir öğenin kardeşleri arasındaki sırasını, sibling-count() ise toplam kardeş sayısını tam sayı olarak döndürüyor; en yaygın kullanımı calc() içinde (Web Platform Features Explorer). Kademeli animasyon gecikmesi klasik örnek:

li {
  transition-delay: calc(sibling-index() * 60ms);
}

TP 253’teki yenilik, bu fonksiyonların artık container query koşullarının içinde de kullanılabilmesi. Aynı sürüm CSSContainerRule.conditions desteğini de ekliyor (WebKit). Yani bir öğenin kaçıncı kardeş olduğu, yalnızca stil değerlerine değil, hangi container query kuralının devreye gireceği hesabına da girebiliyor. Container query’leri bileşen düzeyinde düşünmek için Container Query’leri Media Query Gibi Kullanmayı Bırakın yazımız iyi bir başlangıç.

Fonksiyonların kendisi ise yeni değil; üç büyük motorda da kararlı sürümde:

HAZİRAN 2025

Chrome ve Edge 138

İlk kararlı destek.

ARALIK 2025

Safari 26.2

iOS ve macOS’ta kararlı destek.

AĞUSTOS 2026

Firefox 154

Baseline “yeni kullanılabilir” oldu (18 Ağustos 2026).

EYLÜL 2026

Safari TP 253

Container query koşullarında kullanım.

Tasarımcı ve frontend geliştirici için ne değişiyor?

• Daha sade SVG: Rozet, mühür ve dairesel logo metinlerinde <defs> ve id yönetimi ortadan kalkıyor; tek bir <textPath> yetiyor.
• Bileşen dostu kod: id çakışması riski olmadığı için aynı SVG bileşeni sayfada birden fazla kez güvenle kullanılabiliyor.
• Safari yedeği: Kararlı Safari destekleyene kadar href’i silme; iki özniteliği birlikte yaz.
• TP ≠ kararlı sürüm: Technology Preview’daki özellikler kararlı Safari’ye değişerek ya da gecikerek gelebilir; üretimde yalnızca kararlı sürümü test et.

Web platformuna gelen diğer yeniliklerden CSS’e gelen navigasyon eşleştirme taslağı de benzer şekilde bileşen düzeyinde düşünmeyi kolaylaştırıyor.

Sıkça sorulan sorular

SVG textPath path özniteliği ne işe yarar?

Metnin izleyeceği yolu, ayrı bir <path> öğesi tanımlayıp href ile bağlamak yerine doğrudan <textPath> üzerinde SVG yol verisi olarak yazmayı sağlar. Böylece <defs> ve id yönetimi gerekmez.

Safari textPath path özniteliğini destekliyor mu?

Şu an yalnızca Safari Technology Preview 253 destekliyor; kararlı Safari sürümüne geçiş tarihi açıklanmadı (WebKit). Kararlı Safari için href ile ayrı bir yol tanımını yedek olarak tutmak gerekiyor.

textPath’te hem path hem href varsa hangisi kullanılır?

SVG 2’ye göre path önceliklidir. path yoksa ya da ayrıştırılamıyorsa tarayıcı href ile işaret edilen <path> öğesine düşer (Chrome 147).

sibling-index() hangi tarayıcılarda çalışıyor?

Chrome ve Edge 138, Safari 26.2 ve Firefox 154’ten itibaren kararlı sürümde çalışıyor; özellik 18 Ağustos 2026’da Baseline “yeni kullanılabilir” oldu (Web Platform Features Explorer). Container query koşulları içinde kullanımı ise şimdilik Safari TP 253’te geldi.

Kaynaklar

• WebKit: Release Notes for Safari Technology Preview 253 (23 Eylül 2026)
• Chrome for Developers: Chrome 147 release notes
• WebKit PR #73457: [SVG2] Implement the path attribute on <textPath>
• Can I use: SVG textPath path
• Web Platform Features Explorer: sibling-count() and sibling-index()