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; )

Но это не так.

Таким образом , он клонирует это и помещает в «Shadow DOM» во втором SVG. Вы не можете проникнуть сквозь эту теневую DOM с помощью такого селектора. Просто не работает. Возможно, когда-нибудь будет решение, но его нет прямо сейчас.

Вы можете: