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
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...