Satır içi SVG, halihazırda dolguları ve konturları olduğu ve sayfaya koyduğunuz anda ne olursa olsun, "şekillendirilebilir". Bu harika ve satır içi SVG'yi kullanmanın tamamen iyi bir yolu. Ancak satır içi SVG'yi CSS aracılığıyla da biçimlendirebilirsiniz, bu harika bir şey çünkü çoğumuz için CSS, güçlü ve rahat hissettiğimiz yerdir.
Beklediğiniz gibi çalışıyor. İşte basit bir örnek:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS'nin, SVG öğelerindeki stil niteliklerinden biraz "daha fazla güce" sahip olduğunu söyleyebilirsiniz. Böyle olsaydı fill="red", CSS yine de "kazanır". Bunun tersini düşünebilirsiniz çünkü stil nitelikleri satır içi stiller gibi güçlü olacak gibi görünüyor, ancak değiller. Satır içi stilleri vardır hala güçlü olsa.
Aynı şekilde, daha spesifik bir şey olursa CSS kuralları kademeli olarak düşmez. Örneğin:
.parent ( fill: red; )Bu durumda CSS kaybeder, çünkü mavi daha spesifik olarak rektöre uygulanıyor.
SVG'yi CSS aracılığıyla biçimlendirmeyi planlıyorsam, genellikle en kolayı, stil niteliklerini SVG öğelerinin tamamen dışında bırakmaktır.
Dikkat edilmesi gereken önemli bir şey!
Hakkında konuşmak için zaman harcadık . Durumun bu olduğunu söyle:
Nihayetinde o "çocuk" o "ebeveyn" e yerleştirilir değil mi? Sağ. Yani bu çalışmalı mı?
.parent .child ( fill: red; )Ama öyle değil.
Bu şekilde çalışır, onu klonlar ve ikinci SVG'de bir "Gölge DOM" a yerleştirir. Böyle bir seçici ile o gölge DOM'a giremezsiniz. Sadece çalışmıyor. Belki bir gün bir çözüm olacaktır, ancak şu anda yok.
Beğenebilirsin:
.parent ( fill: red; )Ve bu dolgu, yolda daha spesifik bir şey yoksa alt öğeleri basamaklandıracak ve etkileyecektir. Veya
.child ( fill: red; )ve o çocuğun tüm örneklerini etkiler. Ama ikisi birden değil.
Aynı şeyin farklı stillere sahip versiyonlarına ihtiyacınız varsa…
Sadece ihtiyacınız olanı veya neye ihtiyacınız varsa çoğaltın . Bilgilerin büyük çoğunluğu aynı olacak ve GZip kahvaltıda aynı metni yer.