Ölçeklenebilir Vektör Grafiklerinde Metinle Çalışma (SVG)

Önceki yayınlarımızda, SVG'yi şekiller oluşturmak için kullandık. Bu yazıda, başlığın dediği gibi, biz içine bakacağız SVG ile Metin Oluşturma. Düz HTML metninin yapabileceklerinin ötesinde, metinle yapabileceğimiz birçok şey var.

Öyleyse onları kontrol edelim..

Temel uygulama

Ama, daha ileri gitmeden önce, bakalım nasıl SVG'de Metin çok temel düzeyde oluşur:

Yukarıdaki kod parçasından görebileceğiniz gibi SVG'deki metin, yeterince mantıksal bir etiketle tanımlanmıştır., . Bu eleman temelde sadece gerektirir x ve y temel koordinatları belirleme özellikleri.

Resim kaynağı: Wikipedia.org

Ve işte metnin nasıl görüneceği. Şimdilik, HTML’deki normal metinlerle hiçbir farkı olmadığı görülüyor.

Temel Metin Stilleri

Metin ayrıca CSS özellikleriyle de stillendirilebilir. yazı ağırlıklı, yazı stili, ve text-decoration hangi aracılığıyla uygulanabilir satır içi stil, iç stil veya Dış tarzı Önceki yazılarda tartıştığımız gibi CSS ile SVG Tasarım. İşte bazı örnekler.

cesur

 Bu, Ölçeklenebilir Vektör Grafiğindeki (SVG) metindir 

İtalik

 Bu, Ölçeklenebilir Vektör Grafiğinde (SVG) italik bir metindir 

Altını çizmek

 Bu, Ölçeklenebilir Vektör Grafiğinde (SVG) altı çizili metindir. 

eleman

Bazı durumlarda, yalnızca Metnin belirli bir kısmına stil veya nitelik uygulamak istediğimizde, . Aşağıdaki bu örnek, nasıl eklediğimizi göstermektedir cesur, italik ve altını çizmek tek bir metin satırına.

 Bu kalın, bu italik ve bu altı çizili 

Yazma Modu

Metin yalnızca soldan sağa. Dünyanın diğer bölgelerinde, örneğin Japonya, metinler yukarıdan alt. SVG’de bu, yazma modu nitelik.

 ぁ ぃ ぅ ぇ ぉ か き  

Yukarıdaki örnekte birkaç rastgele Japonca karakter koyduk (bana anlamlarını sorma, gerçekten hiçbir fikrim yok) ve bu stil bildirimi ile yönünü değiştirdik, yazma modu: tb, nerede tb için stand yukarıdan alt.

Metin Anahat

SVG'deki metin temelde bir grafiktir, yani biz de uygulayabilirsiniz inme Diğer şekillerde yaptığımız gibi, Metne bir sınır çizgisi ekleme özelliği.

Yukarıdaki kod parçasında, ekledik: inme özniteliği öğesini seçip metin rengini kaldırarak doldurmak özniteliği Yok aşağıdaki metin sunumuyla sonuçlanacaktır.

Metin Yolu

SVG'de Metin yalnızca yatay ve dikey olarak görüntülenemez, aynı zamanda Path desenini takip et. İşte nasıl yapılacağı.

İlk önce tanımlamamız gerekiyor yol. Bununla birlikte, doğrudan HTML’de bir Yol oluşturmak o kadar da sezgisel değildir, çoğumuzdan kaçınmaya çalışacağımızdan eminim ki koordinatları ve bazı komutları anlamamız gerekir. Bu yüzden bu adımı kolaylaştırmak için şahsen bir vektör düzenleyici (Inkscape veya Illustrator) açmanızı, bir yol oluşturmanızı ve SVG kodunu oluşturmanızı öneririm..

Sonra koymak içindeki öğe eleman. defs burada tanım anlamına gelir.

Biz de ekledik dikkat edin İD özniteliği . Şimdi, sadece Yolu bağlamamız gerekiyor. İD bizim metnimize eleman, bunun gibi;

    Lorem ipsum dolor amet comectetur oturmak.   

Daha fazla okuma: SVG Yolları

Metin Gradyanı

Metni doldurmak için bir arka plan eklemek SVG'de de mümkündür ve yukarıdaki Metin Yolu bölümünde başarılı olduysanız, bu çok daha kolay olacaktır..

İlk olarak, degrade renklerini tanımlamamız gerekir.

Gerekli tüm tanımlamalar yapıldığında, şimdi sadece metni eklemek ve doldurmak degradenin özniteliği İD aşağıdaki gibi özellik;

 meyil 

Ve işte burada, gradyanı olan metin.

Daha fazla okuma: SVG Gradyanı ve Deseni

Diğer Referanslar

SVG’deki metin hiç şüphesiz güçlü, bu yazıda barındırabileceğimizin ötesinde yapabileceğimiz pek çok şey var. Bu nedenle, aşağıda bu konuya olan ilginize hizmet etmek için birkaç referans daha oluşturduk..

• SVG'deki Yazı Tipleri Hakkında - Divya Manian
• SVG Metin Resmi Belgeleri - W3.org
• Mozilla Dev. Şirketinde SVG Dovumentation. Örnekler ve Araçlar ile Ağ - MDN
• SVG Yazma Modu Özelliği - MDN

• Demoyu Gör
• Kaynak İndir