CSS ile Ölçeklenebilir Vektör Grafiğini (SVG) Şekillendirme

Bugün, Ölçeklenebilir Vektör Grafiği (SVG) konusundaki tartışmamıza devam edeceğiz ve önceki yazımızda da belirttiğimiz gibi, SVG kullanmanın avantajlarından biri de CSS ile tasarlanabileceği..

SVG Styling Özellikleri

SVG stilini temelde normal HTML öğelerinde olduğu gibi çalışır, aslında bazı ortak özellikleri de paylaştı. Bununla birlikte, özellikle CSS dışında kendi spesifikasyonlarına sahip SVG nesnesi için amaçlanan başka özellikler de vardır..

Örneğin, Normal HTML öğesinde, arka plan rengini ya da arka plan rengi veya arka fon CSS özelliği. SVG'de biraz farklıdır; arka plan rengi doldurmak bunun yerine özellik. Ayrıca, elemanın sınırı ile belirtilir. inme mülkiyet ve ile değildir sınır Normal HTML’de yaptığımız gibi, tüm listeyi burada görebilirsiniz..

Adobe Illustrator gibi bir vektör editörü ile uzun süredir çalışıyorsanız, SVG'deki özellik adlandırma mekanizmasının editörden geldiğini hızlı bir şekilde tahmin edebilirsiniz..

SVG Stil Uygulaması

SVG elemanını biçimlendirmek için aşağıdaki yollardan birini kullanabiliriz;

Sunum Nitelikleri

Tüm SVG özellikleri listesini gördüyseniz, tümü öğenin sunumunu değiştirmek için doğrudan öğeye eklenebilir. Aşağıdaki örnek nasıl ekleyebileceğimizi gösterir doldurmak ve inme doğrudan mülkiyet rect elemanı;

Dikdörtgen, aşağıdaki ekran görüntüsü gibi görünecek;

Satır İçi Stil Sayfası

Biz de stil ekleyebiliriz stil bağlıyor. Aşağıdaki örnekte biz de ekleyeceğiz doldurmak ve inme -e rect, ama bu sefer onu içine ekledik stil ve CSS3 ile döndürün dönüştürmek mülk, bunun gibi;.

Dikdörtgen, aynı sonucu verecek, sadece şimdi de döndürülmüş olacak;

İç Stil Sayfası

SVG stilini içine yerleştirin. stil eleman da mümkündür ve normal HTML'de nasıl yaptığımızdan farklı değildir. Aşağıdaki örnekte, içindeki SVG öğelerini etkilemek için iç stilleri nasıl eklediğimizi göstermektedir. .html belge.

Ancak, SVG XML tabanlı bir dildir, bu nedenle bir satır içi stil sayfası eklemek üzereyken .svg Belge, stilleri bildirimi içine koymak gerekir cdata, aşağıdaki gibi;

cdata burada gereklidir, çünkü CSS olabilir > XML ayrıştırıcılarıyla çakışacak karakter. kullanma cdata Çakışan karakter stil sayfasında belirtilmemiş olsa bile, SVG'ye stil gömmek için şiddetle tavsiye edilir..

Dış stil sayfası

Dış stil sayfası ayrıca, içindeki SVG öğeleri için de aynı şekilde çalışır. .html belge.

Tekrar içinde .svg harici stil sayfasını bir xml-stylesheet, öyle.

Gruplandırma Elemanları

SVG elemanları ile gruplandırılabilir öğesi. Elemanları gruplamak, gruptaki tüm elemanlarla ortak stilleri paylaşmamıza izin verir, işte bir örnek;

Hem dikdörtgen hem de daire aynı sonucu verecektir.

Son düşünce

SVG'nin CSS ile stillendirilmesiyle ilgili tüm önemli hususları gözden geçirdik ve bu, SVG ile grafik sunmanın avantajlarından sadece bir tanesi. Bir sonraki gönderide bir başkasına bakacağız, bu yüzden bizi izlemeye devam edin.

• Demoyu Gör
• Kaynak İndir