What is the reason for CSS rules not being implemented on embedded SVG symbols?

Check out this simple example of CSS rules with hover that is functioning properly: https://codepen.io/hbi99/pen/oNvaEZK

However, when attempting to use an SVG as a symbol and referencing it with the USE tag, the CSS rules for :hover are being ignored. Take a look at this demo: https://codepen.io/hbi99/pen/pozxaea

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="box" viewBox="0 0 200 200">
<style>
.test {
fill: #f00;
opacity: 0.35;
}
.test:hover {
fill: #fff;
opacity: 1;
}
</style>
<rect class="test" x="10" y="10" width="150" height="150"/>
</symbol>
</svg>

<svg><use href="#box"></use>

Can anyone offer insight into why the second example is not working as expected? This was tested on Chrome (v76).

csssvgmouseover

Answer №1

The demonstration you connected that was not supposed to function, surprisingly does work. However, the specific code segment you inserted in your question doesn't function properly because you're utilizing a class selector without applying the class to the SVG image.

Simply insert class="utc-bar" to the <rect> element and it will operate perfectly.

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="box" viewBox="0 0 200 200">
<style>
.utc-bar {
fill: #f00;
opacity: 0.35;
}
.utc-bar:hover {
fill: #fff;
opacity: 1;
}
</style>
<rect class="utc-bar" x="10" y="10" width="150" height="150"/>
</symbol>
</svg>

<svg><use href="#box"></use>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method in CSS for animating elements to shift to the right one letter at a time?

I am currently experimenting with moving letters individually from a word to the right, one by one. The effect I am going for is as if they are being pulled in that direction from the center. You can check out this cool pen (not mine, btw): https://codepen ...

htmlcss

Is there a way to alter the background in React Native after a delay of 1 second?

Need help with maintaining background color inside the box for 0.5 seconds and then making it disappear, similar to YouTube comment alarm functionality. Initial rendering shows background color https://i.sstatic.net/uQ1nj.png After 0.5 seconds, the backg ...

javascriptcssreactjsreact-nativestyled-components

The slider feature on Google Reviews is currently not functioning properly with the owl carousel

I am facing an issue with integrating Google Reviews slider using Google API and owl carousel. The problem lies in the fact that the Google reviews data is appended last after the page has loaded completely. This causes the owl carousel function to be call ...

phpjquerycssgoogle-maps-api-3owl-carousel

Highcharts is not effectively adapting to the responsiveness of all series in the chart

I'm currently working on a responsive chart that features a dynamic text box positioned next to the chart itself. This text box updates with new information each time I hover over data points on the chart. Interestingly, the text box functions perfec ...

jquerycsshighchartstextboxresponsive

"Can anyone tell me why my index.html file isn't recognizing the style.css file located in my css directory

In the directory structure below, I have the following files: mywebsite/ ├── css/ │ ├── style.css │ ├── index.html This is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

htmlcssxampp

Animating several elements by toggling their classes

I'm struggling to implement smooth animations on this box. I've tried using 'switchClass' but can't seem to keep everything together. Any help would be greatly appreciated. Here is the code snippet for reference: <script src=" ...

javascriptjqueryhtmlcssanimation

Creating a stroke in SVG using JavaScript

I created a code that inserts a line into my svg page when I press a button Here is the html snippet: <body> <svg width="500" height="400"> </svg> <button id="btn1">Append text</button> </body> Below is the script us ...

javascripthtmlsvg

"Delving into the World of CSS and Live Content

ERROR: Couldn't get my CSS right, completely unrelated to dynamic content! The answer provided is quite enlightening though! I am generating tags and adding content with the help of handlebars: Here's the Handlebars code snippet: {{#each docs} ...

javascripthtmlcssdomhandlebars.js

The chosen color for the link button in CSS

PHP CODE : $getOID=$_GET["id"]; for($i=$getOID-($getOID-1); $i<=5;$i++){ echo '<a class="current" href="postlogin.php?id='.$i.'">'.$i.'</a>'; } CSS STYLING FOR BUTTONS : .pagging { height:20px; ...

cssbuttonhyperlinkselected

"Implementing a form submission feature in React.js that dynamically applies a class to the result element

I recently developed a basic BMI calculator using React.js. I am now attempting to implement a feature where if the calculated BMI result falls outside the range of a healthy BMI, the result text will be displayed in red color (I am utilizing styled-compon ...

cssreactjsstyled-componentsclassnameclass-names

leveraging svg within react components

I've been attempting to integrate SVG with react, but I haven't been successful. Despite trying various solutions, I'm still unable to figure out why I keep encountering this error: InvalidCharacterError Failed to execute 'createElemen ...

javascriptreactjssvg

What is the method for adjusting the input text color in a textarea to green?

Is there a way to change the input color for this textarea so I can type green text on a black background? textarea{ background-color: black; } <textarea id="htmlCode" class="1111" placeholder="HTML"></textarea> ...

htmlcssweb

Break apart animation similar to the 🎊 emoji using CSS styling

I am attempting to create an animation of a circle splitting open on two sides, similar to the ...

htmlcsscss-animations

While working on creating a game prototype using CSS and Javascript, I encountered an issue where the icons were losing their color when trying to print the document

When I try to print, the icons like ...

javascriptcssprinting

Ways to resolve flickering caused by css keyframe animation

I'm currently working on creating a staggered opacity effect for three boxes using an infinite keyframe animation and the animation-delay property. However, I've encountered an unexpected issue where the third box seems to fade away and then rea ...

htmlcsssasscss-animationskeyframe

Issue with Mobile Touch Screen Preventing Vertical Scrolling

Currently experiencing difficulties with a div element that is not allowing touch and vertical scroll on mobile devices. Although scrolling works fine with the mouse wheel or arrow keys, it does not respond to touch. Have tested this on various devices and ...

javascriptcssreactjssassstyled-components

What do you think is the root cause of the grey streak?

I've implemented an image slideshow on my website: However, I'm facing an issue with a grey line appearing under the annotation. Here is an example: Below is the code snippet: $(function(){ $('#slides').slides({ ...

javascriptjqueryhtmlcss

Canvas with a button placed on top

I am working with a canvas and trying to position an HTML element over it using CSS. My goal is for the button to remain in place on the canvas even when resizing the entire page. Here is the code I am currently using. https://jsfiddle.net/z4fhrhLc/ #but ...

javascripthtmlcss

Problem with displaying fonts in web browsers

I decided to create a React App using the Material UI library, but I wanted to customize it by changing the default font from Roboto to Overpass. I successfully imported the fonts using their library. <link rel="preconnect" href="https:// ...

htmlcssreactjsmaterial-uigoogle-fonts

Steps for adding hover color to a div with linear gradient border

My current challenge involves adding a hover color to a specific div, but I'm facing obstacles due to the gradient background that was implemented to achieve border-radius functionality. This task is being carried out within a React Component using c ...

javascripthtmlcssreactjs