Why Doesn\'t My :hover CSS Work on SVG Elements Embedded with ``, and How Can I Fix It?

Styling SVG Elements Embedded via using :hover CSS

In your provided code, you're attempting to style embedded SVG elements using :hover CSS, but it's not working for elements inside a group referenced using a element. This is because, according to the SVG spec, CSS selectors cannot be applied to cloned DOM trees resulting from element cloning via .

Firefox Support and a Workaround

Firefox is the only browser that supports addressing virtual elements included via a wormhole. However, other browsers do not.

A workaround is to use currentColor to apply different colors to elements with fill or stroke properties when the element's color property is changed on hover. For example:

#p0 {fill:currentColor}
#use1:hover {color:green}
#use2:hover {color:red}
#use3:hover {color:blue}

A Possible Alternative

An alternative approach to achieve your goal is to use JavaScript to modify the SVG elements on mouse hover events. This would involve adding event listeners to each element and then updating the attributes or styles of the relevant elements within each group.

Choosing the Right Solution

The choice between the Firefox-compatible CSS workaround and the JavaScript-based approach depends on browser support and your project's specific requirements. If browser compatibility is critical, use the JavaScript method. Otherwise, you may choose the CSS solution for simplicity and ease of implementation.

Further Considerations

To achieve the desired hover effect on specific parts within the embedded object, you may need to use additional JavaScript to modify the attributes or styles of specific elements within each group on hover. JavaScript provides more flexibility for dynamic element manipulation, allowing you to target and modify individual elements within the embedded object.

The above is the detailed content of Why Doesn\'t My :hover CSS Work on SVG Elements Embedded with ``, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!