Creating unique CSS styles for SVG <use> elements in various situations

Is there a way to style a <use> element based on its parent class that will work consistently across different browsers?

CSS Code Example

.column-1 {
  .cls-1 {
    fill: red;
  }
  .cls-2 {
    fill: green;
  }
}

.column-2 {
  .cls-1 {
    fill: blue;
  }
  .cls-2 {
    fill: yellow;
  }
}

HTML Structure

This demo includes an SVG element with two paths that each have a specific class name.

<div class="column-1">
    <svg><use xlink:href="#icon-usp_return"></use></svg>
  </div>

  <div class="column-2">
    <svg><use xlink:href="#icon-usp_return"></use></svg>
  </div>

Check out the Demo/Playground

http://codepen.io/anything/pen/kXKZNP?editors=1100

htmlcsssvg

Answer №1

To style your SVG paths, you can use path styles by adding the following to each path tag:

style="fill: var(--cls-1)"

Next, assign a class to your SVG tag like this:

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

Lastly, define your CSS properties:

.icon1 {
  --cls-1: red;
  --cls-2: green;
}

You can see a complete example in action here: http://codepen.io/westefan/pen/grNvoy

Answer №2

If you want to change the color of the second path in your SVG, simply add fill="currentColor" to it.

To apply different colors using CSS, you can use the following code:

.section-1 {
  use {
    fill: pink;
    stroke: purple;
  }
}

.section-2 {
  use {
    fill: yellow;
    stroke: green;
  }
}

Check out this live example based on your instructions:

https://jsfiddle.net/4m63dopn/

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 about using a JQuery variable?

I'm a beginner in jQuery and I have this code snippet that displays a div when a specific link on a map is hovered over: <div id="locationmap"> <a class="linkhide" id="link1" href="#">Occupier 1</a> <a class="linkhide" id ...

javascriptjquerycssshow-hide

How come the ng-click inside ng-repeat is not triggering the function as expected?

Attempting to execute a function in a clientside controller file by utilizing ng-click on a button within my HTML. Unfortunately, I am not receiving any output and cannot determine the cause of the issue. Any assistance would be greatly appreciated. HTML ...

htmlangularjsangularjs-ng-repeatangularjs-ng-click

Creating dynamic dropdowns with Ajax and HTML on the code side

I have developed a script that generates a drop-down menu and updates the .box div with a new color and image. Below is the HTML & Java code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> ...

javascriptjqueryhtmlcss

How to perfectly position various height <a> elements in a WordPress mega menu

I'm currently working on a WordPress mega menu with four columns, each with a heading or top menu item. The headings should have a gradient border at the bottom and differ in length. However, I'm facing an issue where some headings span two lines ...

htmlcsswordpress

Could you explain why my code is not functioning as intended when I attempt to modify the class of a specific element?

I've been trying to change the class of a specific <li></li> element, but none of the methods I've attempted seem to be working. Could you please help me figure out why my code isn't functioning as expected? <script type="tex ...

javascriptjqueryhtml

Is there a way to remove any excess white space towards the top?

Hello once again, I've reached a frustrating point in my learning journey. There seems to be extra space at the top with every browser see image here. I tried using body {overflow:auto;} in the CSS but it only worked up to a certain extent, getting ri ...

htmlcss

Guide to triggering a click event programmatically at specific x and y coordinates using JavaScript

The event api allows for the creation of a synthetic MouseEvent that can be programmatically dispatched by a DOM element. By adding an event listener to the document, you can capture the event dispatched by the child element during the bubble phase. For ...

javascripthtmldom

Is there a way to modify the height and width of a div layer?

How can I adjust the height and width of the layer on the card? Also, I want only the close button to be clickable and everything else to be unclickable. Can anyone help me find a solution? <link rel="stylesheet" href="https://stackpath.bootstrapcdn. ...

htmljquerycsstwitter-bootstrap

Customizing the date-select widths: A step-by-step guide

I've been struggling with adjusting the width of different instances of this line: <%= f.date_select :deadline, :order => [:month, :day, :year], class: 'date-pick', id: 'goal' %> Despite creating unique ids for select, d ...

htmlcssdate

Interference in the output of .innerHTML leads to disruption

I have been working on a feature to display a calculated price based on the selected quantity for each individual product. I attempted to duplicate the code and modify variable names, but encountered issues with the increase/decrease buttons triggering mul ...

javascriptjqueryhtmlcss

unable to retrieve data from HTML element

Having trouble accessing the value inside an HTML tag? Here's my dilemma: I can grab the entire tag, but not the value inside. In my app.component.html file: <p #docTitle>the thing I want to extract</p> And in my app.component.ts file: ...

htmlangular

Creating a dynamic row in an HTML table with elements inside

I have an array of numbers in my angular application that I need to display in an HTML table without truncating them and ending with a comma. Each row should display a maximum of 20 values. How can this be achieved? The array looks like this - let arr ...

htmlangular

Ways to Identify When the Back Button is Clicked

Currently, I am developing an HTML website that contains 4 divs on the index.html page. Initially, when clicking on a div, it would expand while the other sections reduced in width. However, the client requested that the URL should change when clicking o ...

javascriptphpjqueryhtmlangularjs

The CSS3 selector matching a value starting with "[attribute^=value]" does not match a value that has spaces after the quotation marks

When using the div[class^="test"] selector, keep in mind that it will not select an element with a class attribute like class=" test-something" (This selector was generated on the backend.) Using the div[class^=" test"] is not a valid choice. ...

csscss-selectors

Techniques for adjusting the dimensions of a select dropdown using CSS

Is there a way to control the height of a select dropdown list without changing the view using the size property? ...

htmlcss

Take away the dropdown selection once the form has been submitted

Every day, a user fills out a form ten times. They choose an option from the dropdown menu, fill out the form, and submit it. I am looking for a solution to either remove the selected option once it's been submitted or mark it as complete by highlight ...

javascripthtmlajax

Tips for designing seamless pagination on a mobile-friendly website with responsive design

My goal is to make pagination easily accessible on mobile devices for users of my website, similar to UIScrollView with paging enabled in iOS. However, it's important that the website remains functional and visually appealing on desktops as well. I h ...

ioscssmobilewebuiscrollview

Ways to retain specific div elements following the execution of .html(data) command

Imagine I have a div structured in this way: <div id = "foo" style = "display: grid"> <div id = "bar"> keep me! </div> </div> If I use JQuery's .html(data) method like shown below: $('#foo').html(data); when m ...

javascriptjqueryhtml

Creating an endless ticker animation in AngularJS that dynamically adjusts to element dimensions

This is my initial foray into AngularJS, where I am creating a ticker display comprised of boxes. Check out the CodePen here The Code: index.jade: doctype html html(ng-app="ticker") head script(src="../bower_components/angular/angular.js" ...

javascriptangularjscss

What is the best way to display various dialogs based on the specific button that is clicked?

Starting a new project, I foresee the need for numerous dialog boxes and modals. I've come up with some basic code that displays the dialog when a button is clicked and hides it when the cancel button is pressed. However, I'm facing the issue o ...

jqueryhtmlcssmodal-dialog