Strange Behavior of SVG 'fill: url(#....)' in Firefox

I am struggling with an SVG graphic that I have created. Here is the code:

<svg width='36' height='30'>
  <defs>
    <linearGradient id="normal-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(81,82,84); stop-opacity:.4"/>
      <stop offset="100%" style="stop-color:rgb(81,82,84); stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="rollover-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(0,105,23); stop-opacity:.5"/>
      <stop offset="100%" style="stop-color:rgb(0,105,23); stop-opacity:1"/>
    </linearGradient>
    <linearGradient id="active-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(0,0,0); stop-opacity:.4"/>
      <stop offset="100%" style="stop-color:rgb(0,0,0); stop-opacity:1"/>
    </linearGradient>
  </defs>

  <text x="8" y="25" style="font-size: 29px;" font-family="Arial">hello world</text>
</svg>'

My issue arises when setting the fill attribute of the text element using CSS and trying to switch between different gradients based on hover state. While this setup works fine in Chrome and Safari, Firefox does not display the text. Upon inspecting the element, I noticed that Firefox appends a none value at the end of my fill: url(#...) CSS attribute. Even attempts to remove the none keyword using Firebug result in deletion of the entire attribute. Any ideas why this is happening?

EDIT: It's worth mentioning that removing the CSS for setting the fill property and directly hardcoding it into the text element (without an inline style attribute) makes the text display correctly on all browsers.

cssfirefoxsvggradientfill

Answer №1

After some troubleshooting, I finally cracked the code. It turns out that in my CSS file, I needed to adjust how I referenced the gradients compared to how I originally defined the fill inline:

#myselector {
    fill: url('#gradient-id');
}

For Firefox compatibility, I had to make a slight modification as follows:

#myselector {
    fill: url('/#gradient-id');
}

I'm not entirely certain why this change was necessary. Perhaps it's related to the directory structure where my stylesheet is housed?

Answer №2

When trying to assign the code below with CSS in Firefox, SVG "fill: url(#...)" acts strangely, whether using external or internal stylesheets.

#myselector {
fill: url('#gradient-id');
}

Resolution

To resolve this issue, inline styling can be applied in two different ways - statically or dynamically.

Dynamically:

.attr('fill', 'url(#gradient-id)')

Statically:

fill="url(#gradient-id)"

In the static method, the code must be placed directly in the SVG HTML.

Answer №3

Encountered a similar issue with the linearGradient element in an SVG file - even in the current year of 2017. It appears that Firefox may be treating the url('#gradient-id') reference as a regular URL and applying the rules from the <base href=""/> meta tag. Try commenting it out and then retesting.

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

Having trouble converting svg to png, thinking it might be due to discrepancies in svg elements

I am facing a puzzling issue where two different SVG elements are causing my JavaScript to work in one scenario but not the other. I have replaced the SVG elements in both examples, and surprisingly, only one works while the other does not. You can view th ...

javascriptjqueryhtmlcsssvg

Achieving CSS Buttons That Change to Green When Clicked and STAY Green

I've been tasked with working on a front-end project for a website that involves buttons changing color when clicked and staying that color. Here is the CSS <style> code I have written for these specific buttons: .button { background-color ...

javascriptjqueryhtmlcss

Achieving Content Centering in React Material UI: A Guide to Aligning to the Middle of the Page

