The .fill attribute in SVG seems to be having trouble functioning as intended

Could someone please clarify why I am unable to modify the fill of this svg:

<div class="container">
  <ul class="todo">
    <li>

    This is an item
    <div class ="buttons">
        <button class="remove">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 59 59" style="fill;" xml:space="preserve"><g><path d="M29.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C28.5,50.553,28.948,51,29.5,51z"/><path d="M19.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C18.5,50.553,18.948,51,19.5,51z"/><path d="M39.5,51c0.552,0,1-0.447,1-1V17c0-0.553-0.448-1-1-1s-1,0.447-1,1v33C38.5,50.553,38.948,51,39.5,51z"/><path d="M52.5,6H38.456c-0.11-1.25-0.495-3.358-1.813-4.711C35.809,0.434,34.751,0,33.499,0H23.5c-1.252,0-2.31,0.434-3.144,1.289C19.038,2.642,18.653,4.75,18.543,6H6.5c-0.552,0-1,0.447-1,1s0.448,1,1,1h2.041l1.915,46.021C10.493,55.743,11.565,59,15.364,59h28.272c3.799,0,4.871-3.257,4.907-4.958L50.459,8H52.5c0.552,0,1-0.447,1-1S53.052,6,52.5,6z M21.792,2.681C22.24,2.223,22.799,2,23.5,2h9.999c0.701,0,1.26,0.223,1.708,0.681c0.805,0.823,1.128,2.271,1.24,3.319H20.553C20.665,4.952,20.988,3.504,21.792,2.681z M46.544,53.979C46.538,54.288,46.4,57,43.636,57H15.364c-2.734,0-2.898-2.717-2.909-3.042L10.542,8h37.915L46.544,53.979z"/></svg>           </button>
        <button class="complete">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve"><g><path d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M26,50C12.767,50,2,39.233,2,26S12.767,2,26,2s24,10.767,24,24S39.233,50,26,50z"/><path d="M38.252,15.336l-15.369,17.29l-9.259-7.407c-0.43-0.345-1.061-0.274-1.405,0.156c-0.345,0.432-0.275,1.061,0.156,1.406l10,8C22.559,34.928,22.78,35,23,35c0.276,0,0.551-0.114,0.748-0.336l16-18c0.367-0.412,0.33-1.045-0.083-1.411C39.251,14.885,38.62,14.922,38.252,15.336z"/></svg>
        </button>
    </div>
    </li>

  </ul>
</div>

Using css, I attempt to modify:

ul.todo li .buttons button svg {
    width:22px;
    height:22px;
    position:absolute;
    top:50%;
    left:50%;
    margin:0 0 0 -11px;
}

ul.todo li .buttons button.remove svg .fill {
    fill:#c0cecb;

}

ul.todo li .buttons button.remove:hover svg .fill {
    fill:#e85656;

}

ul.todo li .buttons button.complete svg .fill {
    fill:#25b99a;

}

It seems like the issue may lie in not properly targeting the svg element in the css, any assistance would be greatly appreciated.

htmlcsssvg

Answer №1

svg .fill {}

When you use this code, it will apply styling to any HTML element with the class of fill that is a child of an <svg> element. To target an <svg> element with the fill attribute, you should use 

svg[fill] {}

Make sure there is no space character between the selectors. Refer to CSS selectors and CSS combinators for more information.

For instance, your initial rule might look like: 

ul.todo li .buttons button.remove svg {
    fill:#c0cecb;
}

However, this may be overly specific. In most cases, the following will suffice: 

.todo .button > svg {
     fill:#c0cecb;
}

This second option targets the necessary elements without affecting other parts of your website or application.

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

Eliminating the appearance of horizontal scroll bar by employing transform scale to zoom out

When you run the code provided in the link below and scale down the HTML to 50% while increasing the width to fit the window, a scrollbar becomes visible. This only occurs in Chrome and not in Firefox. Click here The content of the DOM can be modified and ...

htmlcsszooming

How can I eliminate the black outline added to text by IE CSS filter?

Is there a way to add text-shadows to elements in IE without having a black outline around the text when it is not black? I know IE doesn't support text-shadow property but using filter: property gets pretty close. If anyone has any suggestions or so ...

htmlinternet-explorercss

How can I prevent the interpolation of "${variable}" in HTML when using AngularJS?

I need to display the string ${date} in a div element: <div>please substitute the ${date} as the tag for the name</div> The displayed content should be: please use the ${date} as the substitute tag to the name. However, the browser interpre ...

javascripthtmlangularjshtml-escape-characters

Ensuring that the text in the Bootstrap navbar is responsive for all screen

Yesterday, I inquired about how to modify my navbar menu to switch from horizontal to vertically arranged depending on layout. However, I've noticed that the responsiveness is not consistent when adjusting the window size. Is there a way to ensure my ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for ensuring an HTML element remains within defined boundaries

