Вграденият SVG може да бъде „оформен“ в смисъл, че вече има запълвания и щрихи и какво ли не втората, когато го поставите на страницата. Това е страхотно и напълно фин начин за използване на вграден SVG. Но можете също така да оформите вградения SVG чрез CSS, което е страхотно, защото, предполагам за много от нас, CSS е мястото, където се чувстваме мощни и удобни.
Работи почти така, както бихте очаквали. Ето един прост пример:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS има малко „повече мощност“, може да се каже, от атрибутите на стила на самите SVG елементи. Ако това му хареса fill="red", CSS пак щеше да „спечели“. Може да си помислите обратното, защото изглежда, че атрибутите на стила биха били мощни като вградените стилове, но те не са. Вградените стилове все още са мощни.
По същия начин правилата на CSS не се каскадират, ако се случи нещо по-конкретно. Например:
.parent ( fill: red; )CSS губи в този случай, тъй като синьото се прилага по-конкретно към rect.
Ако планирам да оформям SVG чрез CSS, обикновено ми е най-лесно да оставя изцяло атрибутите на стил от SVG елементите.
Важно нещо, което трябва да знаете, предупреждение!
Прекарахме време в разговори . Кажете, че това е ситуацията:
В крайна сметка това „дете“ се поставя в този „родител“, нали? Нали. Значи това трябва да работи?
.parent .child ( fill: red; )Но това не е така.
По начина , по който работи, той клонира това и го поставя в „Shadow DOM“ във втория SVG. Не можете да проникнете през този сянка DOM с такъв селектор. Просто не работи. Може би някой ден ще има решение, но в момента няма.
Можете да направите като:
.parent ( fill: red; )И това запълване ще каскадира и ще повлияе на дъщерните елементи, ако няма нищо по-конкретно в начина. Или
.child ( fill: red; )и засягат всички случаи на това дете. Но само не и двете.
Ако имате нужда от различни по стил версии на едно и също нещо ...
Просто дублирайте или каквото ви трябва. По-голямата част от информацията ще бъде идентична и GZip яде идентичен текст за закуска.