jonathantneal/svg4everybody

Not working for MS Edge

Ericky14 opened this issue · 3 comments

How exactly do I use this plugin? I've tried adding it to the entry array of my webpack config and then doing. (The animation does not work, the SVG does not spin)

import svg4everybody from 'svg4everybody';
svg4everybody();

But it doesn't seem to work. Am I supposed to call the function at a specific place?
I'm using react-static which uses gulp and babel to serve the project. And this is how I am adding the svg into the html code.

import React from 'react';
import { colors } from '@hivekit/core';

export default (props) => {
    return (
        <svg
            width='100px'
            height='100px'
            xmlns='http://www.w3.org/2000/svg'
            viewBox='0 0 100 100'
            preserveAspectRatio='xMidYMid'
            className='lds-rolling'
            style={{background: 'none'}}
            {...props}>
            <circle
                cx={50}
                cy={50}
                fill='none'
                stroke={colors.gray}
                strokeWidth={6}
                r={30}
                strokeDasharray='75.39822368615503 27.132741228718345'
                transform='rotate(342 50 50)'>
                <animateTransform
                    attributeName='transform'
                    type='rotate'
                    calcMode='linear'
                    values='0 50 50;360 50 50'
                    keyTimes='0;1'
                    dur='1s'
                    begin='0s'
                    repeatCount='indefinite'/>
            </circle>
        </svg>
    );
};

In my case removal the <switch> tags resolved the issue.
It seems Edge doesn't support some SVG tags and features.

That doesn’t seem right according to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/switch

Icons in external sprite were not displayed on Edge before i removed switch tags. I've attached a part of that sprite with the problem icon. I just tried again and got the same issue...

sprite.zip