How to Use a Hex Value for Svg in Firefox

How to use a hex value for SVG in FireFox

The character # is reserved in URLs as the start of a fragment identifier. You must encode this as %23 for the URL to be valid. This is not a Firefox bug.

Alternatively you could encode the whole string using base64.

Firefox throwing error while reading #hex color codes inside inline SVG

a hash character in a URL is reserved to indicate the start of a fragment identifier.

You need to URL encode the # as %23.

It's a Chrome bug that it does not enforce this rule or indeed parse URLs correctly.

SVG Fill not being applied in FireFox

If the behavior was unique to Firefox prior to version 56, it was because #menu-bag refers to a <symbol> element.

The specs say that a re-used <symbol> should be implemented as if it were replaced by a nested <svg>. Firefox used to treat this literally in their shadow DOM. The shadow DOM isn't visible in your DOM inspector, but it is subject to CSS selectors.

Which means that this code:

<a href="#" class="skip-link">
    <svg class="icon">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag"></use>
    </svg>
</a>

WAs implemented like this:

<a href="#" class="skip-link">
    <svg class="icon">  
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag">
          <!--Start of shadow DOM boundary-->
          <svg><!-- replacement for <symbol> -->
             <!-- graphics content -->
          </svg>
          <!--End of shadow DOM boundary-->
        </use>
    </svg>
</a>

The svg.icon matches your .skip-link .icon rule (and as Kyle Mitt points out, that rule will always take precedence over your a:hover svg rule). This value is also inherited by the <use> element.

However, the shadow-DOM <svg> doesn't get the inherited value, because it is styled directly with the svg rule. When you change your selector to .skip-link svg, or when you trigger the a:hover svg rule, then the hidden inner element gets the style directly applied because that SVG is also a descendent of the link.

As Robert Longson noted in the comments, this is not how it is supposed to work. It's a side effect of the way that Firefox implemented <use> elements as complete cloned DOM trees, which just happened to be hidden from your DOM inspector.

Here's a "working" example of your original problem. Which is to say, on Chrome, Safari, Opera, Firefox 56+ or IE you will see a green circle that isn't altered when you hover it, but on Firefox prior to version 56 you will see a blue circle that turns red on hover/focus.

svg {

    fill: navy;

}

a:hover svg, a:focus svg {

    fill: red;

}

.skip-link .icon {

    fill: green;

}

.icon {

    height: 50;

    width: 50;

}

 <a href="#" class="skip-link">

        <svg class="icon">

            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag" />

        </svg>

</a>

<svg height="0" width="0">

    <symbol id="menu-bag" viewBox="-10 -10 20 20">

        <circle r="10" />

    </symbol>

</svg>

SVG image within an absolutely positioned div is different on Firefox than Chrome

this solves the issue but you need to correct the first letter

.textmark .textmark-text {
    display: inline;
}

SVG inlined in CSS works in Chrome/Edge but not in Firefox

Found it. # should be replaced with %23

---

Related Topics