jonathantneal / svg4everybody

Use external SVG spritemaps today
https://jonneal.dev/svg4everybody/
Other
3.29k stars 353 forks source link

Not working for MS Edge #179

Open Ericky14 opened 6 years ago

Ericky14 commented 6 years ago

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>
    );
};
BroFox86 commented 5 years ago

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

jonathantneal commented 5 years ago

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

BroFox86 commented 5 years ago

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