20: Stylizowanie wbudowanego SVG - uprawnienia i ograniczenia - CSS-Tricks

Inline SVG może być „stylizowany” w tym sensie, że ma już wypełnienia i obrysy, a także w momencie, gdy umieścisz go na stronie. To niesamowity i całkiem niezły sposób korzystania z wbudowanego SVG. Ale możesz także stylizować wbudowane SVG za pomocą CSS, co jest trochę niesamowite, ponieważ wielu z nas wyobrażam sobie, że CSS jest tym, gdzie czujemy się potężni i wygodni.

Działa prawie tak, jak można się spodziewać. Oto prosty przykład:

.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )

Można powiedzieć, że CSS ma nieco „większą moc” niż atrybuty stylu w samych elementach SVG. Gdyby tak fill="red"było, CSS nadal by „wygrał”. Możesz pomyśleć odwrotnie, ponieważ wydaje się, że atrybuty stylu byłyby potężne jak style wbudowane, ale tak nie jest. Style inline są jednak nadal potężne.

Podobnie reguły CSS nie spadają kaskadowo, jeśli dzieje się coś bardziej szczegółowego. Na przykład:

.parent ( fill: red; )

CSS przegrywa w tym przypadku, ponieważ niebieski jest dokładniej stosowany do prostokąta.

Jeśli planuję nadać styl SVG za pomocą CSS, generalnie wydaje mi się, że najłatwiej jest po prostu całkowicie wyłączyć atrybuty stylu z elementów SVG.

Ważne, aby wiedzieć alert!

Spędziliśmy czas na rozmowie . Powiedz, że tak wygląda sytuacja:

Ostatecznie to „dziecko” zostaje umieszczone w tym „rodzicu”, prawda? Dobrze. Więc to powinno działać?

.parent .child ( fill: red; )

Ale tak nie jest.

Ten sposób działa, klonuje to i umieszcza w „Shadow DOM” w tym drugim SVG. Nie możesz przebić się przez ten cień DOM za pomocą takiego selektora. Po prostu nie działa. Być może kiedyś znajdzie się rozwiązanie, ale teraz go nie ma.

Możesz zrobić: