shadow in svg on hover - css

I don't see what I'm doing wrong, so perhaps someone else will!
Here goes: I've made a Facebook button in svg. When I hover over the button I would like it to "sink into the background" using a inline shadow.
Here is the svg:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFE06B;}
.st1{fill:#F7C411;}
.st2{fill:#FF9900;}
g#shadow {display:none;}
g#shadow:hover {display:block;}
</style>
<g id="layer_1">
<circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
<path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
<g>
<path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
</g>
</g>
<g id="layer_3">
<g>
<path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
</g>
</g>
</svg>
The group with ID "shadow" should display when I hover over it, but it doesn't. Who sees my mistake?
Thanx,
Thom

The shadow elements are display:none and are therefore not rendered. There's nothing there to hover over.
This turns on the shadow when you hover anywhere over the button, assuming that's what you want to achieve. There's an additional hidden circle to catch all the events and the foreground is pointer-events: none so it doesn't interfere with the catching of the hover events.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFE06B;}
.st1{fill:#F7C411;}
.st2{fill:#FF9900;}
g#shadow {visibility:hidden;pointer-events:all}
g#shadow:hover {visibility:visible;}
</style>
<g id="layer_1">
<circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
<path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
<g>
<path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
</g>
<circle visibility="hidden" cx="200" cy="200" r="200"/>
</g>
<g id="layer_3" pointer-events="none">
<g>
<path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
</g>
</g>
</svg>

Related

How to make an SVG object follow a path correctly using SMIL [duplicate]

This question already has an answer here:
svg animateMotion is offset from path
(1 answer)
Closed 2 years ago.
I am trying t create a simple SVG animation(using SMIL) and I can't seem to figure out why the orb isn't following the arc, instead the orb it is at the bottom of the page.
Here is my code:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1240 768" style="enable-background:new 0 0 1240 768;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#0FBA70;}
</style>
<animateMotion xlink:href="#orb" dur="10s" begin="0s" fill="freeze" repeatCount="indefinite">
<mpath xlink:href="#motionPath" />
</animateMotion>
<g>
<polygon class="st0" points="389.5,405.5 394,405.5 926.8,400.5 930.5,400.5 "/>
<path id="motionPath" d="M390.9,407.5l-2.9-4.1C426,377,625,248.9,820.4,327.2c40.5,16.2,78.1,40.3,111.8,71.5l-3.4,3.7
c-33.2-30.8-70.3-54.5-110.2-70.5C625.5,254.5,428.5,381.3,390.9,407.5z"/>
</g>
<g>
<circle id="orb" class="st1" cx="389.5" cy="400.5" r="56.5"/>
</g>
</svg>
The orb is currently being offset with the cx and cy values:
<circle id="orb" class="st1" cx="389.5" cy="400.5" r="56.5"/>
If you remove those values, the orb follows the path:
<circle id="orb" class="st1" r="56.5"/>
See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion for a working example, and if you open that in JSFiddle or Codepen and add a cx or cy value you will observe the same behavior (circle is animating offset from the path).
.st0 {
fill: #FFFFFF;
}
.st1 {
fill: #0FBA70;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1240 768" style="enable-background:new 0 0 1240 768;" xml:space="preserve">
<animateMotion xlink:href="#orb" dur="10s" begin="0s" fill="freeze" repeatCount="indefinite">
<mpath xlink:href="#motionPath" />
</animateMotion>
<g>
<polygon class="st0" points="389.5,405.5 394,405.5 926.8,400.5 930.5,400.5 "/>
<path id="motionPath" d="M390.9,407.5l-2.9-4.1C426,377,625,248.9,820.4,327.2c40.5,16.2,78.1,40.3,111.8,71.5l-3.4,3.7
c-33.2-30.8-70.3-54.5-110.2-70.5C625.5,254.5,428.5,381.3,390.9,407.5z"/>
</g>
<g>
<circle id="orb" class="st1" r="56.5"/>
</g>
</svg>

Material SVGs exported from sketch not showing up in client's browser, but fine in my browser - how to test?

I'm assuming it's an export issue. Trying to figure out how to recreate the issue - any one experience this? Solutions also welcome. Will try re-exporting from Illustrator.
here are some troublesome SVGs (material icons):
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="19px" viewBox="0 0 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="24" font-weight="normal">
<g id="Live-Event-03---Account-Menu" transform="translate(-1160.000000, -158.000000)" fill="#98A4AE">
<g id="menu" transform="translate(1124.000000, 56.000000)">
<g id="item" transform="translate(33.000000, 100.000000)">
<text id="exit_to_app---material">
<tspan x="0" y="20"></tspan>
</text>
</g>
</g>
</g>
</g>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="27px" height="23px" viewBox="0 0 27 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>send - material</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="30" font-weight="normal">
<g id="Modal-05---Share" transform="translate(-477.000000, -395.000000)" fill="#98A4AE">
<g id="modal" transform="translate(435.000000, 376.000000)">
<g id="header">
<text id="send---material">
<tspan x="40" y="41"></tspan>
</text>
</g>
</g>
</g>
</g>
Here is a SVG that was viewed correctly (custom):
<?xml version="1.0" encoding="UTF-8"?>
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon/account-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M28,45.256 C30.8373475,45.256 33.5066542,44.5466738 36.008,43.128 C38.4346788,41.8213268 40.4319922,40.0106782 42,37.696 C41.9626665,36.2773262 41.0853419,34.9706726 39.368,33.776 C37.8746592,32.767995 35.9706782,31.9466698 33.656,31.312 C31.5653229,30.7519972 29.6706752,30.472 27.972,30.472 C26.2733248,30.472 24.3786771,30.7519972 22.288,31.312 C19.9733218,31.9466698 18.0880073,32.767995 16.632,33.776 C14.9146581,34.9706726 14.0373335,36.2773262 14,37.696 C15.5680078,40.0106782 17.5653212,41.8213268 19.992,43.128 C22.5306794,44.5466738 25.199986,45.256 28,45.256 Z M28,12.104 C26.7679938,12.104 25.6106721,12.4213302 24.528,13.056 C23.4453279,13.6906698 22.5866698,14.5493279 21.952,15.632 C21.3173302,16.7146721 21,17.8719938 21,19.104 C21,20.3360062 21.3173302,21.4933279 21.952,22.576 C22.5866698,23.6586721 23.4453279,24.5173302 24.528,25.152 C25.6106721,25.7866698 26.7679938,26.104 28,26.104 C29.2320062,26.104 30.3893279,25.7866698 31.472,25.152 C32.5546721,24.5173302 33.4133302,23.6586721 34.048,22.576 C34.6826698,21.4933279 35,20.3360062 35,19.104 C35,17.8719938 34.6826698,16.7146721 34.048,15.632 C33.4133302,14.5493279 32.5546721,13.6906698 31.472,13.056 C30.3893279,12.4213302 29.2320062,12.104 28,12.104 Z M28,5.104 C32.2560213,5.104 36.1946486,6.16798936 39.816,8.296 C43.3253509,10.3120101 46.0879899,13.0746491 48.104,16.584 C50.2320106,20.2053514 51.296,24.1439787 51.296,28.4 C51.296,32.6560213 50.2320106,36.5946486 48.104,40.216 C46.0879899,43.7253509 43.3253509,46.4879899 39.816,48.504 C36.1946486,50.6320106 32.2560213,51.696 28,51.696 C23.7439787,51.696 19.8053514,50.6320106 16.184,48.504 C12.6746491,46.4506564 9.91201008,43.6693509 7.896,40.16 C5.76798936,36.5386486 4.704,32.6186878 4.704,28.4 C4.704,24.1813122 5.76798936,20.2613514 7.896,16.64 C9.9493436,13.1306491 12.7306491,10.3493436 16.24,8.296 C19.8613514,6.16798936 23.7813122,5.104 28,5.104 Z" id="account_circle---material" fill="#FFFFFF"></path>
</g>
The svgs had a lot of transforms going to and fro which I deleted. Also I could have eliminated some of the nested <g> elements, but maybe you putted them there for some reason.
Also in the CSS I've putted a border to the SVG so that you can see that there is a white space between the icon and the border of the svg canvas. Should it have been for me I would have eliminated that space, but again: you may need it. I hope this helps.
svg{border:1px solid}
<svg width="18px" height="19px" viewBox="0 2 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="24" font-weight="normal">
<g id="Live-Event-03---Account-Menu" fill="#98A4AE">
<g id="menu">
<g id="item">
<text id="exit_to_app---material">
<tspan y="20"></tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
<svg width="27px" height="23px" viewBox="0 20 27 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>send - material</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="30" font-weight="normal">
<g id="Modal-05---Share" fill="#98A4AE">
<g id="modal" >
<g id="header">
<text id="send---material">
<tspan y="41"></tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon" stroke="black" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M28,45.256 C30.8373475,45.256 33.5066542,44.5466738 36.008,43.128 C38.4346788,41.8213268 40.4319922,40.0106782 42,37.696 C41.9626665,36.2773262 41.0853419,34.9706726 39.368,33.776 C37.8746592,32.767995 35.9706782,31.9466698 33.656,31.312 C31.5653229,30.7519972 29.6706752,30.472 27.972,30.472 C26.2733248,30.472 24.3786771,30.7519972 22.288,31.312 C19.9733218,31.9466698 18.0880073,32.767995 16.632,33.776 C14.9146581,34.9706726 14.0373335,36.2773262 14,37.696 C15.5680078,40.0106782 17.5653212,41.8213268 19.992,43.128 C22.5306794,44.5466738 25.199986,45.256 28,45.256 Z M28,12.104 C26.7679938,12.104 25.6106721,12.4213302 24.528,13.056 C23.4453279,13.6906698 22.5866698,14.5493279 21.952,15.632 C21.3173302,16.7146721 21,17.8719938 21,19.104 C21,20.3360062 21.3173302,21.4933279 21.952,22.576 C22.5866698,23.6586721 23.4453279,24.5173302 24.528,25.152 C25.6106721,25.7866698 26.7679938,26.104 28,26.104 C29.2320062,26.104 30.3893279,25.7866698 31.472,25.152 C32.5546721,24.5173302 33.4133302,23.6586721 34.048,22.576 C34.6826698,21.4933279 35,20.3360062 35,19.104 C35,17.8719938 34.6826698,16.7146721 34.048,15.632 C33.4133302,14.5493279 32.5546721,13.6906698 31.472,13.056 C30.3893279,12.4213302 29.2320062,12.104 28,12.104 Z M28,5.104 C32.2560213,5.104 36.1946486,6.16798936 39.816,8.296 C43.3253509,10.3120101 46.0879899,13.0746491 48.104,16.584 C50.2320106,20.2053514 51.296,24.1439787 51.296,28.4 C51.296,32.6560213 50.2320106,36.5946486 48.104,40.216 C46.0879899,43.7253509 43.3253509,46.4879899 39.816,48.504 C36.1946486,50.6320106 32.2560213,51.696 28,51.696 C23.7439787,51.696 19.8053514,50.6320106 16.184,48.504 C12.6746491,46.4506564 9.91201008,43.6693509 7.896,40.16 C5.76798936,36.5386486 4.704,32.6186878 4.704,28.4 C4.704,24.1813122 5.76798936,20.2613514 7.896,16.64 C9.9493436,13.1306491 12.7306491,10.3493436 16.24,8.296 C19.8613514,6.16798936 23.7813122,5.104 28,5.104 Z" id="account_circle---material" fill="#FFFFFF"></path>
</g>
</svg>
In the end, we were able to solve the issue by exporting through Illustrator. Here is how the newly exported SVG code looked:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.a{fill:#98a4ae;}</style></defs><title>sign-out-gray</title><path class="a" d="M44.2964,7a4.5218,4.5218,0,0,1,3.3027,1.4A4.52,4.52,0,0,1,49,11.7036V44.2964a4.7835,4.7835,0,0,1-4.7031,4.7041H11.7041a4.4923,4.4923,0,0,1-3.332-1.4A4.5585,4.5585,0,0,1,7,44.2964V35h4.7041v9.2969H44.2964V11.7036H11.7041V21H7V11.7036A4.5629,4.5629,0,0,1,8.3721,8.3994,4.4919,4.4919,0,0,1,11.7041,7ZM23.52,36.4l5.9922-6.1045H7V25.7036H29.5122L23.52,19.6l3.3042-3.3042L38.5278,28,26.8242,39.7036Z"/></svg>

SVG mask-image not displaying in Firefox and Edge

I have a problem with displaying svg as mask-image in the an older version of Firefox (52.8.1) and Microsoft Edge (40.15063.674.0).
In this version Firefox I am getting an error incorrect property value. And the svg look like squares and rectangles filed with background color.
In the new version of Firefox all works great, also I have no problems in Chrome and Opera with displaying the svg as mask-image.
What could be the reason for this? I understand that Edge is so good like IE was, but I would expect such problems in Firefox because it had a partial support for mask-image back then.
Is there a work around for this issue ?
The css:
float:left;
content: '';
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-image: url(#{$images}/icon-date.svg);
mask-image: url(#{$images}/icon-date.svg);
width: 15px;
height: 16px;
background: $red-color;
margin: 3px 7px 0 0;
and this is how my svg looks:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="55.438px" height="56.114px" viewBox="0 0 55.438 56.114" enable-background="new 0 0 55.438 56.114" xml:space="preserve">
<g>
<path fill="#3A444F" d="M50.438,5.414h-5.323v3.5h5.323c0.813,0,1.5,0.688,1.5,1.5v9.217H3.5v-9.217c0-0.813,0.687-1.5,1.5-1.5
h6.383v4.477c0,0.967,0.784,1.75,1.75,1.75s1.75-0.783,1.75-1.75V8.914h0.011v-3.5h-0.011V1.75c0-0.966-0.784-1.75-1.75-1.75
s-1.75,0.784-1.75,1.75v3.664H5c-2.75,0-5,2.25-5,5v40.7c0,2.75,2.25,5,5,5h45.438c2.75,0,5-2.25,5-5v-40.7
C55.438,7.664,53.188,5.414,50.438,5.414z M50.438,52.614H5c-0.813,0-1.5-0.686-1.5-1.5V23.131h48.438v27.983
C51.938,51.928,51.251,52.614,50.438,52.614z"/>
<path fill="#3A444F" d="M37.633,13.391c0,0.967,0.783,1.75,1.75,1.75s1.75-0.783,1.75-1.75V1.75c0-0.966-0.783-1.75-1.75-1.75
s-1.75,0.784-1.75,1.75v3.664h-5.618v3.5h5.618V13.391z"/>
<path fill="#3A444F" d="M24.508,13.391c0,0.967,0.784,1.75,1.75,1.75s1.75-0.783,1.75-1.75V8.914h0.007v-3.5h-0.007V1.75
c0-0.966-0.784-1.75-1.75-1.75s-1.75,0.784-1.75,1.75v3.664h-5.614v3.5h5.614V13.391z"/>
<g>
<g>
<g>
<g>
<rect x="9.841" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="17.815" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="25.792" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="33.767" y="35.909" fill="#3A444F" width="4.001" height="4"/>
</g>
</g>
<g>
<g>
<rect x="41.742" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
</g>
<g>
<g>
<g>
<rect x="17.815" y="27.926" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="25.792" y="27.926" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="33.767" y="27.926" fill="#3A444F" width="4.001" height="4"/>
</g>
</g>
<g>
<g>
<rect x="41.742" y="27.926" fill="#3A444F" width="4" height="4"/>
</g>
</g>
</g>
<g>
<g>
<g>
<rect x="9.841" y="43.893" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="17.815" y="43.893" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="25.792" y="43.893" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="33.767" y="43.893" fill="#3A444F" width="4.001" height="4"/>
</g>
</g>
</g>
</g>
</g>
</svg>

SVG blurry when resizing

I am using an svg from FlatIcons, When I import it and dont mess with the height/width it looks fine (but is too big) but when I start to reduce its size the borders become blurry and are no longer sharp.
e.g. https://codepen.io/geraintf/pen/ZoaPPW
What is going on? How can I scale an SVG to avoid this?
The SVG:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 52.966 52.966" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
<path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
S32.459,40,21.983,40z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

animation property on svg element doesn't work on edge 15

please see below the svg.
the animation css property works on chrome 58.
the same animation property doesn't work on edge 15.15.
what is the correct way to animate an svg element using edge?
this is the style tag i have inserted on the svg.
<style>
.car-container {
transform-origin: 606px 600px;
animation: rotate-right 6s linear 0s infinite;
}
#keyframes rotate-right {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
please see the whole svg attached in the snippet.
<svg version="1.1" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;" xml:space="preserve">
<symbol id="background" viewBox="0 0 1200 1200">
<style type="text/css">
.bg0{fill:#63C6BD;}
.bg1{fill:#EDF7F7;}
.bg2{fill:none;stroke:#36BDB1;stroke-width:5;stroke-miterlimit:10;stroke-dasharray:192.3119,96.156;}
</style>
<g>
<g>
<path class="bg0" d="M252.5,614.6H176v43h76.5V614.6z M246.7,620.4v6.9h-64.9v-6.9H246.7z M181.8,651.9v-18.7h64.9v18.7H181.8z"/>
<path class="bg0" d="M474.5,599.1V545H143v54.1h7.1v247.2H143v27.6h331.5v-27.6h-7.1V599.1H474.5z M468.7,852.1v16H148.8v-16
h102.7v0.2h114.6v-0.2H468.7z M251.5,776.4v70h-95.6V599.1h305.8v247.2h-95.6v-70H251.5z M360.3,782.2v64.2h-103v-64.2H360.3z
M148.8,593.3v-42.5h319.9v42.5H148.8z"/>
<path class="bg0" d="M447,614.6h-76.5v43H447V614.6z M441.2,651.9h-64.9v-18.7h64.9V651.9z M441.2,627.3h-64.9v-6.9h64.9V627.3z"
/>
<path class="bg0" d="M349.8,614.6h-76.5v43h76.5V614.6z M344,651.9H279v-18.7H344V651.9z M344,627.3H279v-6.9H344V627.3z"/>
<path class="bg0" d="M268.6,808.9H349v-22.1h-80.4V808.9z M274.4,792.6h68.8v10.5h-68.8V792.6z"/>
<path class="bg0" d="M268.6,842.3H349V812h-80.4V842.3z M274.4,817.8h68.8v18.7h-68.8V817.8z"/>
<path class="bg0" d="M447,667.9h-76.5v43H447V667.9z M441.2,705.2h-64.9v-19.4h64.9V705.2z M441.2,679.9h-64.9v-6.2h64.9V679.9z"
/>
<path class="bg0" d="M349.8,667.9h-76.5v43h76.5V667.9z M344,705.2H279v-19.4H344V705.2z M344,679.9H279v-6.2H344V679.9z"/>
<path class="bg0" d="M252.5,667.9H176v43h76.5V667.9z M246.7,705.2h-64.9v-19.4h64.9V705.2z M246.7,679.9h-64.9v-6.2h64.9V679.9z"
/>
<path class="bg0" d="M447,721.3h-76.5v43H447V721.3z M441.2,758.5h-64.9v-19.3h64.9V758.5z M441.2,733.4h-64.9v-6.3h64.9V733.4z"
/>
<path class="bg0" d="M349.8,721.3h-76.5v43h76.5V721.3z M344,758.5H279v-19.3H344V758.5z M344,733.4H279v-6.3H344V733.4z"/>
<path class="bg0" d="M252.5,721.3H176v43h76.5V721.3z M246.7,758.5h-64.9v-19.3h64.9V758.5z M246.7,733.4h-64.9v-6.3h64.9V733.4z"
/>
</g>
</g>
<path class="bg0" d="M955,670.9c-3.5,0-7,0.4-10.4,1.2c-4.1-14.9-13.2-24.7-28.2-27.8c-1.5-7.1-4.2-14-8.2-20.2
c7.7-8.5,12-19.4,12-31.1c0-24.9-19.7-45.2-44.2-46c-4.6-11.8-26.5-16.1-46.4-16.1c-31.9,0-64.2,9.8-64.2,28.5c0,0.5,0,1.1,0,1.6
c-13.7,7-22.4,21.2-22.4,36.8c0,4.7,0.8,9.3,2.3,13.7c-21.2,9-35,27.6-35.4,48.3c-0.6,30.4,27.3,55.7,62.3,56.4
c7.2,0.1,20.7,0.2,41.5,0.2v152c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-152c6.5,0,12.8,0,18.4,0c2.3,20.7,20.7,36.8,43,36.8
h35v48.6c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-48.6H955c23.8,0,43.2-18.5,43.2-41.2C998.3,689.4,978.9,670.9,955,670.9z
M816.7,710.7L816.7,710.7L816.7,710.7c-0.6,0-1.1,0-1.7,0c-21.4,0-35.4-0.1-42.6-0.2c-31.8-0.7-57.2-23.3-56.6-50.5
c0.4-19.1,13.9-36.4,34.4-44l2.9-1.1l-1.2-2.8c-2-4.5-3-9.3-3-14.2c0-13.9,8.2-26.6,20.8-32.3l1.9-0.8l-0.2-2c-0.1-1-0.1-2-0.1-3.1
c0-14,30.3-22.7,58.4-22.7c22.9,0,39.9,5.6,41.3,13.7l0.5,2.5l3-0.1c22,0,39.9,18,39.9,40.2c0,10.9-4.2,21.1-11.9,28.7l-1.7,1.7
l1.4,2c6.4,9.1,9.7,19.7,9.7,30.8c0,30-24.8,54.4-55.3,54.4c-3.1,0-7.7,0-13.2,0C835.7,710.7,826.3,710.7,816.7,710.7z M955,747.5
h-74c-19.1,0-34.8-13.6-37.1-31c5.3,0,9.7,0,12.7,0c33.7,0,61.1-27,61.1-60.2c0-2-0.1-3.9-0.3-5.8c12.5,3.4,19.7,12.4,22.3,25.8
l0.6,3.2l3.1-1c3.8-1.2,7.7-1.8,11.7-1.8c20.6,0,37.4,15.9,37.4,35.4C992.5,731.6,975.7,747.5,955,747.5z"/>
<path class="bg0" d="M1052.2,836.4c-2-9.2-10.5-15.9-20.4-15.9c-2.9,0-5.6,0.6-8.1,1.6c-3.4-6.7-8.9-12.2-15.7-15.9
c-3.1-17.3-18.8-30.1-37.4-30.1c-17.2,0-32.1,11-36.6,26.5c-2.9-0.7-5.8-1-8.8-1c-20.9,0-37.9,16.2-37.9,36.2
c0,19.9,17,36.2,37.9,36.2h64.3c4,0,7.9-0.6,11.6-1.7c2.3,0.8,4.8,1.3,7.4,1.3h33c11.5,0,20.9-9,20.9-20
C1062.4,846.4,1058.5,840,1052.2,836.4z M989.5,868.2h-64.3c-17.7,0-32.1-13.6-32.1-30.4c0-16.7,14.4-30.4,32.1-30.4
c3.4,0,6.8,0.5,10,1.5l3.1,1l0.6-3.2c2.8-14.4,16.1-24.9,31.6-24.9c16.2,0,29.9,11.4,31.9,26.6l0.2,1.6l1.4,0.7
c6.4,3.1,11.5,8.1,14.6,14.2c-3,2.3-5.3,5.4-6.6,8.9c-1.2-0.2-2.4-0.3-3.6-0.3c-11.5,0-20.9,9-20.9,20c0,5.6,2.4,10.7,6.3,14.3
C992.5,868,991,868.2,989.5,868.2z M1041.5,867.7h-33c-8.3,0-15.1-6.4-15.1-14.2c0-7.8,6.8-14.2,15.1-14.2c1.6,0,3.2,0.2,4.7,0.7
l3.1,1l0.6-3.2c1.3-6.7,7.5-11.6,14.8-11.6c7.6,0,14,5.3,15,12.4l0.2,1.6l1.4,0.7c5.1,2.4,8.2,7.3,8.2,12.6
C1056.6,861.4,1049.8,867.7,1041.5,867.7z"/>
<path class="bg0" d="M770.9,814.3h-43.5v-6.7h19.5v-22.8H728c0.2-0.4,0.2-0.7,0.2-1.2v-6h18.7v-22H595.5v22h17.6v6
c0,0.4,0.1,0.8,0.2,1.2h-17.8v22.8h16.8v6.7h-39.2v30.3h12.8v23.9c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-23.9h160.6v23.9
c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-23.9h12.8V814.3z M721.6,807.5v6.7H618.1v-6.7H721.6z M601.3,761.3h139.8v10.4H601.3
V761.3z M618.9,783.6v-6h103.5v6c0,0.4,0.1,0.8,0.2,1.2h-104C618.8,784.4,618.9,784,618.9,783.6z M601.3,790.5h139.8v11.2H601.3
V790.5z M765.1,838.8H578.9v-18.7h186.2V838.8z"/>
<path class="bg0" d="M548.1,803.4h-3.9l4.9-28.4h-46.9l4.9,28.4h-4.1c-1.6,0-2.9,1.3-2.9,2.9v61.4c0,1.6,1.3,2.9,2.9,2.9
c1.6,0,2.9-1.3,2.9-2.9v-18.2h39.4v18.2c0,1.6,1.3,2.9,2.9,2.9c1.6,0,2.9-1.3,2.9-2.9v-61.4C551,804.7,549.7,803.4,548.1,803.4z
M542.2,780.9l-8.4,49.3h-16.2l-4.1-23.8c0,0,0-0.1,0-0.1c0-0.4-0.1-0.8-0.2-1.1l-4.2-24.4H542.2z M505.8,843.8v-34.6h2.2l4.6,26.8
h26l4.6-26.8h2v34.6H505.8z"/>
<path class="bg0" d="M1062.5,437.3H921.7l0.4-3.3c2.1-16.7,17.1-29.1,34.2-27.5c7.2-13.9,21.7-22.8,37.4-22.8
c15.7,0,30.1,8.8,37.4,22.6c15.8,0.1,29.1,12,31.1,27.6L1062.5,437.3z M928.5,431.5h127.3c-2.9-11.2-13.1-19.3-24.9-19.3
c-0.5,0-0.9,0-1.4,0l-2,0.1l-0.8-1.8c-6-12.8-18.9-21-33-21c-14.2,0-27.2,8.4-33.1,21.3l-0.9,2l-2.2-0.3
C944,410.4,931.7,419,928.5,431.5z"/>
<path class="bg0" d="M665.9,393.2h92.7l-0.4-3.3c-1.9-15.7-15.3-27.5-31.1-27.6c-7.2-13.8-21.7-22.6-37.4-22.6
c-15.8,0-30.2,8.9-37.4,22.8c-8.1-0.7-15.7,1.7-21.7,6.1c-7.2-5.5-16.1-8.6-25.4-8.6c-15.8,0-30.2,8.9-37.4,22.8
c-17.1-1.6-32.1,10.8-34.2,27.5l-0.4,3.3h140.8l-0.4-3.3C672.8,403.7,670,397.8,665.9,393.2z M653.6,368.4l2.2,0.3l0.9-2
c5.9-12.9,18.9-21.3,33.1-21.3c14.1,0,27,8.2,33,21l0.8,1.8l2-0.1c0.5,0,0.9,0,1.4,0c11.9,0,22,8.1,24.9,19.3h-92.7
c-4.8-3-10.5-4.8-16.5-4.8c-2-3.8-4.5-7.2-7.4-10.1C640.3,369,646.8,367.3,653.6,368.4z M540,407.7c3.2-12.5,15.5-21.1,29.1-19
l2.2,0.3l0.9-2c5.9-12.9,18.9-21.3,33.1-21.3c7.7,0,15,2.5,21,6.8c6.2,4.1,10.1,10.3,11.9,14.2c5.6,0.8,6.5,0.6,10.8,2.2
c1.9,0.7,6.3,3,8.3,4.2c5.1,3,8.4,8.5,10,14.5H540z"/>
<path class="bg0" d="M959.8,325.6H768.3l0.4-3.3c2.8-22.7,23.4-39.4,46.6-36.9c9.6-19.2,29.4-31.4,50.9-31.4
c21.4,0,41.1,12.2,50.8,31.2c0.1,0,0.2,0,0.4,0c21.3,0,39.4,16,42,37.1L959.8,325.6z M775,319.8h178.1
c-3.6-16.6-18.4-28.8-35.7-28.8c-0.7,0-1.3,0-2,0.1l-1.9,0.1l-0.8-1.8c-8.4-18-26.6-29.6-46.4-29.6c-20,0-38.3,11.8-46.6,30l-0.9,2
l-2.2-0.3c-2-0.3-3.9-0.5-5.9-0.5C793.4,291,778.6,303.2,775,319.8z"/>
<g id="back">
<g>
<rect x="128.4" y="868.1" class="bg0" width="962.6" height="5.8"/>
</g>
</g>
<g>
<path class="bg1" d="M604,15C283.1,15,23,275.1,23,596s260.1,581,581,581s581-260.1,581-581S924.9,15,604,15z M604,1023.6
c-236.1,0-427.6-191.4-427.6-427.6S367.9,168.4,604,168.4c236.1,0,427.6,191.4,427.6,427.6S840.1,1023.6,604,1023.6z"/>
</g>
<g>
<circle class="bg2" cx="604" cy="596" r="505"/>
</g>
</symbol>
<symbol id="car" viewBox="0 0 43 40.2">
<style type="text/css">
.car0{fill:#B3E5FC;}
.car1{fill:#FFC107;}
.car2{fill:#FF8F00;}
.car3{fill:#BF5300;}
.car4{fill:#FFE082;}
.car5{fill:#455A64;}
.car6{fill:#546E7A;}
.car7{fill:#FFECB3;}
</style>
<g>
<g>
<path class="car0" d="M6.8,10.7l-1,1.3c-0.1,0.1-0.2,0.1-0.3,0.1l-1.6-0.6c-0.2-0.1-0.2-0.3-0.1-0.4l1.6-2c0.1-0.1,0.3-0.1,0.4,0
l1,1.4C6.9,10.5,6.9,10.6,6.8,10.7z"/>
<path class="car0" d="M10.2,6.4l-1,1.3C9.2,7.8,9,7.8,8.9,7.8L7.4,7.1C7.2,7.1,7.2,6.9,7.3,6.7l1.6-2c0.1-0.1,0.3-0.1,0.4,0l1,1.4
C10.3,6.2,10.3,6.3,10.2,6.4z"/>
</g>
<g>
<path class="car1" d="M6.8,10.7l-1,1.3c-0.1,0.1-0.2,0.1-0.3,0.1l-1.4-0.5c-0.2-0.1-0.2-0.3-0.1-0.4l1.6-2C5.7,9,5.9,9,6,9.1
l0.9,1.3C6.9,10.5,6.9,10.6,6.8,10.7z"/>
<path class="car1" d="M10.2,6.4l-1,1.3C9.2,7.8,9,7.8,8.9,7.8L7.5,7.2C7.3,7.2,7.3,7,7.4,6.8l1.6-2c0.1-0.1,0.3-0.1,0.4,0l0.9,1.3
C10.3,6.2,10.3,6.3,10.2,6.4z"/>
</g>
<path class="car2" d="M22.7,6.7l-4.9-3.9c-0.3-0.3-0.9-0.2-1.1,0.1l0,0l-1.5-1.1c-1.1-0.8-2.6-0.6-3.4,0.4L2.1,14.5
c-0.8,1-0.7,2.6,0.4,3.4l1.5,1.2l0,0c-0.3,0.3-0.2,0.9,0.1,1.1l4.9,3.9c0.3,0.2,0.7,0.2,1,0l2.7,2.3l0.6,0.4l7.8,6.2
c-0.2,0.3-0.1,0.7,0.2,1l4.9,3.9c0.3,0.2,0.7,0.2,1,0l0,0c1.4,1,3.7,0.5,5-0.6c1.6-1.2,3.1-3.1,3.8-4c0.7-0.9,4-5,4.8-6.9
c0.7-1.6,0.7-4-0.6-5l0,0c0.2-0.3,0.1-0.7-0.2-1l-4.9-3.9c-0.3-0.2-0.7-0.2-1,0l-7.8-6.2l-0.6-0.5l-2.8-2.2C23.1,7.4,23,7,22.7,6.7
z"/>
<path class="car1" d="M28.4,9l-1.9,0.6c-0.2,0.1-0.3,0.2-0.5,0.3l-0.2,0.3L16.4,3c-1.5-1.2-3.8-0.9-5,0.6L3.4,13.8
c-1.2,1.5-1,3.7,0.5,5l9.1,7.5l-0.2,0.3c-0.1,0.2-0.2,0.3-0.2,0.5l-0.2,2c0,0,1.1,0.6,1.2,0.3l0.2-1.9c0-0.1,0-0.2-0.1-0.2
l-0.4-0.2l0.3-0.4l13.4,10.6c1.3,1,3.6,0.4,4.9-0.6c1.5-1.2,3-3,3.7-3.9c0.7-0.9,3.9-4.9,4.7-6.7c0.7-1.5,0.7-3.9-0.6-4.9
L26.3,10.7l0.3-0.4l0.2,0.3c0.1,0.1,0.2,0.1,0.3,0.1L29,10C29.2,9.9,28.4,9,28.4,9z"/>
<path class="car3" d="M14.7,7.3l-7,8.8c-0.4,0.6-1.3,0.7-1.8,0.2l-1.3-1C4.1,14.8,4,14,4.4,13.5l7-8.8c0.4-0.6,1.3-0.7,1.8-0.2
l1.3,1C15,6,15.1,6.8,14.7,7.3z"/>
<path class="car4" d="M37.9,21.7c1.2,1,1.6,2.6,1,4c-0.7,1.7-3.7,5.6-4.4,6.4c-0.6,0.8-2,2.4-3.5,3.5c-1.2,0.9-2.9,0.9-4.1,0L5.6,19
c-1.3-1-1.5-2.8-0.5-4.1l7.8-9.8c1-1.2,2.8-1.4,4.1-0.4L37.9,21.7z"/>
<g>
<g>
<g>
<path class="car5" d="M27.3,18L20.9,26c-0.3,0.4-0.8,0.5-1.3,0.2l-5-2.9c-0.5-0.3-0.7-0.8-0.6-1.3c0.3-1.2,1-3.4,2.8-5.8
c2.1-2.6,4-3.7,5-4.2c0.5-0.2,1-0.1,1.4,0.3l4,4.3C27.6,17.1,27.6,17.6,27.3,18z"/>
</g>
<g>
<path class="car6" d="M22,12.1c-1,0.5-3,1.6-5,4.2l7.2,5.7l3.2-4c0.3-0.4,0.3-0.9-0.1-1.3l-4-4.3C23,12.1,22.4,11.9,22,12.1z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="car5" d="M35.9,25.8l-5.5,6.9c-0.3,0.3-0.4,0.6-0.4,0.7l0.3,1.2c0,0.1,0.2,0,0.5-0.3c0.6-0.7,1.9-2,3.5-4.1
c1.8-2.2,2.8-3.7,3.3-4.5c0.2-0.3,0.3-0.5,0.2-0.5l-1.2,0C36.5,25.2,36.2,25.4,35.9,25.8z"/>
</g>
<g>
<path class="car6" d="M37.6,25.8c-0.5,0.7-1.5,2.2-3.2,4.4l-1.2-1l2.7-3.5c0.3-0.3,0.5-0.6,0.6-0.6l1.2,0
C37.9,25.2,37.8,25.4,37.6,25.8z"/>
</g>
</g>
</g>
<g>
<g>
<path class="car5" d="M23,31.8l0.5-1.4c-1.8-1.6-4.1-3.4-6.5-5.2c-0.2-0.1-0.4-0.1-0.6,0l-0.8,0.5c-0.1,0.1-0.1,0.3,0,0.4L23,31.8
z"/>
<path class="car5" d="M23.6,32.2l3.2,2.5c0.1,0.1,0.2,0.1,0.3,0.1l1,0.1c0.2,0,0.3-0.2,0.2-0.3c-0.7-0.6-2.2-2.1-4.2-3.9
L23.6,32.2z"/>
</g>
<g>
<path class="car6" d="M25.8,12.9l-0.3,0.9c-0.1,0.2,0,0.4,0.2,0.6c2.3,2,4.5,3.7,6.5,5.2l1.3-0.8l-7.3-5.9
C26,12.7,25.8,12.7,25.8,12.9z"/>
<path class="car6" d="M32.7,20c2.2,1.6,3.9,2.7,4.7,3.2c0.1,0.1,0.3-0.1,0.3-0.2l-0.3-0.9c0-0.1-0.1-0.2-0.2-0.3L34,19.2L32.7,20z
"/>
</g>
</g>
<g>
<path class="car0" d="M2.1,14.5c-0.5,0.6-0.6,1.3-0.5,2c0.1-0.1,0.2-0.1,0.3-0.3L4,13.6c0.3-0.4,0.3-1-0.1-1.3l0,0L2.1,14.5z"/>
<path class="car0" d="M13.6,1.3c-0.7,0-1.3,0.3-1.8,0.9L10,4.4l0,0c0.4,0.3,1,0.3,1.3-0.1l2.1-2.6C13.5,1.6,13.6,1.4,13.6,1.3z"/>
</g>
<g>
<polygon class="car1" points="13.6,3.7 20.5,11.4 13.1,4 "/>
<polygon class="car1" points="3.9,15.9 13,20.8 4,15.3 "/>
</g>
<rect x="22.5" y="20.5" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.175 31.9094)" class="car7" width="12" height="10"/>
<g>
<g>
<path class="car2" d="M29.4,32.3l-0.2,0.2c-0.1,0.1-0.2,0.1-0.2,0.1c-3.6-3.6-7-5.4-7.6-5.7c-0.1,0-0.1-0.1,0-0.2l0.2-0.2
c0.1-0.1,0.2-0.1,0.2-0.1c0.7,0.3,4.1,2.2,7.7,5.8C29.5,32.1,29.5,32.2,29.4,32.3z"/>
</g>
<g>
<path class="car2" d="M35.3,24.9l0.2-0.2c0.1-0.1,0.1-0.2,0-0.2c-4.3-2.7-6.8-5.6-7.3-6.2c0-0.1-0.1,0-0.2,0l-0.2,0.2
c-0.1,0.1-0.1,0.2-0.1,0.2c0.5,0.6,3.1,3.5,7.4,6.2C35.2,25,35.3,24.9,35.3,24.9z"/>
</g>
</g>
<g>
<rect x="20.3" y="22.8" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -8.3977 28.4661)" class="car2" width="10" height="0.3"/>
<rect x="21.9" y="24.1" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -8.7932 30.2181)" class="car2" width="10" height="0.3"/>
<rect x="23.5" y="25.4" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.1887 31.9701)" class="car2" width="10" height="0.3"/>
<rect x="25.2" y="26.6" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.5842 33.7222)" class="car2" width="10" height="0.3"/>
<rect x="26.8" y="27.9" transform="matrix(0.6222 -0.7828 0.7828 0.6222 -9.9797 35.4742)" class="st2" width="10" height="0.3"/>
</g>
</g>
</symbol>
<style>
.car-container {
transform-origin: 606px 600px;
animation: rotate-right 6s linear 0s infinite;
}
#keyframes rotate-right {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<use href="#background">
</use>
<g class="car-container">
<use href="#car" width="174" height="174" class="car" transform="translate(210,281) rotate(80)"></use>
</g>
</svg>
I was interested in studying the issue you were having, and found this article.
https://css-tricks.com/svg-animation-on-css-transforms/
Even though it's now fairly clear to me that you're not using SMIL, here was my previous response (which is still good to have on-hand, in case it's needed):
I don't have tons of experience with what you're asking, however, "Can
I use..." is our friend. If you're referring to SMIL:
http://caniuse.com/#search=svg%20animation
According to their notes, this is not planned for Edge and will
eventually be dropped by Chrome. Also, here is an interesting page
that may help you - listing alternative, cross-compatible methods of
animating SVGs.
https://css-tricks.com/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features/
I was using animation on transform css attribute.
edge does not currently support transforms on svg.

Resources