Is it possible to adjust the fill color of an SVG embedded within an object without directly modifying the SVG file with CSS code?

Is there a method to change the fill color of an SVG on hover within an object tag without inserting CSS code directly into the SVG file? Below is the code snippet:

<div class="icon-holder">
    <object data="http://useaible.com/wp-content/themes/storefront/assets/images/icons/bulb-round.svg"></object>
</div>

I understand that CSS needs to be inside the SVG file for it to work properly. Are there alternative approaches to implementing a hover effect without resorting to inline SVG or adding CSS within the SVG file?

csssvghover

Answer №1

To utilize SVG sprites, you should define your SVG element after the body tag in this manner:

<svg 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="icon-facebook" viewBox="0 0 16 32">
    <title>facebook</title>
    <path class="path1" d="M4.973 30.593v-13.872h-4.973v-4.984h4.974v-4.433c0-4.595 2.775-7.303 6.874-7.303 1.964 0 3.66 0.211 4.152 0.276v5.053l-3.393-0.001c-2.229 0-2.646 1.106-2.646 2.66v3.749h5.711l-0.807 4.984h-4.904v13.872h-4.988z"></path>
    </symbol>
  </defs>
</svg>

Then, you can reference it in your code like so:

<svg class="icon-facebook"><use xlink:href="#icon-facebook"></use></svg>

This approach allows you to apply CSS styles to the SVG element.

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

How can I apply specific styling to certain cells within a table?

Is there a way to apply styles specifically to certain table headers in an HTML table without altering the HTML or introducing JavaScript? I need to target only 4 out of the total 8 table headers. To see the code and example for this question, visit: http ...

htmlcss

How can I make the text color change when the mouse hovers over it and revert back when the mouse moves away using HTML?

How can I use the onmouseover event to change the background color of a <td> element with the class 'topic_name'? <td dir="rtl" class="topic_name" onmouseOver=""><\td> The CSS for the 'topic_name' class is as fo ...

htmlcss

The document.getElementsByClassName method in JavaScript is returning an Array with a length property value of 0

My HTML contains a list of li elements with one class. I am attempting to collect them all and place them in an array to determine how many have been gathered. However, when I attempt to display the number using the .length property of the array returned b ...

javascripthtmlcssarrays

Promoting growth and gentle guidance

I'm unsure if this question falls within the acceptable boundaries, as it seems to be a bit of a grey area. I'm aiming to achieve a similar effect to the one showcased in this example profile My main challenge lies in comprehending how all of t ...

jqueryhtmlcss

Adjust the background color of the dropdown when toggled

I want to add a background color to my dropdown menu when it's activated. In the demo, the dropdown content overlaps with the text behind it. Currently, I have a scrollspy feature that applies a background color to the nav bar and dropdown menu when s ...

javascripthtmlcssbootstrap-5nav

Adjustment of navigation as window size changes

Are there any efficient methods to prevent navigation from moving while resizing the window? Currently, I am using the following code which is clearly incorrect as it will cause proportions to change. Should I consider using a fixed width instead? #main ...

csshtmlnavigation

Change the color of the icon from white to blue in png format using html/css

Changing a White Icon.png to a Blue Icon.png Using HTML/CSS The original icon.png is white in color. How can we change it to a blue color version using only HTML and CSS? HTML: <img src="icon.png" class="icon1"> CSS: .icon1 { background: url(ic ...

htmlcss

Trying to access the main container without also triggering the animations for its children isn't possible

Despite my extensive search efforts, I have not been able to find a solution to this seemingly common issue. As a vendor, I am limited in my ability to alter the client's HTML and use ULs. My objective is to create a hover effect where only the conten ...

jqueryhovernestedparent-child

Controlling JS, CSS, and images with CakePHP 2.5 through the Cake controller

Currently, I am developing an application using the powerful combination of CakePHP and AngularJS. During my work on the AngularJS side of the project, I noticed that we are generating a large number of JavaScript and HTML files. I am interested in havin ...

javascripthtmlcssangularjscakephp

Alignment issues with images

I am trying to put together a collection of images that function as links and light up when hovered over. However, my attempt to add a <div class="hover"> in front of each image caused them to no longer display in a horizontal line. How can I resolve ...

htmlcss

What is the method for retrieving the font size of elements in the native view using appium?

Can the font size of text in the native view be retrieved using appium? I am aware of using driver.findElement(By.id("by-id")).getCssValue("font-size"); for web views. Is there a similar method for native views? ...

javacssseleniumappium

A combination of fixed width column and dynamic content area in Bootstrap design

Is there a way to achieve the combination of fixed and fluid width columns using Twitter Bootstrap alone, similar to this example? The HTML and CSS in the example make it seem simple. But can this be done solely with Bootstrap? ...

csstwitter-bootstrap

Tips for passing down CSS styles through Less stylesheets

In an effort to create a legend below a <table> that matches the colors defined in Bootstrap stylesheets, I am struggling with the following: .table > thead > tr > td.warning, .table > tbody > tr > td.warning, .table > tfoot ...

csstwitter-bootstrap-3lessless-mixins

Prevent the line break from going beneath the ::before pseudo element

p::before { content: "1. "; } p { width: 200px; } <p>This is an example of a long text that requires a line break: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam ...

javascripthtmlcss

Hover over elements in jQuery to smoothly transition them from one class to another

Is it possible to achieve this? For example: .class1{ background-image:(whatever.jpg) color: #fff; } .class2{ background-image:(whatever2.jpg) color: #999; } Can I create a fade effect for all elements with class1 to class2 when the mouse hover ...

jquerycsseffectsfadeinjquery-effects

The menu starts off in the open position when the page loads, but it should remain closed until it

I'm having trouble with my menu; it displays when the page loads but I want it to be closed and then open when clicked. Despite my best efforts, I can't seem to fix this issue. <html> <head> <script> $(document).ready(funct ...

javascriptjqueryhtmlcss

Is there a way to eliminate the outline on a FormControl component in React-bootstrap when the input field is selected?

Currently, I'm working on creating a search bar with dropdown suggestions using React-bootstrap. My goal is to have the search bar span across the page from one side to another with margins on the left and right. To achieve this, I am enclosing the in ...

cssreactjsinputbootstrap-5react-bootstrap

Adjust the height of a sibling div using JavaScript with mouseover event

I need assistance with creating an audio visualizer effect where on mouseover, "this" div becomes the tallest one and the other divs adjust their heights accordingly. How can I specify the specific height for each sister div to change to? Code window ...

javascriptjqueryhtmlcss

Applying Transparency to a Button using CSS

I need to modify the style of a button in an HTML document by adding opacity to it. To achieve this, I plan to utilize CSS. Below is the current CSS code for the button: .btn_nav{ position:fixed; width:100%; height:68px; background-color:#323232; border ...

htmlcsswebopacity

Disable the borders on HTML input fields

I am looking to implement a search feature on my website. It seems that in Firefox and Internet Explorer, the search function appears fine without any unexpected borders. Firefox IE However, when viewing the search function in Chrome and Safari, there ...

csscross-browserzurb-foundation