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

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.

Related

How to use svg image with svg tag

Hello I would like to know if it is possible to use my svg image in a svg tag in html
my image.svg cde:
<svg viewBox="0 0 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
<g>
<path style="fill:#FCD3EE;" d="M44,18.394v21.141c0,2.722-2.207,4.929-4.929,4.929L22,44.535l-10,11v-11H4.929
C2.207,44.535,0,42.328,0,39.606l0-21.141c0-2.722,2.207-4.929,4.929-4.929l34.141-0.071C41.793,13.465,44,15.672,44,18.394z" />
<path style="fill:#FFFFFF;" d="M22,24.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h13c0.553,0,1,0.448,1,1S22.553,24.465,22,24.465z" />
<path style="fill:#FFFFFF;" d="M35,30.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,30.465,35,30.465z" />
<path style="fill:#FFFFFF;" d="M35,36.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,36.465,35,36.465z" />
<path style="fill:#8950FC;" d="M53.071,2.535l-34.141-0.07C16.207,2.465,14,4.672,14,7.394v6.122l25.071-0.052
c2.722,0,4.929,2.207,4.929,4.93v18.441l7,7.7v-11h2.071c2.722,0,4.929-2.207,4.929-4.929V7.465
C58,4.742,55.793,2.535,53.071,2.535z" />
</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>
</g>
</svg>
I'm currently using it as an image but I need to apply css to my svg and I don't know how to add it as an svg tag
i use with tag image on reactjs:
<img src={Chat} />
but i want < svg > tag for apply css
There are multiple ways how to do this, the simplest one (without any configuration) is to turn it into a React component:
import React from 'react';
export default () => {
return (
<svg viewBox="0 0 58 58" style={{'enable-background': 'new 0 0 58 58'}}>
<g>
<path style={{fill: '#FCD3EE'}} d="M44,18.394v21.141c0,2.722-2.207,4.929-4.929,4.929L22,44.535l-10,11v-11H4.929
C2.207,44.535,0,42.328,0,39.606l0-21.141c0-2.722,2.207-4.929,4.929-4.929l34.141-0.071C41.793,13.465,44,15.672,44,18.394z"/>
<path style={{fill: '#FFFFFF'}}
d="M22,24.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h13c0.553,0,1,0.448,1,1S22.553,24.465,22,24.465z"/>
<path style={{fill: '#FFFFFF'}}
d="M35,30.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,30.465,35,30.465z"/>
<path style={{fill: '#FFFFFF'}}
d="M35,36.465H9c-0.553,0-1-0.448-1-1s0.447-1,1-1h26c0.553,0,1,0.448,1,1S35.553,36.465,35,36.465z"/>
<path style={{fill: '#8950FC'}} d="M53.071,2.535l-34.141-0.07C16.207,2.465,14,4.672,14,7.394v6.122l25.071-0.052
c2.722,0,4.929,2.207,4.929,4.93v18.441l7,7.7v-11h2.071c2.722,0,4.929-2.207,4.929-4.929V7.465
C58,4.742,55.793,2.535,53.071,2.535z"/>
</g>
</svg>
);
};

svg fill background image fit to the screen?

I am adding SVG fill with a background image. But it is not fit the image properly. It is looking like my screenshot http://take.ms/8cloN
<svg width="897px" height="452px" viewBox="0 0 897 452" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.0.4 (8054) - http://www.bohemiancoding.com/sketch -->
<title>IPAD 2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%" >
<image xlink:href="https://images.unsplash.com/photo-1534002778889-3f1b078de59b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a2e808d0d3560da6d4845fe7e7bfc19d&auto=format&fit=crop&w=750&q=80" x="0" y="0" />
</pattern>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="IPAD" sketch:type="MSLayerGroup" transform="translate(681.000000, 55.000000)" stroke="#7E89A3">
<path d="M202.986,317 L12.097,317 C5.462,317 0.083,311.623 0.083,304.99 L0.083,12.093 C0.083,5.46 5.461,0.083 12.097,0.083 L202.986,0.083 C209.622,0.083 215,5.46 215,12.093 L215,304.99 C215,311.623 209.622,317 202.986,317 Z" id="bezel" stroke-width="2" fill="#FDFDFD" sketch:type="MSShapeGroup"></path>
<path d="M202.986,317 L12.097,317 C5.462,317 0.083,311.623 0.083,304.99 L0.083,12.093 C0.083,5.46 5.461,0.083 12.097,0.083 L202.986,0.083 C209.622,0.083 215,5.46 215,12.093 L215,304.99 C215,311.623 209.622,317 202.986,317 Z" id="bezel-2" stroke-width="2" fill="#FDFDFD" sketch:type="MSShapeGroup"></path>
<rect id="screen" fill="url(#img1)" sketch:type="MSShapeGroup" x="17" y="32" width="181.999" height="252.917"></rect>
<circle id="lock" sketch:type="MSShapeGroup" cx="108.021" cy="300.021" r="8.021"></circle>
<circle id="camera" sketch:type="MSShapeGroup" cx="106.99" cy="16.99" r="2.99"></circle>
</g>
<g id="Laptop" sketch:type="MSLayerGroup" transform="translate(1.000000, 1.000000)" stroke="#8492A5">
<path d="M594,0 L98,0 C84.50415,0 73,11.0738184 73,24.7901127 L73,351.027995 L619,351.027985 L619,24.7901127 C618.999971,11.0728209 607.537479,0 594,0 Z" id="bezel" stroke-width="2" fill="#FEFEFE" sketch:type="MSShapeGroup"></path>
<circle id="webcam" stroke-width="2" sketch:type="MSShapeGroup" cx="347" cy="19" r="4"></circle>
<g id="bottom" transform="translate(0.000000, 351.000000)" sketch:type="MSShapeGroup">
<path d="M640.812,31.01 L51.288,31.01 C20.641,31.01 0,20.494 0,16.022 L0,2.428 C0,1.084 1.335,0 2.995,0 L689.104,0 C690.766,0 692.103,1.084 692.103,2.428 L692.103,16.557 C692.096,20.092 676.112,31.01 640.812,31.01 Z" id="Shape" stroke-width="2" fill="#FDFDFD"></path>
<path d="M0.5,14.5 L690.242676,14.5" id="Line" stroke-linecap="square"></path>
</g>
<rect id="screen" fill="url(#img1)" sketch:type="MSShapeGroup" x="95" y="39" width="501.073853" height="292.009"></rect>
<path d="M421,352 L421,355.087 C421,357.288 416.666719,357.952714 413.386719,357.952714 L278.815286,357.952714 C275.364286,357.952714 271,357.289 271,355.087 L271,352" id="touchpad" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
</g>
<g id="iphone" sketch:type="MSLayerGroup" transform="translate(576.000000, 177.000000)" stroke="#7E89A3">
<path d="M130,257.964 C130,266.797 122.809,273.956 113.938,273.956 L16.063,273.956 C7.192,273.956 0.001,266.797 0.001,257.964 L0.001,16.073 C0.001,7.24 7.192,0.081 16.063,0.081 L113.938,0.081 C122.809,0.081 130,7.24 130,16.073 L130,257.964 L130,257.964 Z" id="bezel" stroke-width="2" fill="#FDFDFD" sketch:type="MSShapeGroup"></path>
<rect id="screen" fill="url(#img1)" sketch:type="MSShapeGroup" x="9" y="36" width="111.93" height="199.084"></rect>
<path d="M77,25.746 C77,26.381 76.561,26.893 76.02,26.893 L55.918,26.893 C55.376,26.893 54.938,26.38 54.938,25.746 L54.938,23.166 C54.938,22.531 55.377,22.019 55.918,22.019 L76.02,22.019 C76.561,22.019 77,22.532 77,23.166 L77,25.746 L77,25.746 Z" id="speaker" sketch:type="MSShapeGroup"></path>
<circle id="camera" sketch:type="MSShapeGroup" cx="66" cy="12" r="3"></circle>
<ellipse id="lock" sketch:type="MSShapeGroup" cx="65.04" cy="254.001" rx="10.04" ry="10.001"></ellipse>
</g>
</g>
</svg>
I want it like my screenshot http://take.ms/ViaOB is it possible?
In your pattern tag, replace patternUnits="userSpaceOnUse" with patternContentUnits="objectBoundingBox". Then add height="1" width="1" preserveAspectRatio="none" to the image tag inside your pattern tag. Like this:
<pattern id="img1" id="pattern1" patternContentUnits="objectBoundingBox" width="100%" height="100%" >
<image height="1" width="1" preserveAspectRatio="none" xlink:href="https://images.unsplash.com/photo-1534002778889-3f1b078de59b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a2e808d0d3560da6d4845fe7e7bfc19d&auto=format&fit=crop&w=750&q=80" x="0" y="0" />
</pattern>

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>

