svg fill background image fit to the screen? - css

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>

Related

Set origin and rotation on animateMotion's path

I'd like to apply a rotation on a path animated with SVG's animateMotion tag.
It seems that the rule transform-origin:50%;transform: rotate(240deg); applied on the path that the animateMotion tag follows doesn't alter the animation.
<path id="theMotionPathIdLikeToRotate" d="m 100,100 -3e-6,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="aqua" fill="none" style="transform-origin:50%;transform: rotate(120deg);" stroke-linecap="round" stroke-linejoin="round" />
My aim was to create an animation and repeat it transformed. In this example I wanted to create other moving circles, rotated 120 and 240 degrees around the center of the hexagon.

Only the path definition (d) of the path referenced by an <mpath> element is used. Any transform it might have is ignored.
You would need to apply the transform to the circle and the <mpath> together.
<g style="transform-origin:50%;transform: rotate(240deg);">
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="4.45s" repeatCount="once">
<mpath xlink:href="#theMotionPath3"/>
</animateMotion>
</circle>
</g>"
<!DOCTYPE HTML>
<html>
<body>
<?xml version="1.0"?>
<svg width="400" height="400" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" style="background:aquamarine">
<style>
path {
animation-name:animateDash;
animation-duration:5s;
animation-iteration-count:once;
}
#keyframes animateDash {
from{stroke-dasharray:0,2305}
to {stroke-dasharray:2305,0}
}
</style>
<circle cx="50%" cy="50%" r="1" fill="firebrick" />
<path id="theMotionPath" d="m 100,100 -3e-6,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="antiquewhite" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<path id="theMotionPath2" d="m 100,100 -3e-6,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="aqua" fill="none" style="transform-origin:50%;transform: rotate(120deg);" stroke-linecap="round" stroke-linejoin="round" />
<path id="theMotionPath3" d="m 100,100 -3e-6,-52.916668 45.82718,26.458333 0,52.916665" stroke-width="5px" stroke="azure" fill="none" style="transform-origin:50%;transform: rotate(240deg);" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="4.45s" repeatCount="once">
<mpath xlink:href="#theMotionPath3"/>
</animateMotion>
</circle>
<g style="transform-origin:50%;transform: rotate(120deg);">
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="4.45s" repeatCount="once">
<mpath xlink:href="#theMotionPath3"/>
</animateMotion>
</circle>
</g>"
<g style="transform-origin:50%;transform: rotate(240deg);">
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="4.45s" repeatCount="once">
<mpath xlink:href="#theMotionPath3"/>
</animateMotion>
</circle>
</g>"
<!--- HIDES animateMotion's reset-->
<circle cx="" cy="" r="20" fill="aquamarine" />
<script type="text/javascript">
console.log(theMotionPath.getTotalLength());
</script>
</svg>
</body>
</html>

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>

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.

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

Background color of text in SVG

I want to color the background of svg text similar to background-color in css
I was only able to find documentation on fill, which colors the text itself
Is it even possible?

You could use a filter to generate the background.
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" result="bg" />
<feMerge>
<feMergeNode in="bg"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">solid background</text>
</svg>

No this is not possible, SVG elements do not have background-... presentation attributes.
To simulate this effect you could draw a rectangle behind the text attribute with fill="green" or something similar (filters). Using JavaScript you could do the following:
var ctx = document.getElementById("the-svg"),
textElm = ctx.getElementById("the-text"),
SVGRect = textElm.getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", SVGRect.x);
rect.setAttribute("y", SVGRect.y);
rect.setAttribute("width", SVGRect.width);
rect.setAttribute("height", SVGRect.height);
rect.setAttribute("fill", "yellow");
ctx.insertBefore(rect, textElm);

The solution I have used is:
<svg>
<line x1="100" y1="100" x2="500" y2="100" style="stroke:black; stroke-width: 2"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.6em">Hello World!</text>
<text x="150" y="105" style="fill:black">Hello World!</text>
</svg>
A duplicate text item is being placed, with stroke and stroke-width attributes. The stroke should match the background colour, and the stroke-width should be just big enough to create a "splodge" on which to write the actual text.
A bit of a hack and there are potential issues, but works for me!

Instead of using a <text> tag, the <foreignObject> tag can be used, which allows for XHTML content with CSS.

No, you can not add background color to SVG elements. You can do it programmatically with d3.
var text = d3.select("text");
var bbox = text.node().getBBox();
var padding = 2;
var rect = self.svg.insert("rect", "text")
.attr("x", bbox.x - padding)
.attr("y", bbox.y - padding)
.attr("width", bbox.width + (padding*2))
.attr("height", bbox.height + (padding*2))
.style("fill", "red");

Answer by Robert Longson (#RobertLongson) with modifications:
<svg width="100%" height="100%">
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow"/>
<feComposite in="SourceGraphic" operator="xor"/>
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50"> solid background </text>
<text x="20" y="50" font-size="50">solid background</text>
</svg>
and we have no bluring and no heavy "getBBox" :)
Padding is provided by white spaces in text-element with filter.
It's worked for me

Going further with #dbarton_uk answer, to avoid duplicating text you can use paint-order=stroke style:
<svg>
<line x1="100" y1="100" x2="350" y2="100" style="stroke:grey; stroke-width: 100"/>
<text x="150" y="105" style="stroke:white; stroke-width:0.5em; fill:black; paint-order:stroke; stroke-linejoin:round">Hello World!</text>
</svg>
Note the stroke-linejoin:round which is needed to avoid seeing spikes for the W sharp angle.

