Adjust the color of additional SVG paths upon hovering

I have the following code snippet. 

.icon {stroke-width: 0; stroke: currentColor; fill: currentColor;}

a {color: red}
a:hover {color: pink}
a:hover circle {fill: green !important; color: orange}
a:hover path {fill: blue !important}
    <a href=""><svg class="icon team"><use xlink:href="#team"></use></svg></a>
    ...
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="team" viewBox="0 0 123 123">
<circle fill="currentColor" cx="19.5" cy="12.2" r="12.1"/>
<path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7 v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/>
<circle fill="#ccc" cx="103.3" cy="12.2" r="12.1"/>
<path   fill="#000" d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24 h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/>
<path   fill="#553" d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3 c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/>
<circle fill="f00" cx="61.4" cy="26" r="13.9"/>
</symbol>
</defs>
</svg>

This SVG file contains multiple colored layers, and I would like to assign different colors to each layer upon hover.

I have tried various methods such as removing fill="..." in the HTML markup, eliminating the fill attribute, adding classes/IDs to the SVG layers, and setting color or fill properties in CSS.

However, I have not been successful in achieving the desired outcome. I am only able to change one color for all layers that lack the fill attribute or have fill="currentColor" in the HTML.

Any suggestions or ideas?
Thank you.

htmlcsssvg

Answer №1

Perhaps utilizing CSS variables could help achieve the desired effect. While you may not be able to target elements within the use tag directly, you can leverage inheritance to convey certain values.

