Having trouble applying CSS to SVG icons from defs file in Webkit Browser

I've been tinkering with a project that incorporates SVG icons, hoping to style them using CSS for various scenarios and hover effects. However, my attempts are falling short in Webkit, while Firefox is displaying the icons as intended:

http://codepen.io/poopsplat/pen/ycaod

My approach involves following Chris Choyier's technique outlined in his Icon System with SVG Sprites article, which entails including a defs file on the page and inserting <svg> elements that reference specific <symbol> elements via their id attribute using the <use> tag. Additionally, I'm using Grunt-svgstore to streamline the creation of the SVG defs file.

Chris's demo (http://codepen.io/chriscoyier/pen/EBHlD) functions smoothly in Webkit, even when nesting the icons into containers for targeted styling. He utilizes <g> elements and styles those, whereas the output from Grunt-svgstore wraps individual icons in <symbol> elements with corresponding ids referenced in the HTML. I adjusted my SVG defs file format to align with Chris's setup, but it didn't resolve the issue.

I'm puzzled by the discrepancy between my implementation and Chris's example - any insights on why targeting these SVG icons is problematic in Webkit?

htmlcsssvg

Answer №1

Make sure to remove any presentation attributes from your SVG icons, as these can override styles defined in CSS for the `use` element.

To see a simple example, check out this JSFiddle link.

Here is an example of how you should structure your SVG and CSS:

<svg style="display:none">
    <defs>
        <symbol id="withFill" viewBox="-5 -5 10 10">
            <circle r="5" fill="orange"/><!--You can't override this value-->
        </symbol>
        <symbol id="noFill" viewBox="-5 -5 10 10">
            <circle r="5"/>
        </symbol>
    </defs>
</svg>

<svg width="200px" height="100px">
    <use xlink:href="#withFill" width="100" height="100"/>
    <use xlink:href="#noFill" x="100" width="100" height="100"/>
</svg>

And don't forget to include this CSS:

use{
    fill: red;
}

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

Pressing the dart key will alter the sprite's direction in a 2D game

Recently, I've been working on a Dart game where the user controls a space ship sprite using the W, A, S, and D keys. Pressing these keys will move the sprite up, left, right, and down respectively. Additionally, pressing the Space bar will launch a p ...

htmldartgame-development

Determining Text Color Based on Background Hue

Is it possible to create a div that dynamically changes text color based on the background color surrounding it? I want the text to switch between two different colors, with the font color being the opposite of the background color. For example, black text ...

htmlcsscolorsmix-blend-mode

Is the p tag not becoming absolute from the bottom even when set to position: absolute?

My p tag in the section properties of div class="sf sf_2 won't align to 0 px from the bottom of the div. It seems to move 0px from the top, right, and left but not bottom. I've tried changing its position property and where it's nested, but ...

htmlcss

Deactivate the selection option in Syncfusion NumericTextbox

I have integrated an Angular NumericTextbox component from Syncfusion into my application. A problem we encountered is that when the input is clicked, it automatically gets selected. Is there a way to disable this behavior? Problem: https://gyazo.com/a72b ...

htmlangulartypescriptsyncfusionnumeric-textbox

Click here to navigate to the same or a different page using an anchor

I'm currently implementing this code: $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostna ...

javascriptjqueryhtmlanchor

Load the React chunk CSS dynamically to optimize performance and only when it is necessary

After running an audit, Lighthouse is advising me to "Defer unused CSS" for my React app. Despite implementing code splitting and having separate CSS files for each chunk, the suggestion persists. One particular example highlighted by Lighthouse is the foo ...

cssreactjsoptimizationlazy-loadingcreate-react-app

Create two floating divs that adjust their height dynamically to be equal

Situation: I have a container with two direct children, known as "left" and "right". The height of the "left" child should never exceed the height of the "right" child. However, the "right" child can extend beyond the height of the "left" child. I am stru ...

htmlcsscss-float

Implementing a fixed div with jQuery scrolling

