Biz doğru SVG yerleşik üç araçları ile kavisli hat boyunca metin akabilir: , ve .
Snippet
Dangerous Curves Ahead Oraya Nasıl Ulaştık
SVG'de eğri bir çizgi çizdiğimizi ve ona adlı bir kimlik verdiğimizi hayal edin curve.
CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen NgwPYB'ye bakın.
Ardından, etiketi kullanarak içeriği SVG'ye bırakıyoruz ve buna SVG viewBoxboyutlarıyla eşleşen bir genişlik veriyoruz . Henüz bir şey görmeyeceğiz, ancak metnin ekranın dışında bir yerde olduğunu biliyoruz.
CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen ZyaYOw'a bakın.
Bu metni gerçekten görmek istiyoruz. Metnimizi etikete sarabilir ve daha önce belirlediğimiz yol kimliğini çağırarak onu eğri yolumuzun çizgilerini takip edecek şekilde ayarlayabiliriz.
CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen Kqywpe'ye bakın.
Şimdi gazla pişiriyoruz!
Bu eğrinin görülmesini istemiyoruz, bu yüzden yola şeffaf bir dolgu verelim. Bunu CSS'de de yapabilirdik, ancak bu örnek uğruna doğrudan SVG işaretlemesine satır içi olarak uyguluyoruz.
CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen xrPbgx'e bakın.
Gerisi CSS! Tam yazı tipi boyutu, metnin kendisine ve hangi yazı tipi ailesinin kullanıldığına bağlı olacaktır, ancak doğru dengeyi bulduğunuzda, SVG'nin kendisi yanıt verebilirliği ele alacak ve her ölçekte her şeyin eğri üzerinde kalmasını sağlayacaktır.
CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Eğri Bir Yol Boyunca Kalem SVG Metnine bakın.
Aynı yöntemi herhangi bir eğri yola uygulayabiliriz.
CodePen'de Geoff Graham (@geoffgraham) tarafından yazılan Eğri Bir Yol Boyunca Kalem SVG Metnine bakın.