Стилизация экземпляров символа SVG ⇐ CSS

[Anonymous]

The intended effect of the code below is that it displays 2 red circles that turn to gray if the mouse hovers over them:

.hovered { fill: gray !important; /* Apply the gray fill color */ stroke: blue !important; /* Add a blue border */ stroke-width: 8px !important; /* Set border width */ } { // Add mouseover and mouseout event handlers to each element const useElements = document.querySelectorAll('[*|href="#redCircle"]'); useElements.forEach(useElement => { const color = useElement.getAttribute('data-color') || 'red'; useElement.addEventListener('mouseover', () => { console.log("hover"); useElement.classList.add('hovered'); }); useElement.addEventListener('mouseout', () => { useElement.classList.remove('hovered'); }); }); }); ]]>

If I remove the fill="red" from the symbol it does what I want. but I want the code to work regardless of the "fill=" attribute of the symbol.

So, here is some stuff I tried:

This CSS works, but only if I don't apply fill="red" to the symbol: .hovered { fill: gray; /* Apply the gray fill color */ stroke: blue; /* Add a blue border */ stroke-width: 8px; /* Set border width */ } This CSS doesn't work at all: .hovered circle { fill: gray; /* Apply the gray fill color */ stroke: blue; /* Add a blue border */ stroke-width: 8px; /* Set border width */ } This CSS doesn't work at all: /* CSS to define the hovered class */ .hovered use circle { fill: gray; /* Apply the gray fill color */ stroke: blue; /* Add a blue border */ stroke-width: 8px; /* Set border width */ } and this CSS is the only one that can override the fill="red": circle { fill: gray; /* Apply the gray fill color */ stroke: blue; /* Add a blue border */ stroke-width: 8px; /* Set border width */ } The Javascript code is inside the SVG for a specific reason and I like to keep it like that.


Источник: https://stackoverflow.com/questions/781 ... svg-symbol