From the course: Learning SVG

Unlock the full course today

Join today to access over 24,500 courses taught by industry experts.

Apply CSS to individual symbol instances

Apply CSS to individual symbol instances - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial Buy for my team

Apply CSS to individual symbol instances

“

- [Instructor] Just like sizing of individual instances of an SVG symbol need to be handled at the instance level, so does styling. Just like with sizing, any CSS applied to the symbol itself will take precedence over CSS applied to the symbol instance because the use element is displaying a shadow copy of the original symbol. It's not displaying a new symbol. Let me show you what I mean. Right now, the CSS rule that defines the stroke of the symbol is targeting the icon class which is applied to this g element that wraps all the elements inside the symbol. You can see it down here, and right now the stroke is set to black. If I now change the stroke color to something else, say, pink, both displayed instances of the symbol change. That's because we're effectively displaying the same symbol twice in two different locations. This causes a bit of a problem. You see, if I go down into my markup here and find the second instance of my symbol down here, svg class "mini-icon," and I try to…

Contents