CODEWITHSUNDEEP
cssfirefoxsvg
SomeKittens
SomeKittens

Reputation: 39532

SVG-specific CSS not loading in Firefox

I'm using the following CSS in my SVG:

line{
    stroke-linecap:round;
    stroke-width:4;
    stroke:url(#disabled); 
    fill:url(#disabled);
}

In Chrome and IE, this works fine. However, Firefox won't accept the stroke:url(#disabled); and fill:url(#disabled);. So those elements are black. I think that the # could be causing it (FF has had issues with this in the past). What can I do to fix this? I've tried escaping the # as well as replacing it with #.

Upvotes: 0

Views: 397

Answers (1)

SomeKittens
SomeKittens

Reputation: 39532

As it turns out, the # was a red herring. (which is why escaping it didn't change anything.) Firefox was trying to locate #disabled relative to the CSS file, rather than the SVG file. I solved it by skipping the CSS classes altogether and editing the CSS inline with JavaScript.

Upvotes: 1

Related Questions