Стилизация экземпляров <use> символа SVG

    .hovered {
      fill: gray !important; /* Apply the gray fill color */
      stroke: blue !important; /* Add a blue border */
      stroke-width: 8px !important; /* Set border width */
    }

    <svg style = "display: none;">
      <symbol id = "redCircle" viewBox = "0 0 200 200">
        <circle id = "circleId" cx = "50" cy = "50" r = "40" fill = "red" />
        <script><![CDATA[   
          // Wait for the document to be fully loaded before setting up event listeners
          document.addEventListener('DOMContentLoaded', () => {
            // Add mouseover and mouseout event handlers to each <use> element
            const redC= document.getElementById("circleId");
            const useElements = document.querySelectorAll('[*|href = "#redCircle"]');
            useElements.forEach(useElement => {
              const color = useElement.getAttribute('data-color') || 'red';
              useElement.addEventListener('mouseover', () => {
                console.info("hover");
                useElement.classList.add('hovered');
                redC.style.fill= "gray";
              });

              useElement.addEventListener('mouseout', () => {
                useElement.classList.remove('hovered');
               redC.style.fill= "red"; 
              });
            });
          });
        ]]></script>
      </symbol>
    </svg>

    <!-- SVG containing two <use> references to the symbol with color properties -->
    <svg id = "svg-container">
      <use xlink:href = "#redCircle" id = "use1" x = "100" data-color = "blue" />
      <use xlink:href = "#redCircle" id = "use2" data-color = "green" />
    </svg>

/*
    Main color definitions
*/
#svg-container {
    /* change to any default color you require, sets 'currentColor' */
    color: red;

    /* disable these to see defaults in effect */
    --primary  : blue;   /* disable to show magenta circle */
    --secondary: green;  /* disable to show yellow circle */
    /**/

    /* Optionally define hover effects */
    --hover    : gray;
    --stroke   : blue;
    --str-width: 8px;
} 
/*
    Specific Color overrides per <use> case
    When undefined, they fallback to a default color
*/
#use1 { --dsp-color: blue }
#use2 { --dsp-color: var(--primary  , magenta) }
#use3 { --dsp-color: var(--secondary, yellow)  }

/*
    Color handling SVG circle
*/
#redCircle circle { /* optionally using #redCircle for more specificity */
    /* When --dsp-color is undefined it defaults to 'currentColor' defined in #svg-container */
    fill: var(--dsp-color, currentColor); /* overrides 'fill' in <circle> */
}

#redCircle circle:hover { /* optionally using #redCircle for more specificity */

    fill  : var(--hover, gray);  /* Apply --hover fill color, default gray */
    stroke: var(--stroke, blue); /* Apply --stroke color, default blue */

    stroke-width: var(--str-width, 8px); /* Apply --str-width, default 8px */

    cursor: pointer;
}

<svg style = "display: none;">
    <symbol id = "redCircle" viewBox = "0 0 400 200">
        <circle cx = "50" cy = "50" r = "40" fill = "red" />
        <!-- 'fill' is redundant here, gets overridden -->
    </symbol>
</svg>

<!-- SVG containing four <use> references to the symbol with color properties -->
<svg id = "svg-container" style = "">
    <use xlink:href = "#redCircle" id = "use1" x = "0"   />
    <use xlink:href = "#redCircle" id = "use2" x = "75"  />
    <use xlink:href = "#redCircle" id = "use3" x = "150" />
    <use xlink:href = "#redCircle" id = "use4" x = "225" />
</svg>

svg {
  width: 100%;
  height: 180px;
}

circle {
  fill: inherit;
}

circle:hover {
  fill: gray;
  stroke: blue;
  stroke-width: 8px;
}

use[href = "#redCircle"] {
  fill: red;
}

#use1 {
  fill: blue;
}

#use2 {
  fill: green;
}

<svg>
  <defs>
    <symbol id = "redCircle">
      <circle cx = "50" cy = "50" r = "40" />
    </symbol>
  </defs>

  <g id = "container">
    <use id = "use1" href = "#redCircle" x = "0" />
    <use id = "use2" href = "#redCircle" x = "100" />
    <use id = "use3" href = "#redCircle" x = "200" />
    <use id = "use4" href = "#redCircle" x = "300" />
  </g>  
</svg>

<style>
  svg-circle { width: 120px; background: lightgreen; stroke:black }
</style>

<h3>Who is afraid of red, yellow and blue?</h3>

<svg-circle fill = "red"    hover = "blue" ></svg-circle>
<svg-circle fill = "yellow" hover = "green"></svg-circle>
<svg-circle fill = "blue"   hover = "red"  ></svg-circle>
<svg-circle></svg-circle>

<script>
  customElements.define('svg-circle', class extends HTMLElement {
    connectedCallback() {
      const fillcolor   = this.getAttribute("fill") || "red";
      this.style.display = "inline-block";
      this.innerHTML     = `<svg viewBox = "0 0 9 9">` +
                           `<circle cx = "50%" cy = "50%" r = "40%" fill = "${fillcolor}"/>` +
                           `</svg>`;
      this.circle = Object.assign(this.querySelector("circle"), {
           style : "cursor:pointer",
           onmouseenter: e => this.fill = this.getAttribute("hover") || "blue",
           onmouseleave: e => this.fill = fillcolor
      })
    }
    set fill(color) {
      this.circle.setAttribute("fill", color);
    }
  });
</script>

statesForUseInstances();

function statesForUseInstances() {
  // Add mouseover and mouseout event handlers to each <use> element
  const useElements = document.querySelectorAll("use");

  // get element in symbol
  let ref = useElements[0].getAttribute("xlink:href");
  let symboEl = document.querySelector(`${ref}`).children[0];
  
  // remove fill from use reference/symbol
  symboEl.removeAttribute('fill')

  useElements.forEach((useElement) => {
    
    useElement.addEventListener("mouseover", () => {
      useElement.classList.add("hovered");
    });

    useElement.addEventListener("mouseout", () => {
      useElement.classList.remove("hovered");
    });
  });
}

svg{
  border:1px solid #ccc;
  overflow:visible;
  width:10em;
}

.blue{
  fill: blue;
}

.green{
  fill: green;
}

.hovered {
  fill: gray; 
  stroke: blue; 
  stroke-width: 8px; 
}

<!-- SVG containing the symbol -->
<svg style = "position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;">
  <symbol id = "redCircle" viewBox = "0 0 100 100">
    <circle cx = "50" cy = "50" r = "40" fill = "red" />    
  </symbol>
</svg>


<!-- SVG containing two <use> references to the symbol with color properties -->
<svg viewBox = "0 0 200 100" xmlns:xlink = "http://www.w3.org/1999/xlink">
  <use xlink:href = "#redCircle" x = "0" width = "100" class = "blue" />
  <use xlink:href = "#redCircle" x = "100" width = "100" class = "green" />
</svg>


<svg viewBox = "0 0 100 100" xmlns:xlink = "http://www.w3.org/1999/xlink">
  <use xlink:href = "#redCircle" id = "use1" class = "blue" />
</svg>

<svg viewBox = "0 0 100 100" xmlns:xlink = "http://www.w3.org/1999/xlink">
  <use xlink:href = "#redCircle" id = "use2" class = "green" />
</svg>