I need the left div to stay in sync with the scrolling content. However, there is a challenge because this div is taller than the screen. I want the user to be able to see the bottom of the left div when they reach the bottom of the page. My solution invo ...

jqueryhtmlcssscroll

Can a nofollow attribute be added to concealed modal content in Bootstrap?

Query: I am dealing with a situation where I have a significant amount of disclaimer text within a modal on my website. This text is initially hidden (display:none) until a user clicks a button to reveal it. I want to prevent search engines from indexing t ...

htmlcssseo

Resolving DOMException issue in Google Chrome: A Step-by-Step Guide

In my browser game, I am experiencing an issue with sound playback specifically in Google Chrome. Although the sound manager functions properly in other browsers, it returns a DOMException error after playing sounds in 50% of cases. I'm unsure what co ...

htmltypescriptgoogle-chrome

Troubleshooting Flexbox in Internet Explorer 11: Issue with 100% width not functioning properly within nested flex containers with a 'column'

Is there a way to ensure that an image within nested flex containers has a width of 100% in IE11, even when the container has flex-direction: column? I've tried setting the width to 100% with a max-width of calc(100% - 0.1px), but unfortunately it doe ...

htmlcssflexboxinternet-explorer-11

A step-by-step guide on utilizing URL creation in Yii1

My controller is saved in the directory Controller/SiteAction/1700/Participate and my view file can be found at views/site/eventview. I need to add a button inside eventview that directs to Controller/SiteAction/1700/Participate. Therefore, I have to utili ...

htmlajaxyii1.x

What is the best API for incorporating interactive maps into my Android application?

I am looking to create an Android app (using Java) with interactive maps similar to ammaps, which can be integrated with HTML5/jQuery Mobile. Check out for reference. The app will display a world map where different areas are highlighted or colored based ...

androidjqueryhtmlgoogle-maps

Encountering a NullPointerException when transferring inputs from scala.html to Controller as a form in Play framework (version 2.8.*) using

I am currently developing a Java web application using the Play Framework (2.8.19). In the process of creating a registration page, I encountered an issue with passing inputs from the registration page written in Scala to the controller class that is respo ...

javahtmlpostgresqlplayframeworkplayframework-2.8

Tips for positioning an element at the bottom of a flexible container with variable size

How can I ensure that the Author element in this jsfiddle is aligned properly between the card elements? I am struggling to adjust the size of the details container to match the variable sizes of other elements in the same row. The aim is to have the Auth ...

cssflexbox

What is the best way to center a Bootstrap 4 navigation menu horizontally?

The alignment of the navigation is causing a bit of confusion. I've attempted to set the links to navbar-brand, but while this centers them, it also causes other elements to shift slightly downward. Additionally, it's puzzling why the select opti ...

csstwitter-bootstrap

Transforming CSS styles into Material UI's makeStyles

My CSS styling was originally like this const Root = styled.div` display: flex; flex-direction: row; margin: 0 auto; width: 100%; position: relative; @media (min-width: ${(p) => p.theme.screen.md}) { width: ${(p) => p.theme.screen.md ...

cssreactjsmaterial-ui

The Firebase JQuery .on method is incrementally updating individual values in an array instead of updating them all simultaneously

I am trying to update the values of the orders placed by users on the Corporate's page without a refresh. I have implemented the jQuery .on method for this purpose. However, the values are being returned one by one from the array created for the order ...

javascripthtmlfirebasefirebase-realtime-database

Accessing CSV data stored externally using JavaScript

Hi there, I am struggling to load external CSV data into a script due to what I believe is the browser's same origin policy restriction. I came across some information about using cross-document messaging as a workaround, but I have no idea how to go ...

javascripthtmld3.js

Eliminate unnecessary scrollbar from fancybox iframe

I am trying to display content in an iframe using Fancybox, but I am encountering an issue. Despite all the content being contained within the iframe, horizontal and vertical scroll bars are appearing. When inspecting the element in Firefox, I noticed th ...

javascripthtmlcssfancybox