Currently working on a visualization tool for search algorithms using React, I've encountered a minor issue when moving the start or end nodes. Upon clicking and dragging the mouse across the grid, the nodes adjust accordingly until reaching the grid& ...

javascripthtmlreactjs

Say goodbye to tables and hello to CSS div layouts!

Is there a way to align three or four elements without relying on tables? I want them to follow this format: The reason I am asking is because my current method involves using tables, but they are not allowing me to set a specific height for the "test" bo ...

htmlcssalignmentcss-tables

"Track the progress of a form submission with a loading indicator using Sweet

I am looking to incorporate a waiting time animation when submitting a form, and I prefer using SweetAlert over a traditional loading image. Here is the basic code snippet: $("form").submit(function (e) { e.preventDefault(); // prevents def ...

javascripthtmlsweetalert2

Conceal Navigation Panel while Scrolling Down, Reveal when Scrolling Up, Compatible with Chrome, Incompatible with Safari (on smartphones

I have implemented a code to hide my navbar when scrolling down and show it when scrolling up. This code works perfectly on desktop and in all browsers, including Chrome on mobile (iPhone). However, in Safari, the navbar sometimes shows, hides, and shows a ...

javascriptjqueryhtmlioscss

Centering an image and menu in the middle of an HTML page

I have a school project where I am trying to align both an image and a menu in the center and middle. Here is my code on CodePen: LINK I will also share the code here: HTML <header> <img id="logo" src="https://exampleimage.com/logo.jpg"> < ...

htmlcss

What is the best way to include a specific stylesheet for Blackberry Curve devices based on certain conditions

Is there a method to include a custom style-sheet specifically for the 'Blackberry curve 2007'? Or perhaps implement a redirect that can identify this device and direct them to a different .html page? I'm looking to create a simplified versi ...

blackberrymobilecss

Steps to include a border around text and center align it:

As a beginner in Html and CSS, I am trying to create a heading with the text "Women safety" and wrap it with a border. However, when I apply the border to the text, it covers the entire width, extending both left and right. I only want the border to be a ...

javascripthtmlcssborder

Combining D3.js tooltip positioning with CSS overflow styling

I am encountering an issue with displaying tooltips in D3 when combined with CSS overflow. Is there a solution available for this particular problem? CSS code: #chart1 { overflow-x: auto; overflow-y: hidden; max-width: 800px; max-height: 22 ...

cssd3.js

Establishing a color palette for various CSS classes using a gradient color spectrum

I am looking to create a gradient color scale and define classes for it based on a range of values. My scale ranges from 0 to 8.5, with increments of 0.25. This means I have a total of 34 different colors (8.5/0.25 = 34) to cover the entire spectrum. Each ...

htmlcsscolorsgradient

Ways to guarantee consistent font appearance across all browsers/platforms for PDF display (Cufon, Images, sIFR)

After countless hours delving into various @font-face issues for RTL languages, font-rendering disparities on different browsers, PDF compatibility, and more. My main goal is to achieve CSS-compatible Arabic text (an RTL language) in an HTML document that ...

htmlpdf-generationfont-facesifrcufon

What is the best way to create two fields side by side within a single row?

I'm struggling to merge the data array of two different identity types into one row as a field. Here's the code I've written: import React from 'react' import {Form,Field,ErrorMessage,Formik} from 'formik' import * as yup ...

javascripthtmlcssreactjstailwind-css

Issue encountered with ngFor: 'Identifier not defined __type does not have any such member'

Recently, I successfully implemented a sub-component that allows users to dynamically add and remove a set of controls to and from a collection. The inspiration for this solution came from reading through this particular thread on Stack Overflow. While ev ...

htmlangular

Changing the border color in a CSS pseudo-class does not take effect upon clicking

Is it possible to change the border color of an input field when clicked using CSS? I attempted to use the pseudo-class focus for this purpose, but encountered some issues. It seems to only work on select elements and not on elements like text inputs. . ...

htmlcssbootstrap-4

Prevent Text Overflow in CSS, Material-UI, and React styling efforts

I am facing an issue where the cardTitle is overlapping the Card when the text is too long. Currently, I am manually setting a static maxWidth, but I would prefer for it to adjust based on the size of the Card. Is there a way to achieve this dynamically? ...

cssreactjsmaterial-ui

Creating a row with 5 columns in Bootstrap 4 dynamically is a handy trick for enhancing the layout of your website

Struggling to find the right layout for displaying products on my store's home page. <div class="row"> @foreach($produts as $product) //this is the syntax of my templating engine <div class="col-md-3"> </div> @endf ...

cssbootstrap-4

How to align a Bootstrap form to the center

Struggling to center the opt-in form on my website, I've created a "center" class with margin properties but it's not working as expected. .center { margin-left: auto; margin-right: auto; width: 100% } I suspect that one of Bootstrap's cla ...

csstwitter-bootstrap