.icon {
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

a {
  color: red
}

a:hover {
  color: pink;
  --s1:green;
  --s2:blue;
  --p1:purple;
  --p2:yellow;
}
<a href=""><svg class="icon team"><use xlink:href="#team"></use></svg></a>

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="team" viewBox="0 0 123 123">
<circle fill="currentColor" cx="19.5" cy="12.2" r="12.1"/>
<path d="M6,66.699h1.2v24c0,3.301,2.7,6,6,6h12.6c3.3,0,6-2.699,6-6V89.3c-1.1-2.101-1.8-4.5-1.8-7v-31.4c0-6.1,3.7-11.4,9-13.7 v-2.4c0-3.3-2.7-6-6-6H6c-3.3,0-6,2.7-6,6v25.9C0,64,2.6,66.699,6,66.699z"/>
<circle style="fill:var(--s1,#ccc)" cx="103.3" cy="12.2" r="12.1"/>
<path   style="fill:var(--p1,#000)" d="M83.699,34.7v2.4c5.301,2.3,9,7.6,9,13.7v31.3c0,2.5-0.6,4.9-1.799,7v1.4c0,3.3,2.699,6,6,6h12.6c3.3,0,6-2.7,6-6v-24 h1.199c3.301,0,6-2.7,6-6V34.7c0-3.3-2.699-6-6-6h-27C86.4,28.7,83.699,31.399,83.699,34.7z"/>
<path   style="fill:var(--p2,#553)" d="M39.1,50.899L39.1,50.899v9.8v21.6c0,3.3,2.7,6,6,6h2.3v28.3c0,3.3,2.7,6,6,6h16.1c3.3,0,6-2.7,6-6v-28.4h2.3 c3.3,0,6-2.699,6-6V60.7v-9.8l0,0c0-3.3-2.7-6-6-6H45.1C41.7,44.899,39.1,47.6,39.1,50.899z"/>
<circle style="fill:var(--s2,#f00)" cx="61.4" cy="26" r="13.9"/>
</symbol>
</defs>
</svg>

Answer №2

(The following answer is based on a different question that was marked as a duplicate, not the one above.)

In my approach to handling SVG markup, I pretended that <use> didn't create a barrier with shadow DOM and then eliminated the shadow DOM using this method:

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

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

The use of signal-meter as the id for a symbol allowed me to reuse it multiple times while easily applying CSS classes for styling without considering the presence of shadow DOM.

This code can also be modified to handle multiple symbols or all symbols automatically.

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

Easy steps to launch Excel application with an HTML button using a web browser

How can I create a button on an HTML page that will launch an Excel application when clicked by the user? <button class="btn btn-primary" onclick="window.open('excelApplication.url','_blank')">Launch Excel</button> ...

javascriptjqueryhtml

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

I am experimenting with creating a dynamic webpage that can change its contents without being limited to predefined templates (potentially offering infinite template options). Below is the code I am currently testing: <!DOCTYPE html> <html lang= ...

javascripthtmlangularjs

Flashing bug in the outFunction of jquery hover()

My friends and I are working on a website for a class project, but we're running into a strange issue with the outFunction part of our hover function. Whenever the mouse hovers over an element, a grey square fades in using .fadeIn(), but then immediat ...

javascriptjqueryhtml

Tips for integrating PHP with HTML5 while developing a Blackberry native application that utilizes Blackberry websockets

I'm currently working on a basic HTML5 page that includes inline PHP script. I'm looking for advice on how to transform this app so it can be used with Blackberry WebSockets. For example, I want to develop a native app using HTML5. ...

htmlblackberry

Utilizing Jquery for draggable/droppable functionality in combination with custom overflow styles

Encountering a challenge with a drag and drop system that utilizes CSS overflow properties to enable vertical scrolling of a list of values. The issue arises when dragging an item between selected and unselected areas, causing the dragged item to disappear ...

jquerycssjquery-uidrag-and-drop

Establish the container with a specific height and enable scrolling functionality

Here is the code snippet I am currently working with: <section class="table"> <div class="table-row"> <div class="table-cell"></div> <div class="table-cell"></div> <div class="table-cell"></div> ...

htmlcss

EJS file not displaying stylesheets and images correctly during rendering

I'm currently in the process of building a website, but when I try to render an ejs file (index.ejs), only the HTML portion is displayed without showing any stylesheets, fonts, or images. Here is the code snippet for linking the stylesheets: <!D ...

htmlnode.jsexpressdirectoryejs

Is there a way to remove specific elements from an array without using jQuery?

I've recently started diving into Javascript, experimenting with Tampermonkey scripts for the past week. The webpage I'm currently working on features dynamic elements that appear randomly with each page load. Sometimes only one element like "he ...

javascriptjqueryhtmlarrays

Utilizing transitions to control the visibility of div elements

This is what I have achieved so far: function getOffsetRect(elem) { var box = elem.getBoundingClientRect() var body = document.body var docElem = document.documentElement var scrollTop = window.pageYOffset || docElem.scrollTop || body.sc ...

javascripthtmlcss

Swap out the current image for a different one

When a user clicks on different image or color options, I want to change the main image displayed. Below are the links to the alternative images: https://i.sstatic.net/DxJEb.jpg This is the HTML code: <div class="container"> <p class="img-main" ...

javascriptjqueryhtmlcss

Accessing PHP parameters in JSP files can be accomplished by utilizing specific

The PHP code snippet below checks for a username and password match before redirecting to a JSP page. if($userName==$dbUserName&&md5($passWord)==$dbPassWord){ echo "<input name='username' type='hidden' value='$userN ...

phphtmljsp

Enhance the CSS Transition for a Seamless Bootstrap Toggle Menu Experience

I attempted to modify the Bootstrap Toggle Menu slide effect from top to bottom to left to right. You can view the website here: After experimenting with various CSS codes (I prefer using pure CSS for this effect), I finally discovered this one: .collaps ...

htmlcsstwitter-bootstrap-3

Streaming HTTP content on a domain secured with HTTPS using HTML5

Is it possible to stream HTTP on an HTTPS domain without triggering browser security errors? By default, the browser tends to block such requests. I rely on the hls.js library for desktop support with .m3u8 files. When I play content directly (on mobile o ...

javascripthtmlvideobrowserhttps

Vertically align the content within a div

Here is what I have been working on: http://jsfiddle.net/yisera/2aVpD/ I am trying to vertically center a div inside the .jumbotron-special container. I attempted using display: table; on the parent element and then implementing display:table-cell on th ...

htmlcsstwitter-bootstrapvertical-alignment

Tips for evaluating style modifications on mouseover using cypress

Trying to test hover styles on table rows but encountering issues: Here is the code snippet I am testing: it("Table rows should display correct hover styles", () => { cy.get("table>tbody>tr").each(($el, index, $list) =&g ...

htmlcsscypresse2e-testing

What is the best way to make a flexbox stretch to fill the entire screen

Can someone guide me on how to ensure my flexbox expands to fill the entire screen? I am working on a website and I want to eliminate any empty spaces from it. >> https://i.sstatic.net/uAooe.png I have attempted setting margin and padding to zero b ...

htmlcssflexbox

The web application located on the server is having trouble recognizing and loading the stylesheet

After deploying the web app on MS Server 2008 R2, I noticed that it is not reading the style sheets on any of the pages. The masterpage only contains a ToolkitScriptManager with no styles. However, the source code shows the style links and accessing them d ...

asp.net.netcsswindows-server-2008-r2

issues encountered when trying to integrate bootstrap.js in Django framework

My website is built using the Django templating engine with Bootstrap for design and basic JavaScript. While the CSS components from Bootstrap are working fine, I'm having trouble getting the JavaScript to work: {% load staticfiles %} <!d ...

javascripthtmldjangotwitter-bootstrapbootstrap-4

"Encountered an issue with submitting the nodejs form

edit 2 After attempting to implement the following code snippet in my nodejs application, I encountered an issue where the form data was not being successfully posted to the database: router.get('/dashboard/users/forms/competition-form/:id', en ...

htmlnode.jsexpress

Problems arising from Jquery append functionality

When using the append method, my inner div is only attaching one WHEAT-COLORED-BOX, whereas when using appendTo, my inner div attaches all the required number of WHEAT-COLORED-BOXES. Therefore, in this case, appendTo gives the correct result while append f ...

javascripthtmljquerycssnode.js