Change more SVG path color when hover

Answer 1

(Answer below posted based on this marked-as-a-duplicate question, not the above question.)

I decide to write my SVG markup as if ...> didn't impose a shadow DOM barrier on the content being used, then got rid of the shadow DOM like this:

  private removeSignalMeterShadowRoots(): void {
    const signalMeter = $('#signal-meter');
    const markup = signalMeter.html();
    const uses = $('use[href="#signal-meter"]');

    uses.parent().html(markup);
  }

...with signal-meter being the id of a symbol I wanted to re-use multiple times, while freely applying CSS classes for styling both colors and other attributes as if the shadow DOM weren't there.

This same code could be easily adapted to automatically handle multiple symbols or all symbols.