Using SVG and CSS to color multiple paths with individual colors

Question

Using SVG and CSS to color multiple paths with individual colors

I am working with an svg that contains various paths, ellipses, and shapes each with different fill colors such as red and blue. When I combine them into a sprite, I want to be able to change the fill color on hover using CSS. Typically, I would remove the fills from the SVG file and manipulate everything using the fill property in CSS.

However, due to the different initial colors of the elements, applying a simple fill:red rule will turn everything red which is not desired. I need some parts to remain blue while others change to red upon hovering.

html css svg fill

Answer 1

Answer №1

For each path, you have the option to assign a unique class:

<circle  class="customizeCircle" cx="40" cy="50" r="26"/>
<square  class="customizeSquare"   cx="40" cy="50" r="26"/>

You can then style these classes individually in your CSS file:

.customizeCircle {
  fill: blue;
}

Answer 2

For each path, you have the option to assign a unique class:

<circle  class="customizeCircle" cx="40" cy="50" r="26"/>
<square  class="customizeSquare"   cx="40" cy="50" r="26"/>

You can then style these classes individually in your CSS file:

.customizeCircle {
  fill: blue;
}

Answer 3

Answer №2

There are two ways to style paths in SVG: adding a class to each path or using the nth-child selector.

Here is a simple illustration:

<path bla-bla-bla>
<path bla-bla-bla>
<path bla-bla-bla>

path:nth-child(1){
   fill:red;
}

path:nth-child(2){
   fill:blue;
}

path:nth-child(3){
   fill:green;
}

Answer 4

There are two ways to style paths in SVG: adding a class to each path or using the nth-child selector.

Here is a simple illustration:

<path bla-bla-bla>
<path bla-bla-bla>
<path bla-bla-bla>

path:nth-child(1){
   fill:red;
}

path:nth-child(2){
   fill:blue;
}

path:nth-child(3){
   fill:green;
}

Answer 5

Answer №3

It seems like the approach you are taking may not be effective. When using a <use>, the referenced content is not actually part of the DOM within the <use> element.

.icon:hover .outer { }

This code won't work because the element with the class outer is not nested under the .icon element. To style the contents of a symbol, you need to apply the rules directly to the symbol itself. For example:

#btn-tester .outer { }

Unfortunately, :hover events do not trigger on symbols. Therefore, this won't work either:

#btn-tester:hover .outer { }

Even if it did work, it might not be ideal as it would affect all instances of that symbol on the page.

You might need to consider embedding the SVG directly onto the page instead of using a symbol.

Answer 6

It seems like the approach you are taking may not be effective. When using a <use>, the referenced content is not actually part of the DOM within the <use> element.

.icon:hover .outer { }

This code won't work because the element with the class outer is not nested under the .icon element. To style the contents of a symbol, you need to apply the rules directly to the symbol itself. For example:

#btn-tester .outer { }

Unfortunately, :hover events do not trigger on symbols. Therefore, this won't work either:

#btn-tester:hover .outer { }

Even if it did work, it might not be ideal as it would affect all instances of that symbol on the page.

You might need to consider embedding the SVG directly onto the page instead of using a symbol.

Using SVG and CSS to color multiple paths with individual colors

Answer №1

Answer №2

Answer №3

Similar questions

Implementing jQuery functionality on elements that are generated dynamically

Shifting Icon to the Right within the Drawer Navigator Toolbar

Using `margin: auto;` alone will center a div horizontally, but it won't

Saving HTML files can cause formatting issues

The arrow icon that I included in my bootstrap project seems to have disappeared from my view

Utilizing Semantic HTML to Showcase a Product Comparison

Tips for accessing basic information from these websites without encountering CORS issues

Assign a unique identifier to the Angular mat-checkbox component

What could be causing the CSS not to load on my WordPress website?

JQuery Reveals AJAX Request with Malfunctioning HTML Markup

Mastering SVG Path Coordinates using Pure JavaScript

Displaying mysqli results within a div while incorporating an onclick event for a javascript function that also includes another onclick event for a separate javascript function

Conceal the bottom HTML/widget and eliminate the Drag & Drop functionality from the Streamlit file_uploader() feature

Are there specific elements that fall under the umbrella of CSS?

Styling text by reducing its size with CSS

Tips for maintaining position when refreshing a web page within a scrolling table

Tips for showcasing several images with accompanying content once the webpage has finished loading

Selection pseudo selectors for tooltips are a great way to provide additional

The datepicker feature has been programmed to only allow past or present dates

What is the technique for adding a blur effect to the top and right side of a div element?