How to get svg animation to work in FireFox

1

I’m currently working on creating the UI for a music player.

I’ve run into a issue with SVG linear gradient animations in Firefox.
The linear gradient styles work fine in chrome and safari but don’t show up in Firefox.

I’ve tried

  1. Placing the linearGradient into the inline styles
  2. Moving the defs element containing the linearGradient element into its own SVG

Found a Codepen that uses the same code and works in Firefox here.

here is a link to my project on Github pages

I can’t understand what’s wrong, any help would be greatly appreciated.

<a href="#" id="btn-1" class="btn">
    <svg xmlns="http://www.w3.org/2000/svg" class="svg-btn">

        <!-- Defs holds animations for all buttons -->
        <defs>
            <!--    Gradient for active fill -->
            <linearGradient id="btn-background" x1="50%" y1="0%" x2="50%" y2="100%">
                <stop offset="0%" stop-color="#7A5FFF">
                    <animate attributeName="stop-color" values="#7A5FFF; #01FF89; #7A5FFF" dur="4s"
                        repeatCount="indefinite"></animate>
                </stop>

                <stop offset="100%" stop-color="#01FF89">
                    <animate attributeName="stop-color" values="#01FF89; #7A5FFF; #01FF89" dur="4s"
                        repeatCount="indefinite"></animate>
                </stop>
            </linearGradient>

            <!-- LinearGradient referenced for btn stroke -->
            <linearGradient id="stroke-gradient">
                <stop offset="0%" stop-color="#FF8282" />
                <stop offset="100%" stop-color="#E178ED" />
            </linearGradient>
        </defs>

        <!-- Rect create btn border and background -->
        <rect class="btn-stroke" x="5" y="5" rx="25" stroke="url(#stroke-gradient)"></rect>
        <rect class="btn-background" x="5" y="5" rx="25" fill="url(#btn-background)"></rect>
    </svg>

    <!-- play/pause icon -->
    <span class="btn-play-pause">
        <svg xmlns="http://www.w3.org/2000/svg">
            <!-- Play icon -->
            <polygon points="9.33 6.69 9.33 19.39 19.3 13.04 9.33 6.69"/>
            
            <!-- Pause icon -->
            <g>
                <line x1="9" y1="6" x2="9" y2="19"/>
                <line x1="15" y1="6" x2="15" y2="19"/>
            </g>
        </svg>
    </span>

    Original
</a>
2

The <rect> elements seems to be collapsing on Firefox when not using the width/height attributes on the <rect> element.

<rect class="btn-stroke" x="5" y="5" rx="25" width="96%" height="80%" stroke="url(#stroke-gradient)"></rect>
<rect class="btn-background" x="5" y="5" rx="25" width="96%" height="80%" fill="url(#btn-background)"></rect>
1 Like
3

Thank very much! :slight_smile: knew I was missing something.