Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not working for MS Edge #179

Open
Ericky14 opened this issue May 30, 2018 · 3 comments
Open

Not working for MS Edge #179

Ericky14 opened this issue May 30, 2018 · 3 comments

Comments

@Ericky14
Copy link

Ericky14 commented May 30, 2018

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
Copy link

BroFox86 commented Nov 30, 2018

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

@jonathantneal
Copy link
Owner

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

@BroFox86
Copy link

BroFox86 commented Nov 30, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants