20: Стилізація вбудованого SVG - Повноваження та обмеження - CSS-хитрощі

Вбудований 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 програє, оскільки синій колір застосовується більш конкретно до прямокутника.

Якщо я планую стилізувати SVG за допомогою CSS, мені, як правило, найпростіше просто залишити атрибути стилю поза елементами SVG.

Важлива річ, яку слід знати!

Ми витратили час на розмови . Скажімо, така ситуація:

Зрештою, цю "дитину" вкладають у цього "батька", чи не так? Правильно. То це має спрацювати?

.parent .child ( fill: red; )

Але це не так.

Цей спосіб працює, він клонує це і поміщає його у "Тіньовий DOM" у тому другому SVG. Ви не можете проникнути крізь цей тіньовий DOM таким селектором. Просто не працює. Можливо, коли-небудь буде рішення, але зараз цього немає.

Ви можете зробити, як: