How do I style an individual path in an SVG with CSS?

[jackdomleo7]

The SVG is hidden inside shadow-root.

I have some SCSS, that I want to change the colour of each path when the SVG is hovered:

svg {
  &:hover {
    path {
      &:nth-child(1) {
        fill: #00C58E;
      }

      &:nth-child(2) {
        fill: #2F495E;
      }

      &:nth-child(3) {
        fill: #108775;
      }
    }
  }
}

But this doesn't work because of shadow-root. What's the best way to achieve this? 🙂

[farnabaz]

Hey 🙂 Sorry for the late response
There is no perfect solution for changing svg styles for now. You can use two svg icon and change icons name on hover.

[jackdomleo7]

Ok thank you! Is this a feature that may be implemented in the near future? 🙂

[farnabaz]

Supporting this feature will be tricky because different browsers have different behaviors.