You can combine filter with the text.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>SVG colored patterns via mask</title>
</head>
<body>
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter x="0" y="0" width="1" height="1" id="bg-text">
<feFlood flood-color="white"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<!-- something has already existed -->
<rect fill="red" x="150" y="20" width="100" height="50" />
<circle cx="50" cy="50" r="50" fill="blue"/>
<!-- Text render here -->
<text filter="url(#bg-text)" fill="black" x="20" y="50" font-size="30">text with color</text>
<text fill="black" x="20" y="50" font-size="30">text with color</text>
</svg>
</body>
</html>

this is my favorite hack (not sure it should work). It refer an element that is not yet displayed, and it works pretty well
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 620 40" preserveAspectRatio="xMidYMid meet">
<defs>
<filter x="-0.02" y="0" width="1.04" height="1.1" id="removebackground">
<feFlood flood-color="#00ffff"/>
</filter>
</defs>
<!--Draw the text-->
<use xlink:href="#mygroup" filter="url(#removebackground)" />
<g id="mygroup">
<text id="text1" x="9" y="20" style="text-anchor:start;font-size:14px;">custom text with background</text>
<line x1="200" y1="18" x2="200" y2="36" stroke="#000" stroke-width="5"/>
<line x1="120" y1="27" x2="203" y2="27" stroke="#000" stroke-width="5"/>
</g>
</svg>

For those wondering how to apply padding to a text element when it has a background like in the Robert's answer, do the following:
<svg>
<defs>
<filter x="-0.1" y="-0.1" width="1.2" height="1.2" id="solid">
<feFlood flood-color="#171717"/>
<feComposite in="SourceGraphic" operator="xor" />
</filter>
</defs>
<text filter="url(#solid)" x="20" y="50" font-size="50">Hello</text>
</svg>
In the example above, filter's x and y positions can be used as transform: translate(-10%, -10%) would, and width and height values can be read as 120% and 120%. So we made background 20% bigger, and offsetted it -10%, so background is now 10% bigger on each side of the text.

The previous answers relied on doubling up text and lacked sufficient whitespace.
By using atop and I was able to get the results I wanted.
This example also includes arrows, a common use case for SVG text labels:
<svg viewBox="-105 -40 210 234">
<title>Size Guide</title>
<defs>
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="white"></feFlood>
<feComposite in="SourceGraphic" operator="atop"></feComposite>
</filter>
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z"></path>
</marker>
</defs>
<g id="garment">
<path id="right-body" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 0 l30 0 l0 154 l-30 0"></path>
<path id="right-sleeve" d="M30 0 l35 0 l0 120 l-35 0" fill="none" stroke-linejoin="round" stroke="black" stroke-width="1"></path>
<use id="left-body" href="#right-body" transform="scale(-1,1)"></use>
<use id="left-sleeve" href="#right-sleeve" transform="scale(-1,1)"></use>
<path id="collar-right-top" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round" d="M0 -6.5 l11.75 0 l6.5 6.5"></path>
<use id="collar-left-top" href="#collar-right-top" transform="scale(-1,1)"></use>
<path id="collar-left" fill="white" stroke="black" stroke-width="1" stroke-linejoin="round" d="M-11.75 -6.5 l-6.5 6.5 l30 77 l6.5 -6.5 Z"></path>
<path id="front-right" fill="white" stroke="black" stroke-width="1" d="M18.25 0 L30 0 l0 154 l-41.75 0 l0 -77 Z"></path>
<line x1="0" y1="0" x2="0" y2="154" stroke="black" stroke-width="1" stroke-dasharray="1 3"></line>
<use id="collar-right" href="#collar-left" transform="scale(-1,1)"></use>
</g>
<g id="dimension-labels">
<g id="dimension-sleeve-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="85" y1="0" x2="85" y2="120" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="85" y="60" class="dimension" text-anchor="middle" dominant-baseline="middle"> 120 cm</text>
</g>
<g id="dimension-length">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-85" y1="0" x2="-85" y2="154" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="-85" y="77" text-anchor="middle" dominant-baseline="middle" class="dimension"> 154 cm</text>
</g>
<g id="dimension-sleeve-to-sleeve">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-65" y1="-20" x2="65" y2="-20" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="-20" text-anchor="middle" dominant-baseline="middle" class="dimension"> 130 cm </text>
</g>
<g title="Back Width" id="dimension-back-width">
<line marker-start="url(#arrow)" marker-end="url(#arrow)" x1="-30" y1="174" x2="30" y2="174" stroke="black" stroke-width="1"></line>
<text font-size="10" filter="url(#solid)" fill="black" x="0" y="174" text-anchor="middle" dominant-baseline="middle" class="dimension"> 60 cm </text>
</g>
</g>
</svg>

An obvious workaround to the problem of the blur produced by the filter effect is to render the <text> two times: once for the background (with transparent characters) and once for the characters (without a background filter).
For me, this was the only way to make the text readable in Safari.
<svg width="100%" height="100%">
<filter x="0" y="0" width="1" height="1" id="solid">
<feFlood flood-color="yellow" />
</filter>
<g transform="translate(20, 50)" font-size="50">
<text aria-hidden="true" fill="none" filter="url(#solid)">solid background</text>
<text fill="blue">solid background</text>
</g>
</svg>
The aria-hidden="true" attribute is there to prevent screen readers from speaking the text twice, if the user uses a screen reader.

You can add style to your text:
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
text-shadow: rgb(255, 255, 255) -2px -2px 0px, rgb(255, 255, 255) -2px 2px 0px,
rgb(255, 255, 255) 2px -2px 0px, rgb(255, 255, 255) 2px 2px 0px;"
White, in this example.
Does not work in IE :)

Resources