Currently, the button is displaying in the top left corner. How can I move the button to the center of the page? import {Button} from '@mui/material'; function App() { return ( <Button variant="contained">Hello World</ ...

cssreactjsmaterial-ui

Triggering transitionend event once with an added if condition

Currently, I have an application of an if statement that examines whether an element contains a style attribute. In the event that the style attribute is absent, it appends inline styling. Conversely, if the style attribute exists, it is removed. Furthermo ...

javascriptjquerycsscss-transitions

Having trouble with positioning divs on top of each other? Struggling to get position absolute to work correctly?

Currently, I am utilizing flexbox to construct a grid layout. However, I have hit a roadblock when attempting to make the divs stack on top of each other. The overflow:auto is hidden and position relative has been added to the carddiv. While the divs are s ...

htmlcssreactjs

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Wondering how to accomplish this: I've designed an HTML5 homepage and I'm looking to display a message to visitors, such as "Dear visitor, I am currently on vacation from....", in the form of a memo or sticky note positioned in the top right cor ...

javascriptjquerycsshtml

MUI CSS: Mastering image manipulation

My MUI React Component features a Card that contains an image and buttons <Card key={index} className="xl:w-[350px] w-[310px] max-h-[450px]"> <img src={meme.url} className="center bg-cover" alt="" /> <Box cl ...

cssreactjsmaterial-uitailwind-css

Style the CSS exclusively to the expanded menu section

I need help with applying CSS rules to my navbar menu without affecting the collapsed menu. I came across a solution here and tried using this code: @media (min-width: 980px) { /* your conditional CSS*/ } However, the issue arises when my browser win ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

How can I wrap text in Angular for better readability?

I've created a calendar in my code that displays events for each day. However, some event descriptions are too long and get cut off on the display. Even after attempting to use Word Wrap, I still can't see the full text of these events unless I c ...

htmlcssangulartypescriptword-wrap

How can I use querySelector in JavaScript to target all div elements that have the same class?

I'm having an issue with the document.querySelector in my JavaScript code. It currently only selects the first div that contains the class "test", but I need it to select all such divs. Is there a way to achieve this using my existing JavaScript? ...

javascripthtmlcss

Customized function enabling dynamic menu display based on varying screen dimensions

Looking for assistance with JS and jQuery as I am relatively new to it. Any help would be greatly appreciated... I'm currently working on a responsive header where I want to implement onclick functions for mobile and tablet resolutions only. I' ...

javascripthtmljquerycssjquery-events

Why is a div nested inside an overflow: hidden; div not expanding to the full width of its content?

.container { white-space: nowrap; overflow: hidden; } .inner { width: 100%; } .list-item { display: 'inline-block', boxSizing: 'border-box', border: '3px solid black' } import React, { Component } from 're ...

javascriptcssreactjs

Differentiating onClick events for parent and child elements

I need help with my JSX code: <div id="parent" onClick={clickOnParent} style={{ width: 100, height: 100 }}> <div id="child" onClick={clickOnChild} style={{ width: 20, height: 20 }} /> </div> When I click on the pare ...

javascripthtmlcssreactjsdom

I can't seem to get my SVG data URL located inside an HTML file within an SVG data URL to display in Chrome

Background I am encountering an issue where an SVG data URL used as a background image property inside an HTML element within a <foreignObject> nested within an SVG data URL is not rendering properly in Google Chrome. If this structure was outside o ...

htmlcssgoogle-chromesvghtml5-canvas

Is it possible to include additional transformations to a div element?

Is it possible to add additional rotation to a div that already has a transform applied? For example, can I do the following: <div style="width: 200px; height: 200px; background-color: red; transform: rotateX(90deg) rotateY(10deg)" id="myDiv">< ...

javascriptjqueryhtmlcsstransform

Utilizing Paragraph Styles Within a CSS Stylesheet

I'm attempting to create two unique styles for a pair of paragraphs in an xhtml document by utilizing a CSS style sheet. Despite my efforts and extensive search, I have yet to find a clear solution. ...

cssxhtmlstylesheet

Element with absolute position does not expand along with scrollable content (over 100%)

In my popup window, the fade element is supposed to stretch to the full width of the screen. However, when the content exceeds 100% of the browser window height, the element does not extend to the full page height. If I set html, body { height: 100%; over ...

javascriptjqueryhtmlcss

Is there a way to place two input fields from different forms side by side on the same line?

Here are two forms extracted from an html page: <form method="get" action="search/s" id="number"> <div style="text-align: center;"> <input type="text" id="regNo" name="regNo" size="30" maxLength="50" > or ...

javascripthtmlcssuser-interfaceweb

Trouble encountered while trying to animate an SVG path

My attempt to animate an SVG is not working for some reason. https://i.stack.imgur.com/atTg3.png This is the component where I'm trying to load the SVG: import { JapanMap } from "../illustrations/japanMap"; export default function Home() ...

htmlcssnext.jscss-animations

Generating numerous variables simultaneously is a feature of SASS

Is it possible to utilize a SASS map in order to generate individual variables for each key-value pair? For instance, I aim to achieve the following: $heading: ( 1: 5rem, 2: 4.5rem, 3: 4rem, 4: 3.5rem, 5: 3rem, 6: ...

htmlcssreactjssassless