shadow in svg on hover

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>

SVG Transform Scale in Mozilla physically moves svg from origin

Having an issue with an SVG element that I've styled with some CSS transforms.
In Mozilla - when you hover on an icon it physically moves the icon from its original position out to the bottom and to the right. From what I've been able to see, it looks like the transform: scale(1.25) is causing the issue but -moz-transform-origin isn't helping either.
Not sure how to make each icon stay in position on hover but still give a magnifying effect with transform
You can visit the site here www2.picofemto.com
SVG:
<svg height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 853.5 859.6" enable-background="new 0 0 853.5 859.6" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<a class="icon" id="guy-in-mri-or-washing-machine" xlink:href="#">
<path d="M197.3,416.8c36-17.6,50.9-61,33.3-97c-17.6-35.9-61-50.9-97-33.2c-36,17.6-50.9,61-33.3,97 C117.9,419.5,161.4,434.3,197.3,416.8z" class="linked-circle"/>
<g class="icon-group">
<rect x="107.7" y="361.2" fill="#FFFFFF" width="69.2" height="6.5"/>
<path fill="#FFFFFF" d="M162,347.6c0-4.5,3.7-8.2,8.2-8.2c4.5,0,8.2,3.7,8.2,8.2c0,4.5-3.7,8.2-8.2,8.2 C165.6,355.8,162,352.1,162,347.6z"/>
<path fill="#FFFFFF" d="M151.5,339.1H124l-16.3,2.5v14.2l8.2,0c-0.7-1.1-1.1-2.3-1.1-3.6c0-3.8,3.1-6.9,6.9-6.9h15l12.2-2.5 l0.7,3.2l-12.5,2.6h-15.4c-2,0-3.6,1.6-3.6,3.6c0,2,1.6,3.6,3.6,3.6l29.8,0c4.6,0,8.3-3.7,8.3-8.3 C159.8,342.9,156.1,339.1,151.5,339.1z"/>
<path fill="#FFFFFF" d="M165.7,385.1c18.3,0,33.2-14.9,33.2-33.2c0-18.3-14.9-33.2-33.2-33.2c-12,0-22.5,6.4-28.3,15.9h13.9 c3.9-3.3,9-5.3,14.5-5.3c12.5,0,22.6,10.1,22.6,22.6c0,12.5-10.1,22.6-22.6,22.6c-3.5,0-6.9-0.8-9.8-2.3h-16.5 C145.5,380,155,385.1,165.7,385.1z"/>
<g>
<path fill="#FFFFFF" d="M165.7,300.4c-22.7,0-42,14.8-48.7,35.2l6.3-1l10.3,0c6.2-11.4,18.2-19.2,32.1-19.2 c20.2,0,36.5,16.3,36.5,36.5c0,20.2-16.3,36.5-36.5,36.5c-12.7,0-23.8-6.5-30.4-16.2h-16.8c7.9,18.2,26,31,47.1,31 c28.4,0,51.4-23,51.4-51.4C217.1,323.4,194.1,300.4,165.7,300.4z M177.3,312.1c-0.2,0.7-0.8,1.2-1.6,1.2c-0.1,0-0.3,0-0.4-0.1 c-6.3-1.6-12.9-1.6-19.2,0c-0.9,0.2-1.8-0.3-2-1.2c-0.2-0.9,0.3-1.8,1.2-2c6.8-1.7,14-1.7,20.8,0 C177,310.4,177.6,311.2,177.3,312.1z"/>
</g>
</g>
</a>
<a class="icon" id="gattaca" xlink:href="#">
<path class="linked-path" d="M655.1,248.3c29.8-14.6,42.1-50.5,27.5-80.3c-14.6-29.8-50.5-42.1-80.3-27.5c-29.8,14.6-42.1,50.5-27.5,80.3 C589.4,250.6,625.3,262.9,655.1,248.3z"/>
<g class="icon-group">
<path fill="#FFFFFF" d="M620.4,205.7H637c-1.4,2-3.1,3.6-4.6,4.8c-2.6,2-4.8,2.8-4.9,2.9c-0.2,0.1-1.2,0.5-2.7,1.3c0,0,0,0,0,0 c-1.7,0.9-3.9,2.3-6.1,4.4c-4.4,4-8.7,10.4-8.7,20h7.1c0-0.6,0-1.2,0.1-1.8h23.2c0,0.6,0.1,1.2,0.1,1.8h7.1c0-9.6-4.3-16-8.7-20 c-1.7,1.3-3.3,2.3-4.5,2.9l-0.2,0.1c-0.7,0.4-1.3,0.7-1.8,0.9c1.6,1.2,3.2,2.8,4.7,4.9h-16.7c1.4-2.1,3.1-3.7,4.7-4.9 c2.5-1.9,4.7-2.8,4.9-2.9c0.2-0.1,1.2-0.5,2.7-1.3c0,0,0,0,0,0c1.7-0.9,3.9-2.3,6.2-4.4c4.4-4,8.7-10.4,8.7-20 c0-9.6-4.3-16-8.7-20c-2.7,2-5.1,3.3-6.5,3.9c1.6,1.2,3.2,2.8,4.7,4.9h-16.7c1.6-2.4,3.6-4.2,5.4-5.4c0.9-0.6,1.8-1.1,2.4-1.5 l2.4-1.1c1.2-0.5,4-1.9,6.9-4.3c4.8-3.9,10-10.6,10-21.2h-7.1c0,0.7-0.1,1.3-0.1,1.9h-23.1c-0.1-0.6-0.1-1.2-0.1-1.9h-7.1 c0,9.6,4.3,16,8.7,20c2.7-2,5.1-3.3,6.5-3.9c-1.5-1.2-3.2-2.8-4.6-4.8H637c-3.7,5.4-9.1,7.5-9.5,7.7c-0.7,0.3-17.6,6.7-17.6,25.7 c0,9.6,4.3,16,8.7,20c1.4-1.1,2.9-2.1,4.5-2.9c0.8-0.4,1.5-0.8,2-1C623.5,209.4,621.9,207.8,620.4,205.7z M639.9,154.5 c-0.3,1.3-0.7,2.6-1.3,3.7h-19.8c-0.5-1.1-0.9-2.4-1.3-3.7H639.9z M617.6,234.4c0.3-1.3,0.7-2.6,1.2-3.7h19.8 c0.5,1.1,0.9,2.4,1.2,3.7H617.6z M640.3,196.3h-23.1c-0.1-0.6-0.1-1.2-0.1-1.9c0-0.6,0-1.2,0.1-1.8h23.2c0,0.6,0.1,1.2,0.1,1.8 C640.4,195.1,640.3,195.7,640.3,196.3z M638.6,186c0.5,1.1,0.9,2.4,1.2,3.7h-22.3c0.3-1.3,0.7-2.6,1.2-3.7H638.6z M618.8,202.9 c-0.5-1.1-0.9-2.4-1.2-3.7h22.3c-0.3,1.3-0.7,2.6-1.3,3.7H618.8z"/>
</g>
</a>
<a class="icon" id="guy-with-epcot-center-head" xlink:href="#">
<path class="linked-path" d="M753.4,401.2c16.7,34,2.5,75.1-31.5,91.8c-34,16.6-75.1,2.5-91.8-31.5c-16.7-34-2.6-75.1,31.5-91.8 C695.7,353.1,736.8,367.1,753.4,401.2z"/>
<g class="icon-group">
<path fill="#FFFFFF" d="M697,386.4c0.1-0.4,0.2-0.9,0.5-1.2c0.9-1.2,2.7-1.5,4-0.5c0.9,0.7,1.3,1.7,1.2,2.7L697,386.4z"/>
<path fill="#FFFFFF" d="M710.2,391.9c0.4,0.2,0.8,0.4,1.2,0.7c0,1.7,0,3.4,0,5.1c-0.4,0.1-0.7,0.2-0.9,0.4 c-1.5-1.1-2.9-2.2-4.4-3.3c0-0.4,0-0.8-0.2-1.2C707.3,393.1,708.7,392.6,710.2,391.9z"/>
<path fill="#FFFFFF" d="M703.6,392.1c-0.1,0-0.2,0-0.3,0c-0.6-1.2-1.2-2.3-1.8-3.4c0.9,0.2,1.8,0.4,2.7,0.7 c1.6,0.5,3.1,1.1,4.4,1.7c-1.2,0.5-2.5,0.9-3.7,1.4C704.6,392.3,704.1,392.1,703.6,392.1z"/>
<path fill="#FFFFFF" d="M698.8,388.3c0.3,0,0.7,0.1,1,0.1c0.8,1.4,1.6,2.8,2.3,4.2c-0.3,0.2-0.5,0.5-0.6,0.7 c-1.9-0.3-3.8-0.5-5.6-0.7c0-0.4-0.2-0.8-0.4-1.2C696.7,390.6,697.9,389.5,698.8,388.3z"/>
<path fill="#FFFFFF" d="M694.5,390.6c-0.3-0.1-0.6-0.2-1-0.2c-0.4,0-0.7,0.1-1,0.2c-0.9-0.9-1.8-1.7-2.8-2.6 c2.5-0.1,5.1-0.1,7.6,0.1C696.4,389.1,695.5,389.9,694.5,390.6z"/>
<path fill="#FFFFFF" d="M683.2,391.5c-0.7,0-1.2,0.3-1.6,0.6c-1.5-0.6-2.9-1.3-4.3-2c1.6-0.6,3.3-1,5-1.3c0.8-0.1,1.7-0.3,2.6-0.4 C684.4,389.4,683.8,390.4,683.2,391.5z"/>
<path fill="#FFFFFF" d="M674.4,395.6c0.3-1.5,0.5-3.1,0.8-4.6c0.2-0.1,0.3-0.2,0.5-0.2c1.7,0.9,3.5,1.7,5.3,2.5 c-0.1,0.2-0.1,0.4-0.1,0.6c-1.9,0.8-3.8,1.4-5.5,2.4C675.2,396,674.9,395.7,674.4,395.6z"/>
<path fill="#FFFFFF" d="M673.1,395.5c-0.7,0.1-1.3,0.5-1.6,1.1c-1.2-0.2-2.4-0.5-3.7-0.7c1.8-1.6,3.7-3,5.9-4.2 C673.5,393,673.3,394.2,673.1,395.5z"/>
<path fill="#FFFFFF" d="M671.5,399.2c-1.3,1.2-2.5,2.4-3.8,3.6c-0.2,0-0.3,0-0.5,0c0,0-0.1,0-0.1,0c-0.4-1.6-0.8-3.2-1.2-4.8 c0.3-0.3,0.6-0.7,0.9-1c1.5,0.3,3,0.5,4.4,0.9C671.2,398.3,671.3,398.8,671.5,399.2z"/>
<path fill="#FFFFFF" d="M665.8,403.2c-0.5,0.4-0.8,0.9-0.9,1.5c-1.3,0.3-2.6,0.7-3.8,1.1c1-2.4,2.3-4.5,3.8-6.5 C665.1,400.6,665.5,401.9,665.8,403.2z"/>
<path fill="#FFFFFF" d="M665.9,407.4c-0.4,1.8-1.1,3.6-1.8,5.4c-0.1,0-0.2,0-0.4,0c-0.6,0-1,0.2-1.4,0.4c-0.8-1.2-1.7-2.3-2.6-3.5 c0.2-0.8,0.5-1.5,0.7-2.3c1.5-0.5,3-1,4.5-1.3C665,406.6,665.4,407,665.9,407.4z"/>
<path fill="#FFFFFF" d="M661.3,415.6c-1,0.6-2,1.4-2.9,2.1c0.1-1.5,0.2-3,0.5-4.6c0.1-0.6,0.2-1.3,0.4-1.9c0.8,1,1.5,2,2.1,3 C661.2,414.7,661.2,415.1,661.3,415.6z"/>
<path fill="#FFFFFF" d="M658.4,419.4c1.1-0.9,2.2-1.8,3.4-2.6c0.3,0.3,0.6,0.6,1.1,0.7c0.2,1.9,0.4,3.8,0.8,5.7 c-0.6,0.2-1,0.6-1.2,1.1c-1.2-1-2.6-1.8-3.9-2.7C658.4,420.9,658.4,420.2,658.4,419.4z"/>
<path fill="#FFFFFF" d="M660.4,429.8c-0.8-2-1.4-4.2-1.7-6.5c1.2,0.8,2.4,1.6,3.5,2.6c0,0.4,0.2,0.8,0.4,1.1 C661.8,427.9,661.1,428.9,660.4,429.8z"/>
<path fill="#FFFFFF" d="M664.5,428c0.6,1.9,1.6,3.5,2.5,5.3c-0.4,0.3-0.6,0.7-0.8,1.2c-1.5-0.5-3-1.2-4.5-1.9 c-0.2-0.4-0.5-0.9-0.7-1.4c0.8-1.1,1.7-2.2,2.5-3.4C663.8,427.9,664.1,428,664.5,428z"/>
<path fill="#FFFFFF" d="M666.7,437c-0.5,0.8-0.9,1.6-1.3,2.5c-0.9-1.7-1.8-3.4-2.7-5c1.1,0.5,2.2,1,3.4,1.4 C666.2,436.3,666.4,436.7,666.7,437z"/>
<path fill="#FFFFFF" d="M668.5,437.7c0.6,0,1.1-0.2,1.4-0.4c2.2,0.7,4.4,1.2,6.5,2c0,0.1,0,0.2,0,0.4c-1.8,0.4-3.6,1-5.4,1.4 c-1.5,0.3-2.9,0.6-4.4,1c-0.2-0.4-0.3-0.7-0.5-1.1c0.5-1.2,1-2.3,1.7-3.4C668.1,437.7,668.3,437.7,668.5,437.7z"/>
<path fill="#FFFFFF" d="M712.7,402.5c1.1,1.3,2,2.9,2.7,4.4c-0.4,0.4-0.6,0.8-0.7,1.4c-3,0-6-0.2-9-0.4c0-0.3-0.1-0.6-0.2-0.9 c1.5-1.7,3.3-3.2,5.1-4.6c0.3,0.2,0.7,0.3,1.2,0.3C712.1,402.6,712.4,402.6,712.7,402.5z"/>
<path fill="#FFFFFF" d="M704.7,406c-0.2-0.1-0.4-0.2-0.6-0.3c0-2.9-0.1-5.7-0.1-8.6c0.7-0.1,1.3-0.5,1.6-1c1.4,1,2.7,2,4,3 c-0.3,0.7-0.2,1.6,0.1,2.3C707.9,402.8,706.2,404.3,704.7,406z"/>
<path fill="#FFFFFF" d="M701.4,395.7c-1.3,1.1-2.5,2.4-3.7,3.6c-1.2,1.2-2.6,2.1-3.9,3.2c0-2.4,0-4.8,0.3-7.3 c0.8-0.2,1.3-0.7,1.6-1.3c1.9,0.2,3.7,0.5,5.6,0.7C701.2,395,701.3,395.4,701.4,395.7z"/>
<path fill="#FFFFFF" d="M682.5,406c0.2-3.2,0.6-6.3,0.7-9.5c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0c2.4,2.4,4.8,4.8,7.1,7.4 c-0.1,0.2-0.2,0.4-0.2,0.7c-2.5,0.5-4.8,1.6-7.3,2C682.8,406.3,682.6,406.1,682.5,406z"/>
<path fill="#FFFFFF" d="M681.9,396c0,3.1-0.5,6.3-0.7,9.4c-0.1,0-0.2,0-0.3,0c-0.2,0-0.4,0-0.6,0.1c-1.3-2.2-2.8-4.4-4.6-6.2 c0.3-0.5,0.4-1.1,0.3-1.7c1.6-1,3.4-1.7,5.2-2.4C681.3,395.5,681.6,395.8,681.9,396z"/>
<path fill="#FFFFFF" d="M674.5,414.7c-0.2,0-0.4,0-0.6,0.1c-1.5-2.7-3.4-5.1-5-7.7c0.1-0.1,0.2-0.2,0.3-0.3 c3.1,0.2,6.2,0.8,9.4,1.1c0,0.5,0.1,0.9,0.3,1.3c-1.3,1.8-2.4,3.7-3.4,5.6C675.1,414.7,674.8,414.7,674.5,414.7z"/>
<path fill="#FFFFFF" d="M664.2,417.6c0.7-0.2,1.2-0.6,1.5-1.1c2.1,0.5,4.2,0.9,6.4,1.1c0.1,0.4,0.2,0.7,0.4,1 c-1.9,1.9-4.3,3.2-6.3,5.1c-0.3-0.3-0.7-0.5-1.2-0.6C664.6,421.3,664.4,419.4,664.2,417.6z"/>
<path fill="#FFFFFF" d="M673.5,419.4c0.3,0.1,0.6,0.2,0.9,0.2c0.1,2.1,0.3,4.2,0.6,6.3c-0.6,0.3-1,0.8-1.2,1.4 c-2.3-0.5-4.6-0.9-6.9-1.4c0-0.3,0-0.7,0-1C668.8,422.9,671.4,421.5,673.5,419.4z"/>
<path fill="#FFFFFF" d="M666.4,427.2c2.4,0.5,4.8,1,7.2,1.5c0,0.3,0.1,0.5,0.2,0.8c-1.4,1.2-2.9,2.4-4.3,3.6 c-0.3-0.2-0.7-0.3-1.1-0.3c-0.1,0-0.2,0-0.3,0c-0.9-1.7-1.9-3.3-2.4-5.1C666,427.6,666.2,427.4,666.4,427.2z"/>
<path fill="#FFFFFF" d="M709.1,416.4c-0.3,0-0.5,0-0.7,0.1c-1.4-2-2.5-4.2-4-6.2c0.6-0.3,0.9-0.7,1.2-1.2c3.1,0.3,6.1,0.5,9.2,0.4 c0.1,0.2,0.2,0.5,0.3,0.7c-1.8,2-3.4,4.2-4.9,6.4C709.9,416.5,709.5,416.4,709.1,416.4z"/>
<path fill="#FFFFFF" d="M695.7,414.2C695.6,414.2,695.6,414.2,695.7,414.2c-0.5-2.4-1-4.8-1.6-7.2c0.3-0.2,0.5-0.5,0.7-0.8 c2.1,0.7,4.2,1.4,6.3,1.9c0,0.5,0.1,0.9,0.3,1.3c-1.9,1.5-3.5,3.4-5.5,4.8C695.8,414.2,695.7,414.2,695.7,414.2z"/>
<path fill="#FFFFFF" d="M693.7,415.2c-3.4-2.3-7.1-4.2-10.8-6c0.2-0.4,0.3-0.9,0.3-1.4c2.4-0.5,4.6-1.5,7-2c0.3,0.9,1,1.7,2.3,1.7 c0.1,0,0.1,0,0.2,0c0.6,2.4,1.1,4.7,1.5,7.1C694.1,414.8,693.9,415,693.7,415.2z"/>
<path fill="#FFFFFF" d="M706.7,418.9c0,0.5,0.1,1.1,0.4,1.5c-1.4,2-2.6,4.1-4.2,6c-0.1,0-0.2,0-0.2,0c-0.4,0-0.7,0.1-1,0.2 c-1.3-2.8-2.9-5.4-4.3-8.1c0.4-0.4,0.6-1,0.7-1.5C701,417.4,703.9,418.1,706.7,418.9z"/>
<path fill="#FFFFFF" d="M669.4,453.5c-0.2-3.8-1-7.1-2.2-10.1c1.2-0.3,2.4-0.6,3.7-0.8c2.1-0.4,4.1-1.2,6.2-1.6 c0.2,0.2,0.5,0.5,0.8,0.6C675.2,445.6,672.2,449.5,669.4,453.5z"/>
<path fill="#FFFFFF" d="M667.8,465.2c-0.4,1.5-2.5,7.1-6.3,12.2h41.3c0.9-4.4,2.5-16.4,6.7-17.6c5.6-1.6,12.8,0.7,14.2-5.1 c0.5-2-0.7-3.3-0.4-5.6c0.2-1.4,3-2.9,0.6-4.7c1.2-0.7,2-1.6,1.7-2.6c-0.1-0.6-0.3-1.7-0.4-2.3c-0.4-1.4,1.6-2.1,2.5-2.4 c0,0,0,0,0,0c0.3-0.1,0.5-0.2,0.7-0.3c2.4-1.3,1.7-3.2,0.4-5l-5.4-8.4c-0.2-0.6-0.4-1.3-0.4-1.9c-0.2-2,1-2.7,1.2-4.3 c0.2-1.9-0.2-3.7-0.8-5.4c-1.6-0.3-3.2-0.7-4.6-1.4c-0.4,0.5-1,0.8-1.8,0.8c-0.3,0-0.6-0.1-0.9-0.2c-1.9,2-3.4,4.2-5,6.5 c0.9,1.5,0.2,3.9-2,3.9c-0.4,0-0.7-0.1-1-0.2c-1.3,1.9-2.5,3.9-3.9,5.7c1.5,1.3,1,4.5-1.5,4.5c-2.2,0-2.9-2.3-2.1-3.8 c-1.3-2.9-3-5.6-4.4-8.4c-0.2,0-0.4,0.1-0.6,0.1c-1.7,0-2.5-1.4-2.4-2.7c-3.6-2.4-7.4-4.4-11.3-6.3c-0.3,0.2-0.7,0.2-1.1,0.2 c-0.4,0-0.8-0.1-1.1-0.2c-1.3,1.8-2.3,3.6-3.3,5.6c0.7,1.1,0.5,2.9-0.8,3.6c0.1,2.1,0.3,4.3,0.6,6.4c2.6,0.2,2.9,4,0.7,4.8 c0.6,2.1,1.2,4.2,1.9,6.2c0,0,0,0,0.1,0c3.1,0,3.2,4.5,0.4,4.9c-3.1,4.9-6.6,9.4-9.9,14.1c0,1.4-0.2,2.9-0.4,4.5 C668.8,462.1,668.2,463.6,667.8,465.2z M681.4,426.5c-0.4-2.5-0.1-4.7,0.8-6.5c0.5-0.9,1.1-1.7,1.8-2.3c0.8-0.6,1.6-1,2.6-1.2 c0.3,0,0.5-0.1,0.8-0.1c0.9,0,1.8,0.3,2.5,0.8c0.7,0.4,1.3,1,1.8,1.8c0.3,0.4,0.5,0.9,0.8,1.4h-2.1c-0.8-1.2-1.8-2.1-3-2.1 c-0.2,0-0.3,0-0.5,0c-2.6,0.4-4.3,3.4-3.6,7.8c0,0.2,0.1,0.3,0.1,0.5c0.3,1.2,0.8,2.4,1.5,3.5c0.1,0.2,0.2,0.3,0.4,0.5 c0.8,0.9,1.6,1.7,2.4,2.6c0.2,0.2,0.3,0.4,0.4,0.6c0.7,1,1.4,2.5,2.8,2.5c0.1,0,0.2,0,0.3,0c0.3,0,0.6-0.1,0.7-0.2 c0.5-0.2,0.4-0.6,0.1-1.2h1.9c0.1,0.5,0.2,1.1-0.1,1.7c-0.2,0.6-0.7,1-1.3,1.3l0,0c-0.2,0.1-0.7,0.3-1.3,0.3c-0.1,0-0.3,0-0.4,0 c-1,0-1.9-0.4-2.7-1.1c-0.5-0.5-0.9-1.1-1.3-1.6c-0.1-0.2-0.2-0.3-0.3-0.5c-0.1-0.2-0.2-0.3-0.4-0.5c-0.4-0.4-0.8-0.8-1.2-1.3 c-0.4-0.4-0.8-0.8-1.2-1.3l0-0.1l0-0.1c-0.1-0.2-0.3-0.4-0.4-0.6c-0.8-1.3-1.4-2.7-1.7-4.1l0,0l0,0 C681.4,426.9,681.4,426.7,681.4,426.5z"/>
<path fill="#FFFFFF" d="M720.5,403.6c0.5,1.2,1,2.5,1.5,3.9c0.3,0.9,0.6,1.9,1,2.9c-1.2-0.3-2.5-0.6-3.6-1.1c0.1-0.7,0-1.4-0.3-2 C719.6,406.1,720,404.8,720.5,403.6z"/>
<path fill="#FFFFFF" d="M702.3,410.3c0.2,0.1,0.4,0.2,0.6,0.2c1.7,2.1,2.9,4.5,4.4,6.7c-0.1,0.1-0.2,0.2-0.2,0.3 c-3.1-0.8-6.1-1.6-9.2-2c-0.1-0.3-0.3-0.6-0.6-0.8C699,413.4,700.5,411.7,702.3,410.3z"/>
<path fill="#FFFFFF" d="M676.7,438c-2-0.7-4-1.2-6-1.9c0.2-0.7,0.2-1.5-0.2-2.2c1.4-1.2,2.8-2.4,4.2-3.6c0.2,0.1,0.5,0.2,0.8,0.3 c0.6,2.2,1.2,4.3,2,6.5C677.2,437.4,676.9,437.7,676.7,438z"/>
<path fill="#FFFFFF" d="M666,415.2c0-0.7-0.3-1.4-0.8-1.9c0.7-1.8,1.5-3.6,1.9-5.5c0,0,0,0,0,0c0.2,0,0.3,0,0.5,0 c1.7,2.6,3.6,5,5.1,7.7c-0.2,0.2-0.4,0.5-0.5,0.8C670.1,416,668.1,415.6,666,415.2z"/>
<path fill="#FFFFFF" d="M669.6,405.5c0.1-0.7-0.2-1.5-0.7-2c1.2-1.1,2.3-2.2,3.5-3.3c0.3,0.2,0.7,0.3,1.2,0.3 c0.5,0,0.8-0.1,1.2-0.3c1.7,1.8,3.2,3.8,4.4,6c-0.1,0.1-0.3,0.3-0.3,0.5C675.7,406.3,672.6,405.7,669.6,405.5z"/>
<path fill="#FFFFFF" d="M692.8,395.2c-0.3,2.4-0.3,4.8-0.3,7.3c-0.4,0-0.8,0.1-1.1,0.3c-2.1-2.4-4.4-4.6-6.6-6.9 c0.5-0.4,0.8-1,0.9-1.7c1.8-0.3,3.6-0.5,5.5-0.7C691.4,394.4,691.9,395,692.8,395.2z"/>
<path fill="#FFFFFF" d="M702.6,396.9c0,2.9,0.1,5.9,0.1,8.8c-0.7,0.2-1.2,0.6-1.4,1.2c-2.1-0.6-4.2-1.3-6.3-2 c0-0.5-0.1-0.9-0.4-1.3c1.2-1,2.5-1.9,3.7-3c1.4-1.3,2.6-2.7,4-3.9C702.4,396.8,702.5,396.9,702.6,396.9z"/>
<path fill="#FFFFFF" d="M685.5,393c-0.2-0.5-0.5-0.9-1-1.2c0.7-1.2,1.4-2.4,2-3.6c0.4,0,0.8-0.1,1.3-0.1c1.2,1.1,2.4,2.2,3.6,3.3 c-0.2,0.3-0.3,0.5-0.3,0.8C689.2,392.4,687.4,392.7,685.5,393z"/>
<path fill="#FFFFFF" d="M712.6,397.8c0.1-1.4,0-2.8,0-4.3c2.3,1.7,4.2,3.7,5.7,6.1c-1.5-0.3-2.9-0.5-4.4-0.5 C713.7,398.5,713.3,398,712.6,397.8z"/>
<path fill="#FFFFFF" d="M717.1,406.3c-0.2,0-0.3,0-0.5,0c-0.8-1.6-1.8-3.2-2.9-4.6c0.3-0.4,0.4-0.8,0.4-1.3 c1.7,0.1,3.4,0.4,5.1,0.7c0.2,0.3,0.4,0.7,0.5,1c-0.7,1.4-1.2,2.9-1.8,4.3C717.8,406.3,717.4,406.3,717.1,406.3z"/>
<path fill="#FFFFFF" d="M722.9,403.6l-2.6-5.1c0.4-0.2,0.8-0.3,1.3-0.3c1.5,0,2.8,1.3,2.8,2.9C724.4,402.2,723.8,403.1,722.9,403.6 z"/>
<path fill="#FFFFFF" d="M709.2,389.5c0.2-0.4,0.5-0.7,0.9-1c1.3-0.9,3-0.5,3.9,0.9c0.6,0.9,0.6,2.1,0.2,3L709.2,389.5z"/>
<path fill="#FFFFFF" d="M684.3,385.4c0.5-1.4,2.2-2.2,3.7-1.6c1,0.4,1.7,1.3,1.9,2.3l-5.7,0.6C684,386.3,684.1,385.9,684.3,385.4z"/>
<path fill="#FFFFFF" d="M671.7,388.9c0.1-1.5,1.5-2.7,3.1-2.6c1.1,0.1,2,0.8,2.4,1.7l-5.3,2.2C671.7,389.8,671.6,389.4,671.7,388.9 z"/>
<path fill="#FFFFFF" d="M661.9,397.1c-0.5-1.5,0.3-3.1,1.8-3.6c1.1-0.4,2.2-0.1,2.9,0.6l-4,4.1C662.3,397.9,662,397.5,661.9,397.1z "/>
<path fill="#FFFFFF" d="M655.9,410.2c-1.1-1-1.2-2.8-0.1-4c0.8-0.8,1.9-1.1,2.8-0.9l-1.6,5.5C656.7,410.8,656.3,410.5,655.9,410.2z "/>
<path fill="#FFFFFF" d="M653.7,420.3c0.4-1,1.3-1.7,2.3-1.9l0.6,5.7c-0.4,0.1-0.9,0-1.3-0.1C653.9,423.4,653.1,421.8,653.7,420.3z"/>
<path fill="#FFFFFF" d="M658.5,430.3l2.1,5.3c-0.4,0.2-0.8,0.2-1.3,0.2c-1.5-0.1-2.6-1.6-2.5-3.1 C656.9,431.6,657.6,430.7,658.5,430.3z"/>
<path fill="#FFFFFF" d="M664.4,445.2c-1.5,0-2.7-1.4-2.7-3c0-1.1,0.7-2.1,1.6-2.5l2.4,5.2C665.3,445.1,664.9,445.2,664.4,445.2z"/>
</g>
</a>
<path opacity="0.5" fill="#C6C6C6" d="M560.3,347.9c-26,12.8-57.5,2-70.2-24.1c-12.7-26-2-57.5,24.1-70.2 c26-12.7,57.5-1.9,70.2,24.1C597.1,303.7,586.3,335.2,560.3,347.9z"/>
<path opacity="0.5" fill="#C6C6C6" d="M606,76.7c-7.3-14.9-25.2-21.1-40.1-13.8c-14.9,7.3-21.1,25.2-13.8,40.1 c7.3,14.9,25.2,21.1,40.1,13.8C607.2,109.5,613.3,91.6,606,76.7z"/>
<path opacity="0.5" fill="#C6C6C6" d="M483.6,674.7c28.5-14,40.3-48.4,26.4-76.9c-14-28.5-48.4-40.3-76.9-26.4 c-28.5,13.9-40.3,48.4-26.4,76.9C420.6,676.8,455.1,688.7,483.6,674.7z"/>
<path opacity="0.5" fill="#C6C6C6" d="M203.1,653.3c23.6-11.5,33.3-40,21.8-63.6c-11.5-23.5-40-33.3-63.5-21.8 c-23.6,11.5-33.3,40-21.8,63.6C151.1,655.1,179.6,664.8,203.1,653.3z"/>
<path opacity="0.5" fill="#C6C6C6" d="M400.3,831.7c-4.7-9.6-16.3-13.6-25.9-8.9c-9.6,4.7-13.6,16.3-8.9,25.9 c4.7,9.6,16.3,13.6,25.9,8.9C401.1,852.9,405,841.3,400.3,831.7z"/>
<path opacity="0.5" fill="#C6C6C6" d="M594.3,417.4c15.5-7.6,21.9-26.3,14.3-41.8c-7.6-15.5-26.3-21.9-41.8-14.3 c-15.5,7.6-21.9,26.3-14.4,41.8C560,418.6,578.8,425,594.3,417.4z"/>
<path opacity="0.5" fill="#C6C6C6" d="M61,581.9c14.1-6.9,19.9-24,13-38.1c-6.9-14.2-23.9-20-38.1-13c-14.1,6.9-20,24-13.1,38.1 C29.8,583,46.9,588.8,61,581.9z"/>
<path opacity="0.5" fill="#C6C6C6" d="M365.4,96c13-6.4,18.4-22.1,12.1-35.1c-6.4-13-22.1-18.4-35.2-12c-13,6.4-18.4,22.1-12,35.1 C336.7,97,352.4,102.4,365.4,96z"/>
<path opacity="0.5" fill="#C6C6C6" d="M298.5,159.9c11.2-5.4,15.8-19,10.4-30.1c-5.5-11.2-19-15.8-30.1-10.3 c-11.1,5.5-15.8,19-10.3,30.1C273.8,160.7,287.3,165.3,298.5,159.9z"/>
<path opacity="0.5" fill="#C6C6C6" d="M608.8,748.5c5.6-2.7,7.9-9.5,5.2-15.1c-2.8-5.6-9.5-7.9-15.1-5.2c-5.6,2.7-7.9,9.4-5.1,15 C596.5,748.9,603.2,751.2,608.8,748.5z"/>
<path opacity="0.5" fill="#C6C6C6" d="M810.1,608.7c26-12.7,36.8-44.2,24.1-70.2c-12.7-26.1-44.2-36.9-70.2-24.1 c-26.1,12.8-36.9,44.2-24.1,70.2C752.6,610.7,784,621.5,810.1,608.7z"/>
<path opacity="0.5" fill="#C6C6C6" d="M771.4,238.9c16.1-7.9,22.8-27.4,14.9-43.5c-7.9-16.1-27.4-22.8-43.5-14.9 c-16.1,7.9-22.8,27.4-14.9,43.5C735.8,240.1,755.3,246.7,771.4,238.9z"/>
<path id="_x23__2_37_" opacity="0.5" fill="#737373" d="M357.9,465.8c-19.4-39.7-3-87.6,36.7-107c39.7-19.4,87.6-3,107,36.7 c19.4,39.7,3,87.6-36.7,107C425.2,521.9,377.3,505.5,357.9,465.8z M297.4,478.7c26.1-12.7,36.9-44.2,24.1-70.2 c-12.7-26.1-44.2-36.8-70.2-24.1c-26,12.7-36.8,44.2-24.1,70.2C239.9,480.7,271.3,491.4,297.4,478.7z M346.9,307 c29.8-14.6,42.1-50.6,27.5-80.3c-14.6-29.8-50.5-42.1-80.3-27.5c-29.8,14.6-42.1,50.5-27.5,80.3C281.2,309.2,317.2,321.5,346.9,307z M532.6,168.7c-9.1-18.6-31.6-26.3-50.2-17.2c-18.6,9.1-26.3,31.6-17.2,50.2c9.1,18.6,31.6,26.4,50.2,17.2 C534,209.8,541.7,187.3,532.6,168.7z M102.8,476.1c16.1-7.9,22.8-27.3,14.9-43.5c-7.9-16.1-27.3-22.8-43.5-14.9 c-16.1,7.9-22.8,27.4-14.9,43.5C67.2,477.3,86.7,484,102.8,476.1z M82.1,294.6c16.2-7.9,22.8-27.4,14.9-43.6 c-7.9-16.2-27.4-22.9-43.6-14.9c-16.1,7.9-22.8,27.4-14.9,43.6C46.4,295.9,65.9,302.5,82.1,294.6z M721.1,744.6 c14.9-7.3,21.1-25.3,13.8-40.1c-7.3-14.9-25.2-21-40.1-13.7c-14.9,7.3-21,25.2-13.7,40.1C688.3,745.7,706.3,751.8,721.1,744.6z M377,780.8c25.4-12.5,36-43.1,23.5-68.6c-12.4-25.4-43.1-35.9-68.5-23.5c-25.4,12.4-36,43.1-23.5,68.5 C320.9,782.7,351.6,793.2,377,780.8z M772.1,276.2c-24.8,12.2-35.1,42.1-23,67c12.2,24.8,42.2,35.1,67,23c24.9-12.2,35.1-42.2,23-67 C826.9,274.3,796.9,264,772.1,276.2z M199.2,121.6c10.5-5.1,14.8-17.7,9.7-28.2c-5.1-10.5-17.8-14.8-28.2-9.6 c-10.4,5.1-14.8,17.7-9.7,28.2C176.1,122.3,188.7,126.6,199.2,121.6z M233.2,273.5c10.5-5.2,14.9-17.9,9.7-28.4 c-5.1-10.5-17.9-14.9-28.4-9.7c-10.6,5.2-14.9,17.9-9.8,28.4C209.9,274.3,222.6,278.7,233.2,273.5z M291.3,662.4 c11.1-5.4,15.7-18.8,10.2-29.8c-5.4-11.1-18.8-15.7-29.9-10.3c-11.1,5.4-15.7,18.8-10.3,29.9C266.8,663.3,280.2,667.8,291.3,662.4z"/>
<path id="_x23__3_37_" opacity="0.5" fill="#2D2D2D" d="M8.4,405.8c-4.9-9.9-0.7-21.9,9.2-26.8c9.9-4.9,21.9-0.7,26.8,9.2 c4.9,9.9,0.7,21.9-9.2,26.8C25.2,419.8,13.2,415.7,8.4,405.8z M649.4,697.6c31.6-15.5,44.7-53.7,29.2-85.3 c-15.5-31.6-53.6-44.7-85.3-29.3c-31.6,15.5-44.7,53.7-29.2,85.3C579.6,699.9,617.8,713,649.4,697.6z M626.7,540.3 c-4.3-8.7-14.7-12.3-23.4-8.1c-8.7,4.3-12.3,14.7-8,23.4c4.3,8.7,14.7,12.2,23.4,8C627.4,559.4,631,548.9,626.7,540.3z M309.2,793.1 c-4.2-8.7-14.8-12.3-23.4-8c-8.7,4.2-12.3,14.7-8,23.4c4.2,8.7,14.7,12.3,23.4,8C309.8,812.2,313.4,801.7,309.2,793.1z M498.4,107.2 c-4.2-8.6-14.7-12.3-23.4-8c-8.6,4.2-12.2,14.8-8,23.4c4.2,8.7,14.7,12.3,23.4,8C499.1,126.3,502.7,115.9,498.4,107.2z M679.9,338.8 c18-8.8,25.4-30.5,16.6-48.5c-8.8-18-30.5-25.4-48.5-16.7c-18,8.8-25.4,30.5-16.6,48.5C640.2,340.2,661.9,347.7,679.9,338.8z M192,219.8c23-11.2,32.4-39,21.2-61.9c-11.2-22.9-38.9-32.4-61.8-21.2c-23,11.2-32.5,38.9-21.2,61.9 C141.4,221.5,169.1,231,192,219.8z M729.2,277.5c6.9-3.4,9.7-11.6,6.3-18.5c-3.4-6.8-11.6-9.7-18.5-6.3c-6.8,3.4-9.7,11.6-6.3,18.5 C714.1,278,722.4,280.8,729.2,277.5z"/>
<path opacity="0.5" fill="#5E5E5E" d="M515.7,515.3c-11.2-22.9-1.8-50.7,21.2-61.9c22.9-11.2,50.7-1.7,61.9,21.3 c11.2,22.9,1.7,50.6-21.2,61.9C554.6,547.7,526.9,538.2,515.7,515.3z"/>
<path opacity="0.5" fill="#5E5E5E" d="M323.1,592.9c22.9-11.2,32.4-38.9,21.2-61.9c-11.2-23-38.9-32.5-61.9-21.2 c-22.9,11.2-32.5,38.9-21.2,61.9C272.4,594.6,300.1,604.1,323.1,592.9z"/>
<path opacity="0.5" fill="#5E5E5E" d="M550.9,840.4c16.2-7.9,22.8-27.3,14.9-43.5c-7.9-16.1-27.3-22.8-43.5-14.9 c-16.1,7.9-22.8,27.3-14.9,43.5C515.3,841.6,534.8,848.3,550.9,840.4z"/>
<path opacity="0.5" fill="#5E5E5E" d="M158.2,555.4c21.1-10.3,29.8-35.7,19.5-56.8c-10.3-21.1-35.8-29.8-56.9-19.5 c-21.1,10.3-29.8,35.8-19.5,56.9C111.6,557,137.1,565.7,158.2,555.4z"/>
<path opacity="0.5" fill="#5E5E5E" d="M111.3,668.9c16.9-8.2,23.9-28.6,15.6-45.5c-8.2-16.9-28.6-23.8-45.5-15.6 c-16.9,8.3-23.9,28.6-15.6,45.5C74,670.1,94.4,677.1,111.3,668.9z"/>
<path opacity="0.5" fill="#5E5E5E" d="M544.4,753.1c20.5-10,28.9-34.7,18.9-55.2c-10-20.5-34.7-28.9-55.2-18.9 c-20.4,10-28.9,34.7-18.9,55.2C499.2,754.7,524,763.1,544.4,753.1z"/>
<path opacity="0.5" fill="#5E5E5E" d="M418.9,195.1c22.9-11.2,32.4-38.9,21.2-61.9c-11.2-22.9-38.9-32.4-61.9-21.2 c-22.9,11.2-32.4,38.9-21.2,61.9C368.3,196.8,396,206.4,418.9,195.1z"/>
<path opacity="0.5" fill="#5E5E5E" d="M484.7,78.2c19.2-9.4,27.1-32.6,17.7-51.8c-9.4-19.2-32.6-27.1-51.8-17.8 c-19.2,9.4-27.1,32.6-17.7,51.8C442.4,79.6,465.6,87.6,484.7,78.2z"/>
<path id="_x23__5_37_" opacity="0.5" fill="#AFAFAF" d="M418.7,288.5c-6.7-13.6-1-30.1,12.6-36.8c13.7-6.7,30.1-1,36.8,12.6 c6.7,13.6,1,30.1-12.6,36.8C441.8,307.8,425.3,302.2,418.7,288.5z M669.4,135.2c6.7,13.7,23.1,19.3,36.8,12.6 c13.7-6.7,19.3-23.1,12.6-36.8c-6.7-13.6-23.2-19.3-36.8-12.6C668.3,105.1,662.7,121.6,669.4,135.2z M280.9,58.1 c-7.3-14.9-25.2-21-40.1-13.8c-14.9,7.3-21.1,25.2-13.7,40.1c7.3,14.9,25.2,21.1,40.1,13.8C282,91,288.2,73,280.9,58.1z M694.1,569.9c16.2-7.9,22.8-27.3,14.9-43.5c-7.9-16.1-27.3-22.8-43.5-14.9c-16.1,7.9-22.8,27.4-14.9,43.5 C658.5,571.2,678,577.8,694.1,569.9z M252.9,785.3c32.8-16.1,46.4-55.7,30.4-88.6c-16.1-32.9-55.8-46.5-88.6-30.4 c-32.9,16.1-46.5,55.8-30.4,88.7C180.3,787.8,220,801.4,252.9,785.3z M235.2,533.4c10-4.9,14.1-16.9,9.2-26.9 c-4.9-10-16.9-14.1-26.8-9.2c-10,4.9-14.1,16.9-9.2,26.8C213.2,534.2,225.2,538.3,235.2,533.4z M462.4,790.4 c10.5-5.1,14.9-17.9,9.8-28.4c-5.1-10.6-17.9-14.9-28.4-9.8c-10.5,5.1-14.9,17.9-9.7,28.5C439.2,791.2,451.9,795.6,462.4,790.4z M365.8,658.2c14.2-7,20.2-24.2,13.2-38.5c-7-14.3-24.2-20.2-38.5-13.2c-14.3,7-20.2,24.2-13.2,38.5 C334.2,659.3,351.5,665.2,365.8,658.2z M263.8,205.6c5.6-2.7,7.9-9.5,5.2-15.1c-2.7-5.6-9.5-7.9-15.1-5.1c-5.6,2.7-7.9,9.5-5.2,15.1 C251.5,206,258.2,208.4,263.8,205.6z M342.7,366.8c12.1-5.9,17.1-20.6,11.2-32.7c-5.9-12.1-20.6-17.2-32.7-11.2S304,343.5,310,355.6 C315.9,367.8,330.6,372.8,342.7,366.8z M645.2,802.7c12.1-5.9,17.2-20.6,11.2-32.7c-5.9-12.2-20.6-17.1-32.7-11.2 c-12.1,5.9-17.1,20.6-11.2,32.7C618.5,803.7,633.1,808.7,645.2,802.7z M391.9,563.5c11.3-5.5,15.9-19.1,10.4-30.3 c-5.5-11.2-19.1-15.9-30.4-10.4c-11.2,5.5-15.9,19.1-10.4,30.4C367.1,564.3,380.7,569,391.9,563.5z"/>
<path opacity="0.5" fill="#737373" d="M825.2,459.7c16.1-7.9,22.8-27.3,14.9-43.5c-7.9-16.1-27.3-22.8-43.5-14.9 c-16.1,7.9-22.8,27.4-14.9,43.5C789.6,461,809.1,467.6,825.2,459.7z"/>
</svg>
CSS:
.svg-container {
display: block;
height: 900px;
margin: auto;
svg {width: 100%;}
.icon,
path { #include vendor-prefix(transition, all 300ms ease);}
.icon {
#include vendor-prefix(transition, all 300ms ease);
#include vendor-prefix(transform-origin, center center);
#include vendor-prefix(transform, scale(1));
position:relative;
z-index:10;
> path {
fill: #5e5e5e;
stroke-width:5px;
stroke: #5e5e5e;
}
&:hover {
#include vendor-prefix(transform, scale(1.25));}
&:hover ~ path {opacity: 0.2 !important;}
&:hover > path {
fill: $pico-orange !important;
opacity: 1 !important;
stroke: darken($pico-orange, 10%) ;
}
&:hover > g,
&:hover > g > path { pointer-events:none; } //otherwise hovers get interfered with
&:hover > g > path { fill: #fff !important; }
}
Not sure if you want to abandon css, but in the svg itself, the effect is achieved by wrapping the link in three groups, translating to the origin, applying the scale then returning to position, with the following
`<a class="icon" id="guy-in-mri-or-washing-machine" xlink:href="#">
<g transform="translate(170,360)">
<g transform="scale(1.25)">
<g transform="translate(-170,-360)">
<path d="M197.3` etc
You still need to add the hover of course, but at least it works in all browsers

Resources