I want to navigate through an SVG Image and focus the current path. The paths in the SVG Image represent one part of the BodyImage.
In my app I want to realise, that the user can select with keyboard interaktion one part of the body and submit the value of this body part.
import Footer from '../components/Footer'
export default {
name: "Localisation.vue",
components: {
Footer
}
}
.localisation{
display: grid;
height: 100vh;
width: 70%;
grid-template-rows: 70% 30%;
}
.bodyMap{
display: grid;
}
#Layer_1{
height: 400px;
width: 500px;
}
#Kopf{
}
.Kopf:focus{
fill: gray;
}
.rechtesOhr:focus{
fill: yellow;
}
.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st1{display:none;fill:#FFFFFF;}
<div class="localisation">
<div class="localisationLayout">
<div class="bodyMap">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 322 981" xml:space="preserve">
<path id="Kopf" class="Kopf" d="M162.7,13.5c-4.3,0-7.5,0.6-9.5,1c-11.1,2.2-27.7,9.4-31.5,22.1c-0.6,2.2-0.9,4.5-1.2,7.5
c-0.5,4.4-0.4,7.4-0.2,15.2c0.2,9.6,0.1,7.6,0.2,11.6c0.7,21.7,1,32.5,3.4,37.7c4.5,9.7,12.5,15.8,17.9,19.9
c3.6,2.8,6.4,4.8,10.6,6.3c10.8,3.8,21.1,0.1,24.8-1.4c12.7-5.4,19.8-17.1,22.1-26.4c0.6-2.4,0.8-6.5,1.2-14.8
c0.2-5,0.2-7.4,0.5-23.8c0.1-3.5,0.1-5.3,0.1-6.1c0.6-22.2,2.2-22.4,1.2-26.6C199,22.3,178.6,13.6,162.7,13.5z"></path>
<path v-focus data-right='AUTOFOCUS'
data-left='AUTOFOCUS' id="rechtes_x5F_Ohr" class="rechtesOhr" d="M202.1,69.1c-0.3,0.2-0.8,0.7-1.2,4.7c-0.3,3.6-0.2,6.5-0.1,7.3c0.1,1.9,0.3,4.3,0.3,6.3
c0,0.1,0,0.6,0,1.3c0,0.6,0.1,1.4,0.2,2.6c0.2,1.9,0.3,2.3,0.6,2.4c0.7,0.4,2.4-0.6,3.2-2c1.4-2.3-0.5-4,0.6-7.1
c0.8-2.2,1.8-1.8,2.6-4.3c0.5-1.5,0.5-2.9,0.4-5.7c0-1.9-0.1-2.8-0.4-3.4C207.2,69,203.7,67.9,202.1,69.1z"></path>
<path v-focus data-right='AUTOFOCUS'
data-left='AUTOFOCUS' id="linkes_x5F_Ohr" class="st0" d="M120.2,69.1c0.9,0.7,0.9,2.1,0.8,5c-0.1,3.9-0.7,3.6-0.6,6.2c0.1,2.3,0.8,4.7,0.8,7.1
c0,1,0,1.9-0.2,3.9c-0.2,1.9-0.3,2.3-0.6,2.4c-0.7,0.4-2.4-0.6-3.2-2c-1.4-2.3,0.5-4-0.6-7.1c-0.8-2.2-1.8-1.8-2.6-4.3
c-0.5-1.5-0.5-2.9-0.4-5.7c0-1.9,0.1-2.8,0.4-3.4C115.1,69,118.7,67.9,120.2,69.1z"></path>
<path v-focus data-right='AUTOFOCUS'
data-left='AUTOFOCUS' id="Hals" class="st0" d="M125.9,112.3c0.7-0.2,1.6,2.6,5.3,6.9c1.9,2.2,3.5,3.5,6,5.6c5.3,4.4,7.9,6.6,11.5,8.3
c6.4,3.1,12.2,3.3,14.2,3.3c7,0.1,12.1-2.1,14.3-3.1c1.8-0.8,5.5-2.4,9.2-5.7c6.2-5.5,7.2-10.8,8.6-10.4c2.1,0.5,1.1,12-0.5,20.5
c-1.3,6.8-3,12-4.3,16c-0.8,2.5-2.6,6.9-6.1,15.6c-4.9,12.1-5.9,14.3-8.5,17c-1.7,1.7-4.6,4.7-9.5,5.9c-1.2,0.3-5.8,1.3-10.8-0.6
c-5.5-2.1-8.5-6.6-10.3-9.7c-11.3-19.5-16.4-42.2-16.9-44.5C125.4,123.6,124.5,112.6,125.9,112.3z"></path>
<path id="pp" class="st1" d="M140.4,192.5c1.4-1.3,2.7-2.6,4.1-3.9"></path>
<path class="st0" d="M147.4,186.5c2.2,2.4,4.3,3.5,5.7,4.1s2.7,0.9,4.5,1.3c1.8,0.4,3.3,0.7,4.4,0.9c-9-0.3-18.1-0.6-27.1-0.9
l-13.6-4.2l-12.6-3.8l-11-3.5c-15.3-3.1-18.9-5.7-18.9-7.5c0-1.9,3.8-2.4,13.2-6.9c13.2-6.3,12.6-8.7,20.3-11c1.3-0.4,3.8-1,6.8-2.5
c1.4-0.7,3.1-1.6,4-2.2c4.4-3.2,5-10.1,5.1-12.8c1.9,8.3,4.7,17.8,8.9,28.1C140.4,173.5,143.9,180.5,147.4,186.5z"></path>
<path class="st0" d="M176,187.9c-4.7,1.7-9.3,3.3-14,5c8.7-0.3,17.5-0.6,26.2-0.9l13.6-4.2l12.6-3.8l11-3.5
c19.8-2.3,24.1-4.4,24.1-5.9c0-1.7-5.8-2.3-18.4-8.5c-4.4-2.2-6.5-3.3-8.6-4.6c-5-3.1-6.3-4.8-11.7-6.4c-1.3-0.4-3.8-1-6.8-2.5
c-0.7-0.3-2.4-1.1-4-2.2c-1.6-1.1-4.3-3.4-6.5-7.5C187.7,157.8,181.8,172.9,176,187.9z"></path>
</g>
<path class="st0" d="M161,203.6l0.1,71.1c0,3.9-3.1,7-6.9,7c-3.4,0-7.3,0-11.6-0.2c-11.4-0.6-12.3-1.9-19.5-1.6
c-9.5,0.3-10.6,2.6-23.3,3.9c-8.9,0.9-13.4,1.2-17-0.8c-1.4-0.8-3.4-2.3-10.8-18.1c-6.2-13.4-6.3-15.4-5.9-17.2
c1-4.6,4-6.3,5.3-13.2c0.3-1.5,0.4-2.8,0.5-3.9c0,0,0.1-1.8-0.1-3.6c-0.6-6.9-8.5-50.3-2.4-52.6c0.6-0.2,0.8,0.2,3,0
c3.8-0.3,4.4-1.6,6.4-1.5c2.7,0.2,3.1,2.5,7,4.5c2.2,1.1,4.2,1.4,5.5,1.6c8.2,2.4,16.4,4.7,24.6,7.1c5.9,2.2,11.8,4.3,17.6,6.5
c2.1,0.1,4.3,0.1,6.7,0c2.3-0.1,4.4-0.3,6.4-0.6c1.8,0.3,3.7,0.6,5.5,0.9c1.4,0.6,3.2,1.2,4.9,0.6c1.3-0.4,1.7-1.1,2.6-1
c2,0.3,3.3,4,2.8,4.3c-0.2,0.2-0.8-0.6-1.3-0.4C160.5,196.5,160.3,198.4,161,203.6z"></path>
<path class="st0" d="M161.1,203.6l-0.1,71.1c0,3.9,3.1,7,6.9,7c3.4,0,7.3,0,11.6-0.2c11.4-0.6,12.3-1.9,19.5-1.6
c9.5,0.3,10.6,2.6,23.3,3.9c8.9,0.9,13.4,1.2,17-0.8c1.4-0.8,3.4-2.3,10.8-18.1c6.2-13.4,6.3-15.4,5.9-17.2c-1-4.6-4-6.3-5.3-13.2
c-0.3-1.5-0.4-2.8-0.5-3.9c0,0-0.1-1.8,0.1-3.6c0.7-7.5,11-47.3,2.6-52.6c-1-0.6-1.5-0.3-16.9,3.4c-4.6,1.1-8.4,2-10.6,2.6
c-5.3,1.6-10.5,3.3-15.8,4.9c-5.2,1.6-10.4,3.2-15.6,4.8c-3.2,0.8-6.9,1.6-11.1,2c-2.7,0.3-5.2,0.3-7.5,0.3c-3.1,0-6.1,0-9.2-0.1
c-2.7-0.6-3.8,0.2-4.2,0.5c-0.8,0.8-0.8,1.8-0.9,7C161.1,200.6,161.1,201.9,161.1,203.6z"></path>
<path class="st0" d="M69.4,174.4c-3.2,0.1-8,0.6-13.4,2.6c-3.2,1.2-8.4,3.3-13,8.1c-3.8,4-5.3,7.9-7.1,13c-0.7,1.8-2.2,6.2-4.3,21.3
c-1.6,11.5-2.3,17.3-1.4,21.3c1.4,6.2,3.7,7.6,4.3,13.8c0.5,5.7-0.9,9.8-2.2,14.2c0,0-5.3,17.5-6.9,35.9c-0.5,6-1.7,19.5,2.4,20.9
c1.9,0.6,3.2-1.7,6.3-3.2c11.6-5.9,25.9,10.4,32.9,5.9c4-2.6,0.3-8.9,2.8-26.2c2.1-14.3,5.2-14.5,4.5-22.1
C73,267,63.7,264.3,62.7,252.7c-0.4-4.9,7.7-9.7,7.5-21.1"></path>
<path class="st0" d="M252.9,174.4c3.2,0.1,8,0.6,13.4,2.6c3.2,1.2,8.4,3.3,13,8.1c3.8,4,5.3,7.9,7.1,13c0.7,1.8,2.2,6.2,4.3,21.3
c1.6,11.5,2.3,17.3,1.4,21.3c-1.4,6.2-3.7,7.6-4.3,13.8c-0.5,5.7,0.9,9.8,2.2,14.2c0,0,5.3,17.5,6.9,35.9c0.5,6,1.7,19.5-2.4,20.9
c-1.9,0.6-3.2-1.7-6.3-3.2c-11.6-5.9-25.9,10.4-32.9,5.9c-4-2.6-0.3-8.9-2.8-26.2c-2.1-14.3-5.2-14.5-4.5-22.1
c1.3-12.9,10.6-15.6,11.6-27.2c0.4-4.9-7.7-9.7-7.5-21.1"></path>
<path class="st0" d="M27.8,325.5c-2.3,2.3-1.3,6.1-1,10.2c0.8,12.4-5.5,24.1-5.5,24.1c-1.9,15.3-3.1,24.9-3,39.2
c0.1,13.1,1.1,11.7,1.6,31.7c0.4,15,0.5,22.6-0.4,29c-2,13.4-5.4,17.7-2.4,21.5c5,6.5,22.2,4.3,25.4-2.4c1-2.2-0.1-3.6,0-9.1
c0.1-4.2,0.9-7.5,2.6-13.4c3.4-11.4,7.2-21,7.9-22.9c5.9-15.2,8.8-22.7,9.5-25.6c2.4-9.4,2.6-16.4,3-27c0.2-4.9,0.9-22.7-2.4-23.3
c-1.4-0.2-2.7,2.5-3.2,2.2c8.6-24.4,8.8-30.7,7.1-31.5c-1-0.5-2.5,0.8-6.2,0.2c-0.6-0.1-1.9-0.3-4.7-1.5c-4.2-1.8-4.6-2.6-7.6-3.9
c-2.7-1.2-5.3-2.3-8.6-2c-1.9,0.1-3.7,0.8-7.4,2.3C29.8,324.3,28.5,324.8,27.8,325.5z"></path>
<path class="st0" d="M294.5,325.5c2.9,3,2.3,7.9,2.1,10.2c-0.4,5.2,0.3,13.1,5.5,24.1c1.9,15.3,3.1,24.9,3,39.2
c-0.1,13.1-1.1,11.7-1.6,31.7c-0.4,15-0.5,22.6,0.4,29c2,13.4,5.4,17.7,2.4,21.5c-5,6.5-22.2,4.3-25.4-2.4c-1-2.2,0.1-3.6,0-9.1
c-0.1-4.2-0.9-7.5-2.6-13.4c-3.4-11.4-7.2-21-7.9-22.9c-5.9-15.2-8.8-22.7-9.5-25.6c-2.4-9.4-2.6-16.4-3-27
c-0.2-4.9-0.9-22.7,2.4-23.3c1.4-0.2,2.7,2.5,3.2,2.2c-9.2-24.2-9.8-30.7-8.2-31.5c0.8-0.4,2.2,0.8,5.2,0.5c1.7-0.2,2.5-0.6,5.8-2.2
c4.5-2.1,6.7-3.2,9-4c2.6-0.9,4.1-1.4,6.3-1.5c2.7-0.1,4.8,0.6,6.6,1.3C290.8,323.2,293,323.9,294.5,325.5z"></path>
<path class="st0" d="M17.1,481.2c-0.4,0.2-1.2,1-0.3,11c0.3,2.8,0.5,4.6,0.6,5.9c0.7,6.2,1,10,0.8,14.4c-0.5,8.8-3,11.9-0.6,16.2
c1,1.9,1.7,1.6,3.2,4.3c2.2,3.6,1.6,5.1,3.2,9.9c1.3,3.5,2.7,7.4,6.3,10.1c1.8,1.3,2.6,1.1,5.3,2.4c3.1,1.5,8.8,6.8,9.1,7.1
c7.3,7.8,11.4,11.6,15,11c4.2-0.7,7.4-7.4,7.1-13s-4.2-9.5-7.9-13.2c-5.8-5.8-8.3-4.9-13.4-10.8c-2.8-3.2-6.2-7.3-5.5-12.2
c0.5-3.4,3.1-7.1,5.3-6.9c1.7,0.1,2.3,2.6,7.3,12.4c2.1,4.1,3.5,6.6,6.5,8.3c0.8,0.5,3.7,2.2,5.5,1c1.8-1.2,1.1-4.7,0.8-6.7
c-0.3-1.6-1.1-4.9-3.8-8c-1.6-1.8-2-1.4-2.6-2.6c-1.4-2.6,0.1-4.7,0-9c0-1.7-0.4-3.1-1.1-5.9c-1.1-4.3-2.7-7.9-5.5-13.4
c-4.2-8.2-7.9-15.3-9.9-14.7c-0.7,0.2-0.6,1-2,2.4c-0.3,0.3-1.3,1.3-4.1,2.3c-3.7,1.4-6.9,1.6-8.3,1.6c-2.5,0-4.2,0-6.2-0.8
C18.8,483,18.1,480.8,17.1,481.2z"></path>
<path class="st0" d="M306.3,481.2c1.1,0.4-0.1,4.9-0.7,13.5c0,0-0.1,1.6-0.3,4.8c-0.5,9.5-0.8,14.2-0.8,14.4
c0.5,8.8,3,11.9,0.6,16.2c-1,1.9-1.7,1.6-3.2,4.3c-2.2,3.6-1.6,5.1-3.2,9.9c-1.3,3.5-2.7,7.4-6.3,10.1c-1.8,1.3-2.6,1.1-5.3,2.4
c-3.1,1.5-8.8,6.8-9.1,7.1c-7.3,7.8-11.4,11.6-15,11c-4.2-0.7-7.4-7.4-7.1-13s4.2-9.5,7.9-13.2c5.8-5.8,8.3-4.9,13.4-10.8
c2.8-3.2,6.2-7.3,5.5-12.2c-0.5-3.4-3.1-7.1-5.3-6.9c-1.7,0.1-2.3,2.6-7.3,12.4c-2.1,4.1-3.5,6.6-6.5,8.3c-0.8,0.5-3.7,2.2-5.5,1
c-1.7-1.1-1.6-4.4-0.8-6.7c1.3-3.9,4.4-3.8,6.7-8.3c1.2-2.3,1.4-4.3,1.6-6.6c0.5-4.8-0.6-7.1-0.8-10.6c-0.3-4.5,1.1-7.8,3.4-13.3
c3.1-7.5,9.2-17.2,12.7-16.3c1.3,0.4,1.1,1.8,3.6,3.6c1.8,1.2,3.4,1.6,5.6,2.1c3.7,0.8,6.6,0.6,7.7,0.5c2-0.2,3.4-0.4,5-1.2
C305.2,482.5,305.7,481,306.3,481.2z"></path>
<path class="st0" d="M160.3,277.9c0.6,7.2,0.9,15.1,0.7,23.6c-0.1,4.6-0.3,9.1-0.7,13.3c-0.1,20,0.5,26.9,1.1,28.7
c0.5,1.5,0.5,2.6,0.4,4.7c0,0.4-0.1,1.2-0.6,1.6c-0.2,0.1-0.4,0.2-1.5,0.2c-1.1,0.1-1.7,0.1-2,0.1c-0.9-0.1-1-0.2-1.7-0.3
c-1.5-0.2-1.8,0.3-3.6,0.4c-0.3,0-0.9,0-2-0.1c-1.4-0.1-1.8-0.2-3.2-0.3c-1-0.1-1.5-0.1-2.2-0.1c-1.7,0-2.1,0.2-3.3,0.1
c-1.5,0-1.7-0.3-3.6-0.6c-0.9-0.1-2.3-0.3-4.1-0.3c-0.7,0-1.7,0-2.8,0c-1.2,0-1.8,0-2.3,0c-1.5,0.1-1.7,0.3-2.8,0.3
c-0.6,0-1.5,0-2.6-0.3c-0.5,0-1.2,0-2.1-0.1c-1.5,0-1.8,0-2.8-0.1c-0.7,0-1.5-0.1-2.5-0.2c-1.2-0.2-1.2-0.2-2-0.3
c-1.1-0.1-1.2,0-2.9,0c-1.1,0-2-0.1-2.2-0.1c-1-0.1-1.5-0.1-2.1-0.2c-0.9-0.2-1.3-0.4-2.2-0.4c-0.2,0-0.5,0-1,0.1
c-1.8,0.2-1.7,0.2-2.3,0.2c-1.1,0-1.2-0.3-2.2-0.3c-0.6,0-1.1,0.2-1.4,0.3c-0.8-0.4-1.5-0.5-1.9-0.5c-0.5,0-0.9,0.1-1.6,0
c-0.5-0.1-0.5-0.1-0.9-0.1c-0.8-0.1-1.4,0.3-1.6,0.3c-2.5,0.7-8.4-18.3-8.4-18.3c-3.2-10.4-4.5-14.2-5.1-19.7
c-1-8.7,0.1-11.3,0-15.8c-0.1-2.1-0.4-3-0.8-5.5c-0.9-5.4-1.6-13.3-0.6-13.6c0.9-0.2,1.4,5.7,6.1,8.6c2.1,1.3,4.2,1.4,8.2,1.5
c3.5,0.1,6.7-0.2,11.6-1c8.5-1.4,8.5-2.3,14.6-3c5.3-0.7,9.6-0.5,11.4-0.4c2.6,0.1,3,0.3,10.2,1.2c10.6,1.4,12.8,1.4,15.5,0.5
C157,280.7,159.1,279.1,160.3,277.9z"></path>
<path class="st0" d="M92.3,384.1c-0.4-1.4-0.8-2.7-1.1-4.1c-1.8,5.2-2.7,8.2-3.1,10c-0.1,0.5-0.7,3-1.6,5.5
c-0.9,2.6-1.2,3.1-1.8,4.9c-1.8,5.5-1.7,10.2-1.6,12.8c0.1,5,0.2,15.5-1.6,23.9c-1.3,5.9-2.8,7.2-5.3,12.1c-1.3,2.5-2.1,4.5-3.6,8.6
c-1.2,3.2-8,21.5-4.4,23.6c0.9,0.5,1.8-0.4,9-4.5c5.5-3.1,8.3-4.7,9.9-5.1c3.1-0.8,7.3-0.1,15.5,1.5c4.1,0.8,4.4,1,12.1,2.5
c5.5,1.1,7.3,1.4,9.7,1.5c3.3,0.3,6.4,0.5,9.6-0.1c2.2-0.4,3.7-1.1,12.9-7.8c0.8-0.6,9.6-7,13.6-13.5c0.5-0.7,1.3-2.1,0.8-3.2
c-0.8-1.7-4.2-1.7-5.1-1.7c-9.5-0.2-26.2-12.3-36-20c-3-2.3-7.1-6.1-11-12c-1.2-1.7-2.6-3.8-4.1-6.2c0,0-1.8-2.9-3.5-6.1
C97,398.2,92.5,384.9,92.3,384.1z"></path>
<path class="st0" d="M232.7,382.7c1.7,3.2,2.5,5.6,3,7.3c0.2,0.7,0.7,3,1.6,5.5c0.9,2.6,1.2,3.1,1.8,4.9c1.8,5.5,1.7,10.2,1.6,12.8
c-0.1,5-0.3,15.5,1.6,23.9c1.9,8.4,4.1,7.5,8.9,20.7c1.5,4.1,7.2,19.7,4.1,21.5c-1.9,1.1-5.4-3.4-9.5-6.3
c-16.5-11.7-36.1,7.9-59.5,0.6c-12.4-3.8-23.7-14.3-22.3-21c1.5-7.6,18.6-6.1,37.6-20.3c7.5-5.6,12.5-11.6,15.3-15.4
c0.9-1.4,2.1-3.2,3.5-5.4c0.8-1.4,3.2-5.4,5.7-10.8C228.1,396.3,230.6,390.2,232.7,382.7z"></path>
<path class="st0" d="M162.9,445.9c-0.5,1.9-1,3.8-1.4,5.7c-0.3,1.4-0.7,2.8-1,4.2c-0.7,1.1-1.7,2.5-3,4.1c-1,1.2-3.1,2.6-5.9,5.8
c-0.6,0.7-11.2,8.3-10.3,7.6c-4,1.4-6.2,1.5-6.5,2.8c-0.4,1.9,3.7,2.9,6.1,7.3c1.7,3.1,1,4.8,1.8,9.5c1,5.5,1.9,10.6,5.1,14.4
c3.7,4.4,11,7.6,17.9,5.7c9.5-2.6,12.4-13.1,12.6-13.8c1.6-6-1.3-8.2,1.4-12.6c2.8-4.5,3.2-7.3,5.9-9.3c0.7-0.6,1.9-1.3,1.8-2.2
c-0.1-1.2-2.4-1.7-4.7-2.4c-0.5-0.2-10.7-3.7-16.2-11.4c-0.2-0.3-0.5-0.7-0.8-1.2C162.5,454.9,162.5,449.4,162.9,445.9z"></path>
<path class="st0" d="M68.1,481.4c-6.5,1-0.2,38.8-0.2,38.8c5.3,31.8-0.2,24.2,5.3,58.8c6,38.1,9.9,29,18.1,72.4
c2.1,11.2,4.5,25.8,9.9,26.4c4,0.4,4.7-7.1,12.6-12.4c13.9-9.2,31.4,0.8,36.1-6.9c1.2-2,0.6-3.5,0.2-8.3
c-0.8-10.2,1.1-15.9,3.4-28.6c2.4-13.1,3.5-26.4,5.3-39.6c2.7-19.9,1.6-30.3,3-39.6c0.3-1.8,0.8-4.5,0.8-8.3c0.1-3.4-0.2-4.1-0.1-8
c0.1-2.2,0.3-3.1,0.4-6.3c0.2-4.9,0-5.8-0.7-6.3c-1.1-1-2.6-0.3-5.1-0.5c-3.5-0.4-5.9-2.5-7.5-3.8c-6.1-5.2-7-15.2-7.2-17.4
c-0.3-2.9-0.1-5.3-1.6-8.3c-0.9-1.8-2.2-4.3-4.6-5c-1.4-0.4-4.8-0.6-6.1-0.9c-0.1,0-0.3-0.1-0.5-0.1c-2.5-0.5-2.9,0-6.5-0.2
c-3.9-0.2-5.8-0.9-10.8-2c-1-0.2-7.3-1.7-14.2-2.6c-7-1-10.5-1.4-13.6-0.2c-2.4,0.9-5.4,2.1-7.5,4.5c-0.5,0.5-1.8,2-3.9,3
c-0.9,0.5-1.9,0.8-2,0.8C70.2,480.9,69.1,481.2,68.1,481.4z"></path>
<path class="st0" d="M255.3,479.3c0,0,3.7,1.8,3.8,21.9c-0.8,9.6-2.4,19-2.4,19c-5.3,31.8,0.2,24.2-5.3,58.8
c-6,38.1-9.9,29-18.1,72.4c-2.1,11.2-4.5,25.8-9.9,26.4c-4,0.4-4.7-7.1-12.6-12.4c-13.5-9-30.2,1.3-36.1-6.9c-1.3-1.7-1-3-1.4-8.5
c-0.9-12.6-2.6-15-4.7-28.8c-0.5-3.1-0.8-5.8-1-8.3c-1.3-13-1.5-23.3-1.8-30.9c-0.7-19.6-3.7-50.6-3.2-57.8c0.1-2,0.6-3.3,0.6-6.4
c0-2.1-0.3-3.4,0.5-4.4c0.9-1,2.2-0.4,3.7-1c4.9-2,7.5-6.1,8.4-7.6c1.8-2.9,2.4-5.5,2.9-7.6c1.2-5.3-0.6-6.6,1-10.7
c0.5-1.3,0.6-1,3-5.6c0.7-1.4,1-2,1.7-2.6c0.8-0.7,1.6-0.9,2.3-2c0.5-0.7,0.3-0.9,0.7-1.3c0.8-0.8,2.2-0.5,4.8-0.2
c0.8,0.1,2.9,0.3,5,0.4c1.8,0,3.3-0.1,4.5-0.2c2-0.2,3.6-0.4,5-0.7c3.9-0.7,6.8-1.5,8.5-1.9c6-1.6,9.1-2.3,11.3-2.7
c4.9-0.7,9.9-1.4,14.8,0.7c4.1,1.8,6.4,3.9,6.4,3.9c1.1,0.9,1.8,1.9,3.4,3C252.8,478.5,254.3,479,255.3,479.3z"></path>
<path class="st0" d="M124,663.6c-1.5-0.1-4.3-0.1-7.3,1.2c-2.9,1.3-4.6,3.3-5.9,4.9c-2.5,3.1-2,4-4.9,7.9c-2.5,3.4-3.3,3.1-3.9,4.9
c-0.9,2.8,0.7,4.4,2,9.9c0.5,2.1,0.8,4.1,1.2,8.1c0.8,6.7,1.2,10.1,0.6,12.6c-1.3,5.6-5,9.1-3.7,10.6c0.6,0.6,1.4,0.1,2.4,0.8
c1.6,1.1,1.6,3.4,1.8,5.9c0.2,2.9,0.8,7,1.2,8.3c2.7,7.9,32.3,11.5,41-0.8c0.9-1.3,1.7-4.3,3.2-10.3c2.6-10.3,3.9-18.3,4.3-20.9
c1.9-12.9,2.9-19.4,2.2-26.4c-0.7-7.6-2.5-8.9-4.5-18.1c-2-9.3-2.6-18.1-2.2-26.2"></path>
<path class="st0" d="M197.9,663.6c1.5-0.1,4.3-0.1,7.3,1.2c2.9,1.3,4.6,3.3,5.9,4.9c2.5,3.1,2,4,4.9,7.9c2.5,3.4,3.3,3.1,3.9,4.9
c0.9,2.8-0.7,4.4-2,9.9c-0.5,2.1-0.8,4.1-1.2,8.1c-0.8,6.7-1.2,10.1-0.6,12.6c1.3,5.6,5,9.1,3.7,10.6c-0.6,0.6-1.4,0.1-2.4,0.8
c-1.6,1.1-1.6,3.4-1.8,5.9c-0.2,2.9-0.8,7-1.2,8.3c-2.7,7.9-32.3,11.5-41-0.8c-0.9-1.3-1.7-4.3-3.2-10.3
c-2.6-10.3-3.9-18.3-4.3-20.9c-1.9-12.9-2.9-19.4-2.2-26.4c0.7-7.6,2.5-8.9,4.5-18.1c2-9.3,2.6-18.1,2.2-26.2"></path>
<path class="st0" d="M102.1,723.7c1,0,2.8,1.1,3.7,2.7c0.9,1.6,0.7,3.2,0.5,4c0.1,1.4,0.2,2.6,0.4,3.6c0.1,0.9,0.2,1.6,0.4,2.9
c0.2,1.2,0.3,1.4,0.4,1.8c0.1,0.2,0.4,1.1,1.4,2.1c0.2,0.2,1,1,3,2c1.6,0.8,2.9,1.2,4,1.5c1.7,0.5,3.1,0.8,4,0.9
c0.8,0.1,2.7,0.5,5.2,0.6c4.1,0.2,7.2-0.2,7.9-0.3c1.6-0.2,3.5-0.5,6-1.3c1.8-0.6,3.5-1.2,5.3-2.4c3.5-2.5,4.2-5.6,5-5.4
c0.9,0.3-0.6,4.8-0.3,12c0.1,2.2,0.2,1.9,0.6,6.7c0.4,5.2,0.4,7.6,0.5,9.5c0.5,6.5,3.4,10.7,4.9,14.8c3.2,8.6,3.5,16.4,3.9,25.8
c0.4,9.9-0.7,17.7-3,33.3c-1.6,10.7-2.3,9.8-3,14.2c-0.2,1.1-0.3,2.4-1.2,3.9c-0.8,1.2-1.6,1.9-1.4,2.2c0.3,0.5,2.3-0.8,3.9,0
c0.9,0.5,1.4,1.5,1.8,3.7c0.9,4.6,0.4,7.7,0.4,7.7c-0.9,5.6-0.3,11.4-1,17c-2.1,17.5-3.1,26.2-2.4,30c1.9,10.3,4.3,17.7,4.3,17.7
c1.7,5.3,2.6,6.6,1.8,8.3c-3,7.3-26.3,7.1-29.2,0.2c-0.4-0.9-0.2-2.3,0.2-5.1c0.8-5.7,2.3-9.2,3-11.8c1.2-4,0.9-7.5,0.4-14.4
c-1-14-4.8-25.6-5.5-27.8c-4.7-14.2-8.6-20.7-15-34.5c-7.4-16.1-12.9-27.9-16.8-43.4c-5.6-22.2-5-39.8-4.3-47.9
C93.2,740.9,98.1,723.6,102.1,723.7z"></path>
<path class="st0" d="M221.1,724.9c-0.4-0.7-1-1-1-1c-0.5-0.2-1-0.1-1.3,0c-0.4,0-1,0.2-1.4,0.6c-0.1,0.1-0.2,0.2-0.4,0.4
s-0.6,0.7-0.8,1.3c-0.1,0.3-0.2,0.5-0.3,1s-0.2,0.9-0.2,2c0,0.6-0.1,0.9-0.1,1.3c-0.1,0.9-0.3,3.5-0.6,5c-0.3,1.4-0.8,4.2-3,6.2
c-1,0.9-1.9,1.2-3.9,2c-0.7,0.3-2.5,0.9-5.4,1.5c-3.5,0.7-6.5,0.8-8.1,0.8c-2,0-4.8,0-8.3-0.8c-3.2-0.7-6-1.3-8.7-3.3
s-3.6-4.2-4.2-3.9c-0.7,0.4,1.5,4.2,1.7,10.1c0.1,2.4-0.5,4.1-0.8,7.7c-0.2,2.3-0.8,4.6-2,8.9c-2.2,7.6-4.4,13.5-4.9,14.8
c-3.2,8.6-3.5,16.4-3.9,25.8c-0.4,9.9,0.7,17.7,3,33.3c1.6,10.7,2.3,9.8,3,14.2c0.2,1.1,0.3,2.4,1.2,3.9c0.8,1.2,1.6,1.9,1.4,2.2
c-0.3,0.5-2.3-0.8-3.9,0c-0.9,0.5-1.4,1.5-1.8,3.7c-0.9,4.6-0.4,7.7-0.4,7.7c0.9,5.6,0.3,11.4,1,17c2.1,17.5,3.1,26.2,2.4,30
c-1.9,10.3-4.3,17.7-4.3,17.7c-1.7,5.3-2.6,6.6-1.8,8.3c3,7.3,26.3,7.1,29.2,0.2c0.4-0.9,0.2-2.3-0.2-5.1c-0.8-5.7-2.3-9.2-3-11.8
c-1.2-4-0.9-7.5-0.4-14.4c1-14,4.8-25.6,5.5-27.8c4.7-14.2,8.6-20.7,15-34.5c7.4-16.1,12.9-27.9,16.8-43.4
c1.2-4.7,5.8-23.6,4.3-47.9C230.5,758.5,230.6,742.8,221.1,724.9z"></path>
<path class="st0" d="M129.6,942c-2.1,0-2.6,3.8-6.3,8.9c-1.7,2.4-5,6.9-10.3,9.5c-5.2,2.6-8.1,1.1-10.8,4.3
c-0.2,0.2-2.8,3.4-1.8,6.3c1.4,4.1,9.3,4.7,14.2,5.1c9.1,0.7,10.4-1.6,19.9-0.8c5.3,0.4,6.4,1.3,11,1c5-0.3,10.3-0.6,12.6-4.5
c2.2-3.7,1-9.8-2-12.2c-1-0.8-1.9-0.9-2.4-2c0-0.1-0.1-0.2-0.1-0.3c-0.6-2.2,1.9-6.2,1.9-6.2c1.1-1.7,2.4-4.3,3.5-7.9
c-2.8,2-7.6,4.8-13.9,5.4c-3.4,0.3-7.1,0.7-10.3-1.5C131.6,945,131.4,942.1,129.6,942z"></path>
<path class="st0" d="M192.5,943.4c2.2-0.1,3.4,3.3,6.5,7.5c1.8,2.5,5.2,6.9,10.3,9.5c5.2,2.6,8.1,1.1,10.8,4.3
c0.2,0.2,2.8,3.4,1.8,6.3c-1.4,4.1-9.3,4.7-14.2,5.1c-9.1,0.7-10.4-1.6-19.9-0.8c-5.3,0.4-6.4,1.3-11,1c-5-0.3-10.3-0.6-12.6-4.5
c-2.2-3.7-1-9.8,2-12.2c1-0.8,1.9-0.9,2.4-2c0-0.1,0.1-0.2,0.1-0.3c0.6-2.2-1.9-6.2-1.9-6.2c-1.1-1.7-2.4-4.3-3.5-7.9
c1.5,1.4,4.1,3.5,7.8,4.7c4.9,1.6,9.1,0.8,11.1,0.4c2.2-0.4,4.5-0.9,7-2.6C191.1,944.4,191.4,943.5,192.5,943.4z"></path>
<path class="st0" d="M91.2,347.3c-1.1,0.8-0.2,3.5,0.4,6.1c1.3,5.8,0.9,10.9,0.2,18.2c-0.4,4-0.7,4.5-0.6,7c0.2,3,0.9,5.1,2.3,9.3
c1.3,4,2.6,7,3.3,8.7c0.7,1.6,2.2,4.8,5.1,10.2c4.4,8,6.5,12,10.1,16.3c2.9,3.5,5.5,5.8,8.1,8c5.2,4.5,9.5,7.3,13.3,9.7
c3.7,2.4,9.5,5,21.3,10.2c1.5,0.6,4.4,1.9,6.3,0.6c0.4-0.3,1.1-0.9,1.7-3.4c0.8-3.1,0.4-5.1,0.4-7.8c0-2.4,0.3-1.6,1.1-8.2
c0.6-4.8,0.9-8.5,0.9-9.3c0.3-3.8,0.3-6.7,0.3-9.1c0.1-3.2,0-5.6,0-7.3c0-3.4-0.1-6.1-0.2-7.8c-0.1-2-0.2-3.6-0.2-4.6
c-0.1-2.6-0.2-4.6-0.3-5.9c-0.2-2.5-0.3-4.4-0.4-5.8c-0.2-2.3-0.3-4.1-0.4-5.5c-0.1-0.9-0.2-2.5-0.4-5.5c-0.1-1-0.2-2.5-0.7-8.1
c-0.7-8.8-0.7-8.6-0.7-8.9c-0.1-3,0-3.1-0.3-3.6c-1.5-2.4-6.1-0.9-14.8-1c-5.1-0.1-4.2-0.6-11.4-0.9c-6-0.2-6.2,0.1-13.2,0
c-3.2-0.1-7.5-0.2-12.9-0.7c-4.7-0.4-6.4-0.8-9.5-0.6c-2,0.1-3.1,0.3-5.2,0.1C92.7,347.3,91.9,346.9,91.2,347.3z"></path>
<path class="st0" d="M167.4,281.9c2.7,0.9,4.9,0.9,15.5-0.5c7.2-0.9,7.6-1.1,10.2-1.2c1.8-0.1,6.1-0.3,11.4,0.4
c6.1,0.7,6.1,1.6,14.6,3c4.9,0.8,8.1,1.1,11.6,1c4-0.1,6.1-0.2,8.2-1.5c4.7-2.9,5.2-8.8,6.1-8.6c1,0.3,0.3,8.2-0.6,13.6
c-0.4,2.5-0.7,3.4-0.8,5.5c-0.1,4.5,1,7.1,0,15.8c-0.9,8-3.2,11.1-5.1,19.7c-2.1,9.2-2.1,17.9-4.8,18.2c-0.9,0.1-3.9-0.5-5.3-0.2
c-0.1,0-0.4,0.1-0.9,0.1c-0.7,0.1-1.1,0-1.6,0c-0.4,0-1.1,0.1-1.9,0.5c-0.3-0.1-0.8-0.3-1.4-0.3c-1-0.1-1.1,0.3-2.2,0.3
c-0.5,0-0.4-0.1-2.3-0.2c-0.6,0-0.8-0.1-1-0.1c-0.9,0-1.2,0.2-2.2,0.4c-0.6,0.1-1.1,0.2-2.1,0.2c-0.3,0-1.1,0.1-2.2,0.1
c-1.7,0-1.9-0.1-2.9,0c-0.8,0.1-0.7,0.1-2,0.3c-1,0.1-1.8,0.2-2.5,0.2c-1,0-1.2,0-2.8,0.1c-0.9,0-1.6,0.1-2.1,0.1
c-1.1,0.3-2,0.3-2.6,0.3c-1.1,0-1.3-0.2-2.8-0.3c-0.5,0-1.1,0-2.3,0c-1.1,0-2,0-2.8,0c-1.7,0-3.1,0.1-4.1,0.3
c-1.9,0.3-2.1,0.6-3.6,0.6c-1.2,0-1.6-0.2-3.3-0.1c-0.7,0-1.2,0.1-2.2,0.1c-1.4,0.1-1.7,0.2-3.2,0.3c-1.1,0.1-1.7,0.2-2,0.1
c-1.9,0-2.2-0.5-3.6-0.4c-0.8,0.1-0.8,0.2-1.7,0.3c-0.3,0-0.9,0-2-0.1s-1.3-0.1-1.5-0.2c-0.5-0.4-0.6-1.1-0.6-1.6
c-0.1-1.6-0.1-2.5,0-3.5c0.1-0.6,0.3-1.1,0.3-1.1c1.1-3.3,0.1-25,0-29.9c0-1.1,0-0.1,0.4-12.1c0.3-10.1,0.6-18.3,0.7-23.6
C162.7,279.1,164.8,280.7,167.4,281.9z"></path>
<path class="st0" d="M233.8,347.3c1.1,0.8,0.2,3.5-0.4,6.1c-1.3,5.8-0.9,10.9-0.2,18.2c0.4,4,0.7,4.5,0.6,7c-0.2,3-0.9,5.1-2.3,9.3
c-1.3,4-2.6,7-3.3,8.7c-0.7,1.6-2.2,4.8-5.1,10.2c-4.4,8-6.5,12-10.1,16.3c-2.9,3.5-5.5,5.8-8.1,8c-5.2,4.5-9.5,7.3-13.3,9.7
c-3.7,2.4-9.5,5-21.3,10.2c-1.5,0.6-4.4,1.9-6.3,0.6c-0.4-0.3-1.1-0.9-1.7-3.4c-0.8-3.1-0.4-5.1-0.4-7.8c0-2.4-0.3-1.6-1.1-8.2
c-0.6-4.8-0.9-8.5-0.9-9.3c-0.3-3.8-0.3-6.7-0.3-9.1c-0.1-3.2,0-5.6,0-7.3c0-3.4,0.1-6.1,0.2-7.8c0.1-2,0.2-3.6,0.2-4.6
c0.1-2.6,0.2-4.6,0.3-5.9c0.2-2.5,0.3-4.4,0.4-5.8c0.2-2.3,0.3-4.1,0.4-5.5c0.1-0.9,0.2-2.5,0.4-5.5c0.1-1,0.2-2.5,0.7-8.1
c0.7-8.8,0.7-8.6,0.7-8.9c0.1-3,0-3.1,0.3-3.6c1.5-2.4,6.1-0.9,14.8-1c5.1-0.1,4.2-0.6,11.4-0.9c6-0.2,6.2,0.1,13.2,0
c3.2-0.1,7.5-0.2,12.9-0.7c4.7-0.4,6.4-0.8,9.5-0.6c2,0.1,3.1,0.3,5.2,0.1C232.3,347.3,233.1,346.9,233.8,347.3z"></path>
<path class="st0" d="M134.6,45.7c0.8-0.6,6.1-4.6,11.6-4.1c2.7,0.3,4.7,1.5,4.7,1.5c1.4,0.9,2.4,1.9,2.9,2.6"></path>
<path class="st0" d="M167.9,45.2c2.5-1.5,4.8-2.2,6.4-2.6c1.6-0.4,3-0.8,4.9-0.6c2.9,0.3,5.1,1.6,6.4,2.6"></path>
<path class="st0" d="M143.7,51.7c-1.9,0.2-2.9,2.9-3.5,4.4c-0.5,1.3-1.7,4.7,0,6.7c0.8,1,2.1,1.3,2.6,1.5c0.6,0.2,1.9,0.5,3.2,0
c2.1-0.8,2.7-3,2.9-3.5c0.5-1.7,0.2-3.1,0-3.8c-0.4-1.6-1.2-2.6-1.5-2.9C146.9,53.4,145.4,51.5,143.7,51.7z"></path>
<path class="st0" d="M176.9,51.7c-1.9,0.2-2.9,2.9-3.5,4.4c-0.5,1.3-1.7,4.7,0,6.7c0.8,1,2.1,1.3,2.6,1.5c0.6,0.2,1.9,0.5,3.2,0
c2.1-0.8,2.7-3,2.9-3.5c0.5-1.7,0.2-3.1,0-3.8c-0.4-1.6-1.2-2.6-1.5-2.9C180.1,53.4,178.6,51.5,176.9,51.7z"></path>
<path class="st0" d="M160.5,73.3c0,1.7,0,3.5,0,5.2c0,1.2,0,2.9,0,2.9l0,0c-0.4,1.8-0.1,2.6,0.3,2.9c0,0,0.4,0.3,2.9,0.3l0,0
c0.3,0.2,2,1.3,2.3,3.5c0.1,0.4,0.2,1.7-0.6,2.9c-0.9,1.2-2.6,1.8-4.4,1.5"></path>
<path class="st0" d="M146,101.2c1.4,0.9,3.5,2,6.1,2.9c1.7,0.6,3.4,1.2,5.8,1.5c0.8,0.1,4.6,0.4,9-1.2c2.9-1,4.9-2.4,6.4-3.5
c1.8-1.3,3.1-2.5,4.1-3.5"></path>
</svg>
</div>
</div>
JSFiddle File: https://jsfiddle.net/RaKa7/0hLxarfs/8/
Related
How do I horisontally and vertically center a <g> transform that has both a scale + rotate (90 degree) values defined?
Im my example I have a 85x85mm SVG element that im trying to center towards.
If im not rotating I can center with scale(0.25) rotate(0 42.5 42.5) translate(42.5 42.5)
However introducing the 90degree rotation, things go wrong.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="85mm"
height="85mm"
viewBox="0 0 85 85">
<style type="text/css">
svg {
border: 1px solid red;
position: absolute;
top: 10px;
left: 10px;
overflow: hidden;
}
</style>
<!-- TRANSFORMATION HERE-->
<g class="svg-merge-item-wrapper" transform="scale(0.25) rotate(90 42.5 42.5) translate(42.5 42.5)">
<!-- TRANSFORMATION HERE-->
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:0.375;stroke-miterlimit:3.9892;}
</style>
<path id="path6" class="st0" d="M119.2,35.9c0,0,11.2,0,15,7.4c3.8,7.4,4.2,17.8,4.5,19.2c0.3,1.4,0.3,6.3,6,10.8
c5.6,4.5,6.3,18.5,6.3,18.5s1.4,0,1.4,1.7v5.2c0,0.6-0.4,1-1,1c0,0,0,18.5-0.4,28.7c-0.4,10.1-4.2,43-6,50
c-1.8,7-10.5,31.9-10.5,31.9h-29.7c0,0-9.4-21.7-11.9-36.4s-5.3-24.8-5.6-39.5c-0.3-14.7,0-34.6,0-34.6s-2.1,0.3-2.1-1.4v-5.6
c0-0.8,0.6-1.4,1.3-1.4c0,0,0,0,0.1,0c0,0,0-12.6,4.5-16.8c4.5-4.2,6-8,6.3-9.4c0.3-1.4,0.7-7.7,0.7-7.7c1.6-2.2,2.7-4.7,3.1-7.3
c0.7-4.2,1.1-5.6,1.1-5.6s2.8-6,5.9-7c1.7-0.6,3.5-1,5.3-1.4C115.4,36.1,117.3,35.9,119.2,35.9z"/>
<path id="path8" class="st0" d="M88.4,91.5v-0.3c0,0,0-12.1,4.3-16.1c4.3-4,5.7-7.7,6-9.1c0.2-0.9,0.4-3.9,0.6-5.8
c0.1-1,0.4-2,0.9-2.8c1.1-1.8,1.8-3.8,2.2-5.9c0.7-4,1-5.4,1-5.4s2.7-5.7,5.6-6.7c1.6-0.6,3.3-1,5-1.3c1.8-0.2,3.5-0.3,5.3-0.3
c0,0,10.6,0,14.3,7.1c3.7,7.1,3.7,17.5,4.1,18.8c0.4,4,2.4,7.7,5.6,10.1c5.3,4.4,6.3,17.8,6.3,17.8v0.3"/>
<path id="path10" class="st0" d="M98.2,57.6c0,0-10.5-15-15.7-17.5s-11.9-4.5-10.8-6.6c0,0,7-2.1,18.5,4.5s12.1,7.4,12.1,7.4"/>
<path id="path12" class="st0" d="M107,38.4c0,0-0.1-1.8-1.5-1.8c-1.4,0-2.4,1-5.6,0c-3.2-1-3.1-1.4-3.5-1.4
c-0.3,0-14.3-6.6-18.2-6.6s-6.3,0-7,2.1c-0.7,2.1,0,2.7,0,2.7l0.3,0.1"/>
<circle id="circle14" class="st0" cx="112.2" cy="44.3" r="1.4"/>
<circle id="circle16" class="st0" cx="111.8" cy="44" r="0.7"/>
<line id="line18" class="st0" x1="86.6" y1="91.5" x2="151" y2="91.9"/>
<line id="line20" class="st0" x1="151.3" y1="99.9" x2="87.3" y2="99.9"/>
<path id="path22" class="st0" d="M151.2,118.6c0,0,1.5,0.5,1.5-1.6v-9.8c0,0-0.3-2.1,3.8-1.4c4.2,0.7,9.4,2.1,10.8,8.4
c0.8,3.8,1,7.7,0.8,11.6c-0.1,1.6-0.2,3.2-0.5,4.8c-1,5.3-3.1,16.6-7.5,24.5c-4.1,7.2-13.5,20.9-17.5,30.9"/>
<path id="path24" class="st0" d="M151.3,104.8c0,0,2-1.4,5.9-0.6c4.2,0.9,10.1,2.4,11.8,9.6c1.6,6.5,0.9,11.6,0.2,16.7
c-0.7,4.7-1.7,9.3-3.1,13.8c-0.9,2.9-3.4,9.8-5.8,13.6c-1.3,2-13.6,21.7-16.1,27.9s-3.5,8-3.5,16.8c0,7.3,2.8,7.7,2.8,7.7h-2.1
c0,0-4.6-6.2-1.1-17.2"/>
<path id="path26" class="st0" d="M113.2,105.1h11.5c4.6,5.4,5.2,13.1,1.7,19.2c-6,10.8-6.3,7.3-7,16.8c-0.6,7.9,1.5,17,2.2,19.8
c0.3,1,0.3,2,0.2,3c-0.3,2.3-1.9,4.7-8-1.4c-7.7-7.7-8.6-23.2-8.7-27.8c0-0.8,0.1-1.7,0.2-2.5c0.9-4.3,2.4-8.5,4.3-12.4
C112.9,113.9,113.2,105.5,113.2,105.1z"/>
<path id="path28" class="st0" d="M104.8,210.4H93.7c-0.4,0.3-0.5,1-0.2,1.4c0.1,0.2,0.3,0.3,0.5,0.3c1.4,0.7,51.7-0.3,51.7-0.3
c0.4-0.4,0.4-1,0-1.4h-11.2"/>
<polyline id="polyline30" class="st0" points="113.1,106.9 125.8,106.9 126,106.8 "/>
<line id="line32" class="st0" x1="118" y1="165.8" x2="121.1" y2="165.8"/>
<line id="line34" class="st0" x1="116.6" y1="164.8" x2="121.7" y2="164.8"/>
<line id="line36" class="st0" x1="121.9" y1="163.9" x2="115.5" y2="163.9"/>
<line id="line38" class="st0" x1="114.5" y1="163.1" x2="122" y2="163.1"/>
<line id="line40" class="st0" x1="122" y1="162.1" x2="113.6" y2="162.1"/>
<line id="line42" class="st0" x1="112.6" y1="161" x2="121.7" y2="161"/>
<polyline id="polyline44" class="st0" points="112.9,108.5 126.9,108.5 127,108.5 "/>
<polyline id="polyline46" class="st0" points="112.6,110.1 127.5,110.1 127.6,110.1 "/>
<polyline id="polyline48" class="st0" points="112.4,111.6 127.9,111.6 128.1,111.6 "/>
<line id="line50" class="st0" x1="111.6" y1="114.8" x2="128.7" y2="114.8"/>
<line id="line52" class="st0" x1="128.8" y1="116.4" x2="111.2" y2="116.4"/>
<line id="line54" class="st0" x1="110.5" y1="118.3" x2="114.6" y2="118.3"/>
<line id="line56" class="st0" x1="115" y1="118.3" x2="116" y2="118.3"/>
<line id="line58" class="st0" x1="117" y1="118.3" x2="125.5" y2="118.3"/>
<line id="line60" class="st0" x1="125.8" y1="118.3" x2="128.6" y2="118.3"/>
<line id="line62" class="st0" x1="114.2" y1="120.3" x2="115.2" y2="120.3"/>
<line id="line64" class="st0" x1="116.2" y1="120.3" x2="121.3" y2="120.3"/>
<line id="line66" class="st0" x1="122.1" y1="120.3" x2="124.1" y2="120.3"/>
<line id="line68" class="st0" x1="124.6" y1="120.3" x2="125.8" y2="120.3"/>
<line id="line70" class="st0" x1="126.7" y1="120.3" x2="127.5" y2="120.3"/>
<line id="line72" class="st0" x1="109.5" y1="120.3" x2="113.6" y2="120.3"/>
<line id="line74" class="st0" x1="106.6" y1="127.7" x2="124.6" y2="127.7"/>
<polyline id="polyline76" class="st0" points="128.5,113.2 128.2,113.2 112,113.2 "/>
<ellipse id="ellipse78" class="st0" cx="113.4" cy="44.7" rx="4.7" ry="3.8"/>
<path id="path80" class="st0" d="M123.4,125.9l2.2,0.1"/>
<path id="path82" class="st0" d="M119.3,125.8h2.4"/>
<path id="path84" class="st0" d="M116.4,125.8h1.5"/>
<path id="path86" class="st0" d="M112.5,125.9h2.4"/>
<path id="path88" class="st0" d="M109.6,125.9h1.4"/>
<path id="path90" class="st0" d="M107.2,125.9h1.1"/>
<path id="path92" class="st0" d="M107.5,129.4h-1.3"/>
<path id="path94" class="st0" d="M110.6,129.3h-1.8"/>
<path id="path96" class="st0" d="M116.1,129.3h-4.1"/>
<path id="path98" class="st0" d="M123.6,129.4c-2,0-4-0.1-6.1-0.1"/>
<line id="line100" class="st0" x1="105.7" y1="131.1" x2="122.4" y2="131.1"/>
<path id="path102" class="st0" d="M107.5,132.8h-2.1"/>
<path id="path104" class="st0" d="M113.7,132.8h-4.9"/>
<path id="path106" class="st0" d="M121.3,132.8h-6.2"/>
<path id="path108" class="st0" d="M107.7,134.5h-2.5"/>
<path id="path110" class="st0" d="M114.4,134.5h-5.3"/>
<path id="path112" class="st0" d="M120.5,134.5h-4.6"/>
<line id="line114" class="st0" x1="105.2" y1="136.2" x2="120" y2="136.2"/>
<path id="path116" class="st0" d="M117.2,137.9h2.6"/>
<path id="path118" class="st0" d="M111.7,137.9h3.8"/>
<path id="path120" class="st0" d="M105.3,137.9h5"/>
<line id="line122" class="st0" x1="119.7" y1="139.3" x2="105.4" y2="139.3"/>
<line id="line124" class="st0" x1="105.6" y1="140.7" x2="119.6" y2="140.7"/>
<line id="line126" class="st0" x1="119.5" y1="141.9" x2="105.8" y2="141.9"/>
<line id="line128" class="st0" x1="105.9" y1="143.2" x2="119.4" y2="143.2"/>
<line id="line130" class="st0" x1="119.4" y1="144.4" x2="106.1" y2="144.4"/>
<path id="path132" class="st0" d="M114.1,145.6h5.4"/>
<path id="path134" class="st0" d="M109.4,145.6h2.9"/>
<path id="path136" class="st0" d="M106.3,145.7h1.8"/>
<line id="line138" class="st0" x1="111.7" y1="159.8" x2="121.4" y2="159.7"/>
<line id="line140" class="st0" x1="121.2" y1="158.5" x2="110.9" y2="158.5"/>
<line id="line142" class="st0" x1="110.2" y1="157.3" x2="120.9" y2="157.3"/>
<line id="line144" class="st0" x1="109.6" y1="156.2" x2="120.7" y2="156.2"/>
<line id="line146" class="st0" x1="109.1" y1="154.9" x2="120.4" y2="154.9"/>
<line id="line148" class="st0" x1="120.2" y1="153.5" x2="108.5" y2="153.5"/>
<line id="line150" class="st0" x1="107.9" y1="152" x2="120" y2="152"/>
<line id="line152" class="st0" x1="107.6" y1="150.7" x2="119.8" y2="150.7"/>
<line id="line154" class="st0" x1="119.7" y1="149.2" x2="107.1" y2="149.2"/>
<path id="path156" class="st0" d="M115.5,148h4.1"/>
<path id="path158" class="st0" d="M110.7,148h3.3"/>
<path id="path160" class="st0" d="M106.8,148h2.4"/>
<line id="line162" class="st0" x1="119.5" y1="146.8" x2="106.6" y2="146.8"/>
<path id="path164" class="st0" d="M114.3,92.7h1.7"/>
<path id="path166" class="st0" d="M106.3,92.6c2.1,0,4.2,0,6.3,0"/>
<path id="path168" class="st0" d="M98.2,92.6h6.6"/>
<path id="path170" class="st0" d="M91.7,92.7l4.9-0.1"/>
<path id="path172" class="st0" d="M85.3,92.7h5"/>
<path id="path174" class="st0" d="M130,92.7h-5"/>
<path id="path176" class="st0" d="M136.5,92.6l-4.8,0.1"/>
<path id="path178" class="st0" d="M137.8,92.6c4.7,0,9.5,0,14.2,0.1h0.2"/>
<line id="line180" class="st0" x1="86.6" y1="99.9" x2="86.6" y2="93.3"/>
<line id="line182" class="st0" x1="88.9" y1="99.9" x2="88.9" y2="93.3"/>
<line id="line184" class="st0" x1="91.1" y1="99.9" x2="91.1" y2="93.3"/>
<path id="path186" class="st0" d="M93.3,94.3v-1.1"/>
<path id="path188" class="st0" d="M93.3,99.9v-4.4"/>
<path id="path190" class="st0" d="M95.6,95.4v-2.1"/>
<path id="path192" class="st0" d="M95.6,99.9v-3"/>
<line id="line194" class="st0" x1="97.8" y1="99.9" x2="97.8" y2="93.3"/>
<line id="line196" class="st0" x1="100" y1="99.9" x2="100" y2="93.3"/>
<line id="line198" class="st0" x1="102.2" y1="99.9" x2="102.2" y2="93.3"/>
<path id="path200" class="st0" d="M104.5,94.7v-1.5"/>
<path id="path202" class="st0" d="M104.5,99.9V96"/>
<path id="path204" class="st0" d="M106.7,95.2v-1.9"/>
<path id="path206" class="st0" d="M106.7,99.9v-3"/>
<path id="path208" class="st0" d="M108.9,94.7v-1.5"/>
<path id="path210" class="st0" d="M108.9,97.5v-1.7"/>
<path id="path212" class="st0" d="M108.9,99.9v-1.2"/>
<path id="path214" class="st0" d="M111.1,94.3v-1.1"/>
<path id="path216" class="st0" d="M111.1,99.6v-1.1"/>
<path id="path218" class="st0" d="M126.9,94.8v-1.6"/>
<path id="path220" class="st0" d="M126.9,99.9v-1.6"/>
<path id="path222" class="st0" d="M129.1,94.5v-1.3"/>
<path id="path224" class="st0" d="M129.1,97.3v-1.2"/>
<path id="path226" class="st0" d="M129.1,99.9v-1.4"/>
<path id="path228" class="st0" d="M131.3,94.4v-1.2"/>
<path id="path230" class="st0" d="M131.3,96.9v-1.2"/>
<path id="path232" class="st0" d="M131.3,99.9v-1.8"/>
<path id="path234" class="st0" d="M133.5,94.8v-1.6"/>
<path id="path236" class="st0" d="M133.5,99.9v-2.6"/>
<path id="path238" class="st0" d="M135.7,94.5v-1.3"/>
<path id="path240" class="st0" d="M135.7,96.8v-1.2"/>
<path id="path242" class="st0" d="M135.7,99.9V98"/>
<path id="path244" class="st0" d="M138,95.1v-1.8"/>
<path id="path246" class="st0" d="M138,99.9v-3.6"/>
<line id="line248" class="st0" x1="140.2" y1="99.9" x2="140.2" y2="93.3"/>
<line id="line250" class="st0" x1="142.4" y1="99.9" x2="142.4" y2="93.3"/>
<line id="line252" class="st0" x1="144.6" y1="99.9" x2="144.6" y2="93.3"/>
<line id="line254" class="st0" x1="146.9" y1="99.9" x2="146.9" y2="93.3"/>
<line id="line256" class="st0" x1="149.1" y1="99.9" x2="149.1" y2="93.3"/>
<line id="line258" class="st0" x1="151" y1="99.9" x2="151" y2="93.3"/>
<path id="path260" class="st0" d="M142.3,211.3c1.2,0,2.4,0,3.7,0.1"/>
<path id="path262" class="st0" d="M136.5,211.4h2.9"/>
<path id="path264" class="st0" d="M131.9,211.5l3.4-0.1"/>
<path id="path266" class="st0" d="M111.2,211.8c1.9,0,3.7,0,5.6,0"/>
<path id="path268" class="st0" d="M93.5,211.8h13"/>
<path id="path270" class="st0" d="M114.8,47.7c1.7-0.3,2.9-2,2.6-3.7"/>
<path id="path272" class="st0" d="M112.2,47.8c0.4,0,0.9,0,1.3,0"/>
<path id="path274" class="st0" d="M71,32.1c0,0,11.2-1.5,19.4,6"/>
<path id="path276" class="st0" d="M106.5,37.1c-2.3,1-3.6,3.4-3.2,5.9"/>
<path id="path278" class="st0" d="M79.8,28.8c0,0,16,6.4,17.7,7.5c1.7,1.1,4.9,1.7,6,1.4c0.8-0.2,1.6-0.4,2.5-0.4"/>
<path id="path280" class="st0" d="M75.4,28.6c3.5,0.7,6.9,1.9,10.2,3.5c4.9,2.5,11.5,5.2,11.5,5.2s4.5,2.1,6,1.4
c1.4-0.7,1.8-0.6,1.8-0.6"/>
<path id="path282" class="st0" d="M72.5,29.2c0,0,2.9-0.3,7.8,1.8c4.9,2.1,16.8,7.7,16.8,7.7s4.2,1.8,5.2,1.1
c0.5-0.4,1.1-0.6,1.7-0.7"/>
<path id="path284" class="st0" d="M81,32.3c0.6,0.2,1.2,0.4,1.8,0.5"/>
<path id="path286" class="st0" d="M76.9,30.9c1,0.3,2,0.7,3,1.1"/>
<path id="path288" class="st0" d="M71.5,30.3c1.4-0.3,2.9-0.3,4.3,0.2"/>
<path id="path290" class="st0" d="M71.6,34.4c0,0,9.4,2.9,12.6,5.7c3.1,2.8,14.8,15.1,14.5,16.7"/>
<path id="path292" class="st0" d="M99.6,55.3c0,0-13-15.5-17.5-17.6c-4.6-2.1-9.8-4.3-9.8-4.3"/>
<path id="path294" class="st0" d="M88.7,41.6c4.2,3.8,7.8,8.3,11.5,12.6"/>
<path id="path296" class="st0" d="M83.9,37.9c0.9,0.6,1.7,1.2,2.5,1.9"/>
<path id="path298" class="st0" d="M81.4,36.3c0.5,0.3,1,0.5,1.4,0.8"/>
<path id="path300" class="st0" d="M74.9,33.2c1.1,0.5,2.1,1,3.2,1.5"/>
<path id="path302" class="st0" d="M91.8,43.5c-0.4-0.4-0.8-0.8-1.3-1.2"/>
<path id="path304" class="st0" d="M95.1,46.9c-0.8-0.9-1.6-1.7-2.4-2.6"/>
<path id="path306" class="st0" d="M97.8,49.8l-1.1-1.2"/>
<path id="path308" class="st0" d="M100.6,52.9l-2.1-2.3"/>
<path id="path310" class="st0" d="M106.8,37.6c0,0-2.8,1.5-2.7,4.1"/>
<polyline id="polyline312" class="st0" points="124.1,99.9 124.1,103.8 124.1,105.1 "/>
<line id="line314" class="st0" x1="127.2" y1="99.9" x2="127.2" y2="109.3"/>
<path id="path316" class="st0" d="M123,150.1c0,1,0,1.9,0,2.9"/>
<path id="path318" class="st0" d="M123.1,146.3c0,0.8-0.1,1.6-0.1,2.4"/>
<path id="path320" class="st0" d="M123.3,142.7c0,0.6,0,1.1-0.1,1.7"/>
<path id="path322" class="st0" d="M123.6,135.6c-0.1,1.7-0.2,3.3-0.3,5"/>
<path id="path324" class="st0" d="M123.9,128.8l-0.2,5.5"/>
<path id="path326" class="st0" d="M124.9,169.2c0,0.6-0.1,1.1-0.2,1.7"/>
<path id="path328" class="st0" d="M125.2,165.8c0,0.5-0.1,1-0.1,1.4"/>
<path id="path330" class="st0" d="M125.5,161.2c0,0.6-0.1,1.1-0.1,1.7"/>
<path id="path332" class="st0" d="M125.8,155.6c0,1.1-0.1,2.3-0.2,3.4"/>
<path id="path334" class="st0" d="M126.1,148.6c0,1-0.1,2.1-0.2,3.1"/>
<path id="path336" class="st0" d="M126.7,139.7c-0.2,2-0.3,4-0.4,6"/>
<path id="path338" class="st0" d="M126.8,135.3c0,1,0,2-0.1,2.9"/>
<path id="path340" class="st0" d="M127,123.5c-0.1,3.3-0.1,6.5-0.1,10.1"/>
<path id="path342" class="st0" d="M124.8,180.5c-0.1,0.6-0.3,1.3-0.4,1.9"/>
<path id="path344" class="st0" d="M125.6,177.2c-0.1,0.6-0.2,1.3-0.4,1.9"/>
<path id="path346" class="st0" d="M128,159.2c-0.6,5.7-1.3,11.3-2.3,17"/>
<path id="path348" class="st0" d="M130.3,99.9c-0.2,14.5-0.3,29-1.1,43.5c-0.2,4.1-0.5,8.3-0.9,12.4"/>
<path id="path350" class="st0" d="M125.4,185c-0.2,0.8-0.4,1.5-0.6,2.3"/>
<path id="path352" class="st0" d="M126.8,180.5c-0.3,0.9-0.5,1.9-0.9,2.8"/>
<path id="path354" class="st0" d="M129.1,167.6c-0.4,3.8-1.1,7.6-2,11.4"/>
<path id="path356" class="st0" d="M132.1,99.9c0,21.7,0,43.3-2.7,64.8"/>
<path id="path358" class="st0" d="M126.2,189.9c-0.1,0.5-0.3,1.1-0.4,1.6"/>
<path id="path360" class="st0" d="M127.1,186.4c-0.1,0.6-0.3,1.2-0.5,1.9"/>
<path id="path362" class="st0" d="M129.7,173.7c-0.5,3.1-1.1,6.1-1.8,9.2"/>
<path id="path364" class="st0" d="M133.9,99.9c-0.4,23.1-0.8,46.1-3.5,69.1"/>
<path id="path366" class="st0" d="M127.3,192.5c-0.2,1-0.5,2.1-0.8,3.1"/>
<path id="path368" class="st0" d="M135.7,99.9c-0.5,30.4-0.8,61.2-8,90.8"/>
<path id="path370" class="st0" d="M127.1,198c-0.1,0.4-0.2,0.8-0.3,1.2"/>
<path id="path372" class="st0" d="M128,194.8c-0.1,0.5-0.2,0.9-0.3,1.4"/>
<path id="path374" class="st0" d="M137.5,99.9c-0.9,31.1-0.5,62.6-9,92.5"/>
<path id="path376" class="st0" d="M128.7,197.7c-0.3,1.1-0.5,2.1-0.8,3.2"/>
<path id="path378" class="st0" d="M139.3,99.9c-0.6,16.1,0.1,32.2-2,48.6v3.5c-1.4,15-3.8,30.1-8.2,44.2"/>
<path id="path380" class="st0" d="M141.2,99.9c0,0-0.3,25.4-1,37.3c-0.6,9.1-2.7,31.8-5.3,42.3c-2.2,8.6-6,21.9-6.6,24.3"/>
<path id="path382" class="st0" d="M143,99.9c0,0-0.4,27.2-1.1,38c-0.6,8.6-3,32.8-5.8,43c-2.4,8.8-7.4,25.1-7.8,27"/>
<path id="path384" class="st0" d="M144.8,99.9c0,0-0.4,28.9-1.2,38.7c-0.6,8.1-3.3,33.8-6.3,43.8c-2.7,9-6.3,20.9-6.7,22.4l-1.7,5.5
"/>
<path id="path386" class="st0" d="M146.6,99.9c0,0-0.5,30.7-1.2,39.5c-0.6,7.6-3.6,34.7-6.7,44.6c-3,9.1-6.9,21.8-7.1,22.7
c0,0-1,3.3-1.1,3.7"/>
<path id="path388" class="st0" d="M148.4,99.9c0,0-0.6,32.5-1.3,40.2c-0.7,7.2-3.9,35.7-7.2,45.4c-3.2,9.3-7.4,22.6-7.5,23.1
l-0.6,1.8"/>
<path id="path390" class="st0" d="M150.2,99.9c0,0-0.7,34.3-1.4,40.9c-0.7,6.6-4.2,36.7-7.7,46.1c-3.5,9.4-8,23.4-8,23.4"/>
<path id="path392" class="st0" d="M114.2,180.4c0.1,0.6,0.3,1.2,0.4,1.9"/>
<path id="path394" class="st0" d="M113.5,177.1c0.1,0.6,0.2,1.3,0.4,1.9"/>
<path id="path396" class="st0" d="M111.1,160.1c0.6,5.3,1.3,10.6,2.2,16"/>
<path id="path398" class="st0" d="M108.7,99.9c0.1,6.8,0.2,13.5,0.4,20.3"/>
<path id="path400" class="st0" d="M113.6,184.9c0.2,0.8,0.4,1.5,0.6,2.3"/>
<path id="path402" class="st0" d="M112.3,180.4c0.3,0.9,0.5,1.9,0.9,2.8"/>
<path id="path404" class="st0" d="M109.9,167.5c0.4,3.8,1.1,7.6,2,11.4"/>
<path id="path406" class="st0" d="M108.5,154.3c0.3,3.5,0.7,6.9,1.1,10.4"/>
<path id="path408" class="st0" d="M106.6,99.9c0,8.6,0.4,17,0.5,25.6"/>
<path id="path410" class="st0" d="M112.8,189.8c0.1,0.5,0.3,1.1,0.4,1.6c0,0,1,5,1.4,7.1"/>
<path id="path412" class="st0" d="M112,186.3c0.1,0.6,0.3,1.2,0.5,1.9"/>
<path id="path414" class="st0" d="M109.3,173.6c0.5,3.1,1.1,6.1,1.8,9.2"/>
<path id="path416" class="st0" d="M106.8,148.3c0.5,6.9,1.1,13.7,1.9,20.5"/>
<path id="path418" class="st0" d="M104.8,99.9c0.2,9.6,0.6,19.2,0.9,28.8"/>
<path id="path420" class="st0" d="M111.7,192.4c0.2,1,0.5,2.1,0.8,3.1"/>
<path id="path422" class="st0" d="M103.1,99.9c0.5,30.4,1,61.1,8.2,90.8"/>
<path id="path424" class="st0" d="M111.9,197.9c0.1,0.4,0.2,0.8,0.3,1.2c0,0,0.7,2.9,1,4"/>
<path id="path426" class="st0" d="M111.1,194.7l0.3,1.4"/>
<path id="path428" class="st0" d="M101.3,99.9c0.9,31.1,0.7,62.5,9.1,92.4"/>
<path id="path430" class="st0" d="M110.3,197.6c0.3,1.1,0.5,2.1,0.8,3.2c0,0,1.7,6,2.1,6.4"/>
<path id="path432" class="st0" d="M99.6,99.9c0.6,16.1,0,32.1,2.1,48.5v3.5c1.4,15.1,3.8,30,8.2,44.2"/>
<path id="path434" class="st0" d="M97.5,99.9c0,0,0.7,25.3,1.4,37.2c0.6,9.1,2.7,31.8,5.3,42.3c2.2,8.6,7.3,27.2,8.3,29.3"/>
<path id="path436" class="st0" d="M96.1,99.9c0,0,0.3,27.1,1.1,37.9c0.6,8.6,3,32.8,5.8,43c2.4,8.8,7.4,25.1,7.8,27"/>
<path id="path438" class="st0" d="M94.3,99.9c0,0,0.3,28.8,1.1,38.6c0.6,8.1,3.3,33.8,6.3,43.8c2.7,9,6.3,20.9,6.7,22.4l1.7,5.5v0.1
"/>
<path id="path440" class="st0" d="M92.2,99.9c0,0,0.7,30.6,1.4,39.4c0.6,7.6,3.6,34.7,6.7,44.6c3,9.1,6.9,21.8,7.1,22.7
c0,0,1,3.3,1.1,3.7l0.1,0.1"/>
<path id="path442" class="st0" d="M90.5,99.9c0,0,0.7,32.4,1.4,40.1c0.7,7.1,3.9,35.7,7.2,45.4c3.2,9.3,7.4,22.6,7.5,23.1l0.6,1.8
l0.1,0.1"/>
<path id="path444" class="st0" d="M88.8,99.9c0,0,0.7,34.2,1.4,40.8c0.7,6.6,4.2,36.7,7.7,46.1s8,23.4,8,23.4"/>
<line id="line446" class="st0" x1="105.8" y1="210.2" x2="105.9" y2="210.4"/>
<path id="path448" class="st0" d="M110.6,110.3c-0.1,1,0,2,0.2,2.9"/>
<path id="path450" class="st0" d="M110.7,105c0,1,0,2.1,0,3.1"/>
<path id="path452" class="st0" d="M110.8,99.9c0,0.9,0,1.8-0.1,2.7"/>
<path id="path454" class="st0" d="M112.5,39.6c1.7-0.4,3.5-0.5,5.2-0.5c0,0,10.8-0.8,14.7,6.6c3.9,7.4,3.5,17.2,3.8,18.5
c0.3,1.3,0.1,5.5,5.3,9.7s5.9,17.2,5.9,17.2v0.3"/>
<path id="path456" class="st0" d="M118.6,40.4c4.7,0.3,9.1,1.3,11.8,5.4c3.1,4.7,3.9,11.4,4.4,16.8c0.3,3.2,0.8,6.4,2.6,9.1"/>
<path id="path458" class="st0" d="M118.9,42.5c4.3,0.3,8.3,1.3,10.8,5.1c2.9,4.3,3.6,10.5,4,15.5c0.3,2.9,0.7,5.9,2.4,8.4"/>
<path id="path460" class="st0" d="M119.2,44.6c3.9,0.3,7.4,1.2,9.7,4.7c2.6,4,3.3,9.7,3.7,14.2c0.3,2.7,0.7,5.4,2.2,7.7"/>
<path id="path462" class="st0" d="M119.5,46.8c3.4,0.2,6.6,1.2,8.6,4.4c2.3,3.6,2.9,8.8,3.3,13c0.2,2.5,0.6,5,2,7"/>
<path id="path464" class="st0" d="M119.8,48.9c3,0.2,5.8,1.2,7.6,4.1c2,3.3,2.6,7.9,3,11.6c0.1,2.2,0.7,4.4,1.8,6.3"/>
<path id="path466" class="st0" d="M120.1,51.1c2.7,0,5.2,1.5,6.5,3.8c1.7,3,2.2,7.1,2.6,10.4c0.1,2,0.6,3.9,1.6,5.6"/>
<path id="path468" class="st0" d="M124.6,55.1c1.9,1.9,2.6,4.9,3,7.5s0.3,5.8,1.9,8.1"/>
<path id="path470" class="st0" d="M120.4,53.2c0.9,0.1,1.7,0.3,2.5,0.6"/>
<path id="path472" class="st0" d="M127,66.6c0.1,1.4,0.5,2.7,1.2,3.9"/>
<path id="path474" class="st0" d="M120.7,55.3c4.4,0.3,5.5,5.5,6,9.1"/>
<path id="path476" class="st0" d="M121,57.5c1.3,0.1,2.5,1,3.4,2.9c0.8,2.1,1.3,4.3,1.5,6.5c0.1,1.2,0.4,2.4,1.1,3.4"/>
<path id="path478" class="st0" d="M123.7,62.4c0.4,1.3,0.7,2.6,0.9,4c0,1.3,0.4,2.6,1,3.7"/>
<path id="path480" class="st0" d="M121.3,59.6c0.6,0.1,1.1,0.4,1.4,0.9"/>
<path id="path482" class="st0" d="M123.6,67.8c0.1,0.8,0.3,1.5,0.7,2.2"/>
<path id="path484" class="st0" d="M121.6,61.8c1.1,0.4,1.4,3,1.6,4"/>
<path id="path486" class="st0" d="M122.4,67.8c0,0.7,0.3,1.4,0.6,2"/>
<path id="path488" class="st0" d="M122,63.9c0,0.7,0.1,1.3,0.2,2"/>
<path id="path490" class="st0" d="M141.7,76.1c3.5,4.3,4.3,10.1,4.7,15.5"/>
<path id="path492" class="st0" d="M140.4,77.2c3.2,3.9,4,9.2,4.3,14.4"/>
<path id="path494" class="st0" d="M139.1,78.4c2.9,3.5,3.7,8.3,4,13.3"/>
<path id="path496" class="st0" d="M137.8,79.5c2.6,3.1,3.3,7.5,3.6,12.2"/>
<path id="path498" class="st0" d="M136.5,80.6c2.2,2.7,3,6.6,3.2,11.1"/>
<path id="path500" class="st0" d="M135.2,81.7c1.9,2.4,2.7,5.7,2.8,10"/>
<path id="path502" class="st0" d="M134,82.8c1.6,2,2.4,4.8,2.4,8.9"/>
<path id="path504" class="st0" d="M132.7,83.9c1.3,1.6,2,4,2.1,7.8"/>
<path id="path506" class="st0" d="M132.9,89.2c0.1,0.8,0.1,1.7,0.1,2.5"/>
<path id="path508" class="st0" d="M131.4,85c0.5,0.6,0.8,1.3,1.1,2"/>
<path id="path510" class="st0" d="M130.1,86.2c0.6,0.8,1.4,2.2,1.3,5.6"/>
<path id="path512" class="st0" d="M129.7,90.6c0,0.4,0,0.7,0,1.1"/>
<path id="path514" class="st0" d="M128.8,87.3c0.3,0.4,0.5,0.8,0.6,1.3"/>
<path id="path516" class="st0" d="M128.1,90c0,0.6,0,1.2,0,1.7"/>
<path id="path518" class="st0" d="M127.6,88.4c0.3,0.3,0.4,0.7,0.5,1.1"/>
<path id="path520" class="st0" d="M98.2,70.8c0.9-1.3,1.6-2.6,2.1-4.1c0.3-2.4,0-5.2,1-7.7c1.8-4.2,2.5-8.7,3.8-13
c0.4-1.1,1.1-2.2,2.1-2.9"/>
<path id="path522" class="st0" d="M106.9,46.7c-1,1.7-1.3,3.9-1.8,5.8c-0.5,2.1-1.1,4.2-1.8,6.3c-0.7,2-1.1,4.2-1.2,6.3
c-0.2,2-0.9,3.9-2,5.6"/>
<path id="path524" class="st0" d="M108,48.6c-1.4,2.4-1.4,5.5-2.1,8.3c-1.4,3.5-1.7,7.3-2.8,11.2c-0.3,0.8-0.6,1.6-1,2.4"/>
<path id="path526" class="st0" d="M109.7,49.8c-0.6,0.6-1,1.4-1.2,2.3c-0.7,3-1.3,6.6-2.4,9.6c-0.2,0.5-0.3,1.1-0.5,1.6
c-0.3,1.4-0.2,2.8-0.4,4.1c-0.2,1.1-0.6,2.1-1.2,3.1"/>
<path id="path528" class="st0" d="M108.5,59.4c-0.4,1.9-1.2,3.7-1.4,5.6c-0.3,1.9-0.2,3.7-1.1,5.3"/>
<path id="path530" class="st0" d="M110.5,52c-1.2,1-1.2,3.6-1.5,5"/>
<path id="path532" class="st0" d="M111.3,54.3c-0.4,0.5-0.6,1.2-0.6,1.8c-0.3,2.5-0.8,4.9-1.4,7.4c-0.1,0.4-0.2,0.8-0.3,1.2
c-0.2,1-0.4,2.1-0.4,3.1c-0.1,0.8-0.2,1.6-0.5,2.4"/>
<path id="path534" class="st0" d="M111.5,60.7c-1,2.9-1,6-1.6,9.3"/>
<path id="path536" class="st0" d="M112.1,56.4c-0.3,0.7-0.4,1.5-0.4,2.3"/>
<path id="path538" class="st0" d="M111.8,67.7c-0.1,0.7-0.1,1.5,0,2.2"/>
<path id="path540" class="st0" d="M112.7,62.7c-0.1,1-0.3,2-0.5,3"/>
<path id="path542" class="st0" d="M112.9,58.7c0,0.7,0,1.3,0,2"/>
<path id="path544" class="st0" d="M90.2,91.5C89.8,85.2,90.8,78.2,96,74"/>
<path id="path546" class="st0" d="M92.2,91.5c-0.3-5.6,0.6-12.1,5.3-15.9"/>
<path id="path548" class="st0" d="M94.2,91.5c-0.3-4.9,0.4-10.9,4.6-14.3"/>
<path id="path550" class="st0" d="M96.3,91.6c-0.2-4.2,0.3-9.7,4-12.7"/>
<path id="path552" class="st0" d="M98.3,91.6c-0.2-3.5,0.1-8.5,3.4-11.2"/>
<path id="path554" class="st0" d="M100.3,91.6c-0.1-2.8,0-7.3,2.7-9.6"/>
<path id="path556" class="st0" d="M102.4,91.6c-0.1-2.1-0.1-6.1,2.1-8"/>
<path id="path558" class="st0" d="M104.7,87.3c0.2-0.8,0.6-1.5,1.2-2.1"/>
<path id="path560" class="st0" d="M104.4,91.6c0-0.8,0-1.6,0-2.3"/>
<path id="path562" class="st0" d="M106.6,87.9c0.1-0.4,0.3-0.8,0.6-1.1"/>
<path id="path564" class="st0" d="M106.5,91.6c0-0.6-0.1-1.2-0.1-1.8"/>
<path id="path566" class="st0" d="M108.5,91.6c0,0-0.5-2.6,0.2-3.3"/></g> </svg>
If you get a reference to an SVG element, you can call getBBox() on it. That will return the bounding box of the element and its contents. However that bounding box does not include any transform that is applied to that element.
For example if we call getBBox() on your group:
document.querySelect("."svg-merge-item-wrapper"").getBBox();
// returns {x: 70.88888549804688,
// y: 28.600000381469727,
// width: 99.08346557617188,
// height: 183.74867248535156}
If we want the bounds of the transformed group, we need to call getBBox() on an element that contains that transformed group.
<g><!-- <=== wrapper group -->
<g class="svg-merge-item-wrapper" transform="scale(0.25) rotate(90 42.5 42.5) translate(42.5 42.5)">
...all the other elements...
</g>
</g>
document.querySelect("."svg-merge-item-wrapper"").parentElement.getBBox();
// returns {x: -42.4621696472168,
// y: 28.34722137451172,
// width: 45.93716812133789,
// height: 24.77086639404297}
... which are the real bounds of the group.
To centre the group in your SVG viewBox, it's just a simple bit of arithmetic to work out how much the group needs to be moved.
dx = newX - oldX
newX = (svgWidth - groupWidth) / 2 = (85 - 45.937) / 2 = 19.53
dx = 19.53 - (-42.46) = 61.99
dy = (svgHeight - groupHeight) / 2 - oldY
dy = (85 - 24.77) / 2 - 28.35 = 1.77
So to centre the group we need to add the transform: translate(61.99 1.77).
We can either add that to our temporary wrapping group. Or, if we don't want to keep that, just add it to the front (ie. first) of the existing group transform.
<g class="svg-merge-item-wrapper" transform="translate(61.99 1.77) scale(0.25) rotate(90 42.5 42.5) translate(42.5 42.5)">
I've done it manually here. But obviously this could also be easily done at run-time with JS.
Demo
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="85mm"
height="85mm"
viewBox="0 0 85 85">
<style type="text/css">
svg {
border: 1px solid red;
position: absolute;
top: 10px;
left: 10px;
overflow: hidden;
}
</style>
<!-- TRANSFORMATION HERE-->
<g class="svg-merge-item-wrapper" transform="translate(61.99 1.77) scale(0.25) rotate(90 42.5 42.5) translate(42.5 42.5)">
<!-- TRANSFORMATION HERE-->
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-width:0.375;stroke-miterlimit:3.9892;}
</style>
<path id="path6" class="st0" d="M119.2,35.9c0,0,11.2,0,15,7.4c3.8,7.4,4.2,17.8,4.5,19.2c0.3,1.4,0.3,6.3,6,10.8
c5.6,4.5,6.3,18.5,6.3,18.5s1.4,0,1.4,1.7v5.2c0,0.6-0.4,1-1,1c0,0,0,18.5-0.4,28.7c-0.4,10.1-4.2,43-6,50
c-1.8,7-10.5,31.9-10.5,31.9h-29.7c0,0-9.4-21.7-11.9-36.4s-5.3-24.8-5.6-39.5c-0.3-14.7,0-34.6,0-34.6s-2.1,0.3-2.1-1.4v-5.6
c0-0.8,0.6-1.4,1.3-1.4c0,0,0,0,0.1,0c0,0,0-12.6,4.5-16.8c4.5-4.2,6-8,6.3-9.4c0.3-1.4,0.7-7.7,0.7-7.7c1.6-2.2,2.7-4.7,3.1-7.3
c0.7-4.2,1.1-5.6,1.1-5.6s2.8-6,5.9-7c1.7-0.6,3.5-1,5.3-1.4C115.4,36.1,117.3,35.9,119.2,35.9z"/>
<path id="path8" class="st0" d="M88.4,91.5v-0.3c0,0,0-12.1,4.3-16.1c4.3-4,5.7-7.7,6-9.1c0.2-0.9,0.4-3.9,0.6-5.8
c0.1-1,0.4-2,0.9-2.8c1.1-1.8,1.8-3.8,2.2-5.9c0.7-4,1-5.4,1-5.4s2.7-5.7,5.6-6.7c1.6-0.6,3.3-1,5-1.3c1.8-0.2,3.5-0.3,5.3-0.3
c0,0,10.6,0,14.3,7.1c3.7,7.1,3.7,17.5,4.1,18.8c0.4,4,2.4,7.7,5.6,10.1c5.3,4.4,6.3,17.8,6.3,17.8v0.3"/>
<path id="path10" class="st0" d="M98.2,57.6c0,0-10.5-15-15.7-17.5s-11.9-4.5-10.8-6.6c0,0,7-2.1,18.5,4.5s12.1,7.4,12.1,7.4"/>
<path id="path12" class="st0" d="M107,38.4c0,0-0.1-1.8-1.5-1.8c-1.4,0-2.4,1-5.6,0c-3.2-1-3.1-1.4-3.5-1.4
c-0.3,0-14.3-6.6-18.2-6.6s-6.3,0-7,2.1c-0.7,2.1,0,2.7,0,2.7l0.3,0.1"/>
<circle id="circle14" class="st0" cx="112.2" cy="44.3" r="1.4"/>
<circle id="circle16" class="st0" cx="111.8" cy="44" r="0.7"/>
<line id="line18" class="st0" x1="86.6" y1="91.5" x2="151" y2="91.9"/>
<line id="line20" class="st0" x1="151.3" y1="99.9" x2="87.3" y2="99.9"/>
<path id="path22" class="st0" d="M151.2,118.6c0,0,1.5,0.5,1.5-1.6v-9.8c0,0-0.3-2.1,3.8-1.4c4.2,0.7,9.4,2.1,10.8,8.4
c0.8,3.8,1,7.7,0.8,11.6c-0.1,1.6-0.2,3.2-0.5,4.8c-1,5.3-3.1,16.6-7.5,24.5c-4.1,7.2-13.5,20.9-17.5,30.9"/>
<path id="path24" class="st0" d="M151.3,104.8c0,0,2-1.4,5.9-0.6c4.2,0.9,10.1,2.4,11.8,9.6c1.6,6.5,0.9,11.6,0.2,16.7
c-0.7,4.7-1.7,9.3-3.1,13.8c-0.9,2.9-3.4,9.8-5.8,13.6c-1.3,2-13.6,21.7-16.1,27.9s-3.5,8-3.5,16.8c0,7.3,2.8,7.7,2.8,7.7h-2.1
c0,0-4.6-6.2-1.1-17.2"/>
<path id="path26" class="st0" d="M113.2,105.1h11.5c4.6,5.4,5.2,13.1,1.7,19.2c-6,10.8-6.3,7.3-7,16.8c-0.6,7.9,1.5,17,2.2,19.8
c0.3,1,0.3,2,0.2,3c-0.3,2.3-1.9,4.7-8-1.4c-7.7-7.7-8.6-23.2-8.7-27.8c0-0.8,0.1-1.7,0.2-2.5c0.9-4.3,2.4-8.5,4.3-12.4
C112.9,113.9,113.2,105.5,113.2,105.1z"/>
<path id="path28" class="st0" d="M104.8,210.4H93.7c-0.4,0.3-0.5,1-0.2,1.4c0.1,0.2,0.3,0.3,0.5,0.3c1.4,0.7,51.7-0.3,51.7-0.3
c0.4-0.4,0.4-1,0-1.4h-11.2"/>
<polyline id="polyline30" class="st0" points="113.1,106.9 125.8,106.9 126,106.8 "/>
<line id="line32" class="st0" x1="118" y1="165.8" x2="121.1" y2="165.8"/>
<line id="line34" class="st0" x1="116.6" y1="164.8" x2="121.7" y2="164.8"/>
<line id="line36" class="st0" x1="121.9" y1="163.9" x2="115.5" y2="163.9"/>
<line id="line38" class="st0" x1="114.5" y1="163.1" x2="122" y2="163.1"/>
<line id="line40" class="st0" x1="122" y1="162.1" x2="113.6" y2="162.1"/>
<line id="line42" class="st0" x1="112.6" y1="161" x2="121.7" y2="161"/>
<polyline id="polyline44" class="st0" points="112.9,108.5 126.9,108.5 127,108.5 "/>
<polyline id="polyline46" class="st0" points="112.6,110.1 127.5,110.1 127.6,110.1 "/>
<polyline id="polyline48" class="st0" points="112.4,111.6 127.9,111.6 128.1,111.6 "/>
<line id="line50" class="st0" x1="111.6" y1="114.8" x2="128.7" y2="114.8"/>
<line id="line52" class="st0" x1="128.8" y1="116.4" x2="111.2" y2="116.4"/>
<line id="line54" class="st0" x1="110.5" y1="118.3" x2="114.6" y2="118.3"/>
<line id="line56" class="st0" x1="115" y1="118.3" x2="116" y2="118.3"/>
<line id="line58" class="st0" x1="117" y1="118.3" x2="125.5" y2="118.3"/>
<line id="line60" class="st0" x1="125.8" y1="118.3" x2="128.6" y2="118.3"/>
<line id="line62" class="st0" x1="114.2" y1="120.3" x2="115.2" y2="120.3"/>
<line id="line64" class="st0" x1="116.2" y1="120.3" x2="121.3" y2="120.3"/>
<line id="line66" class="st0" x1="122.1" y1="120.3" x2="124.1" y2="120.3"/>
<line id="line68" class="st0" x1="124.6" y1="120.3" x2="125.8" y2="120.3"/>
<line id="line70" class="st0" x1="126.7" y1="120.3" x2="127.5" y2="120.3"/>
<line id="line72" class="st0" x1="109.5" y1="120.3" x2="113.6" y2="120.3"/>
<line id="line74" class="st0" x1="106.6" y1="127.7" x2="124.6" y2="127.7"/>
<polyline id="polyline76" class="st0" points="128.5,113.2 128.2,113.2 112,113.2 "/>
<ellipse id="ellipse78" class="st0" cx="113.4" cy="44.7" rx="4.7" ry="3.8"/>
<path id="path80" class="st0" d="M123.4,125.9l2.2,0.1"/>
<path id="path82" class="st0" d="M119.3,125.8h2.4"/>
<path id="path84" class="st0" d="M116.4,125.8h1.5"/>
<path id="path86" class="st0" d="M112.5,125.9h2.4"/>
<path id="path88" class="st0" d="M109.6,125.9h1.4"/>
<path id="path90" class="st0" d="M107.2,125.9h1.1"/>
<path id="path92" class="st0" d="M107.5,129.4h-1.3"/>
<path id="path94" class="st0" d="M110.6,129.3h-1.8"/>
<path id="path96" class="st0" d="M116.1,129.3h-4.1"/>
<path id="path98" class="st0" d="M123.6,129.4c-2,0-4-0.1-6.1-0.1"/>
<line id="line100" class="st0" x1="105.7" y1="131.1" x2="122.4" y2="131.1"/>
<path id="path102" class="st0" d="M107.5,132.8h-2.1"/>
<path id="path104" class="st0" d="M113.7,132.8h-4.9"/>
<path id="path106" class="st0" d="M121.3,132.8h-6.2"/>
<path id="path108" class="st0" d="M107.7,134.5h-2.5"/>
<path id="path110" class="st0" d="M114.4,134.5h-5.3"/>
<path id="path112" class="st0" d="M120.5,134.5h-4.6"/>
<line id="line114" class="st0" x1="105.2" y1="136.2" x2="120" y2="136.2"/>
<path id="path116" class="st0" d="M117.2,137.9h2.6"/>
<path id="path118" class="st0" d="M111.7,137.9h3.8"/>
<path id="path120" class="st0" d="M105.3,137.9h5"/>
<line id="line122" class="st0" x1="119.7" y1="139.3" x2="105.4" y2="139.3"/>
<line id="line124" class="st0" x1="105.6" y1="140.7" x2="119.6" y2="140.7"/>
<line id="line126" class="st0" x1="119.5" y1="141.9" x2="105.8" y2="141.9"/>
<line id="line128" class="st0" x1="105.9" y1="143.2" x2="119.4" y2="143.2"/>
<line id="line130" class="st0" x1="119.4" y1="144.4" x2="106.1" y2="144.4"/>
<path id="path132" class="st0" d="M114.1,145.6h5.4"/>
<path id="path134" class="st0" d="M109.4,145.6h2.9"/>
<path id="path136" class="st0" d="M106.3,145.7h1.8"/>
<line id="line138" class="st0" x1="111.7" y1="159.8" x2="121.4" y2="159.7"/>
<line id="line140" class="st0" x1="121.2" y1="158.5" x2="110.9" y2="158.5"/>
<line id="line142" class="st0" x1="110.2" y1="157.3" x2="120.9" y2="157.3"/>
<line id="line144" class="st0" x1="109.6" y1="156.2" x2="120.7" y2="156.2"/>
<line id="line146" class="st0" x1="109.1" y1="154.9" x2="120.4" y2="154.9"/>
<line id="line148" class="st0" x1="120.2" y1="153.5" x2="108.5" y2="153.5"/>
<line id="line150" class="st0" x1="107.9" y1="152" x2="120" y2="152"/>
<line id="line152" class="st0" x1="107.6" y1="150.7" x2="119.8" y2="150.7"/>
<line id="line154" class="st0" x1="119.7" y1="149.2" x2="107.1" y2="149.2"/>
<path id="path156" class="st0" d="M115.5,148h4.1"/>
<path id="path158" class="st0" d="M110.7,148h3.3"/>
<path id="path160" class="st0" d="M106.8,148h2.4"/>
<line id="line162" class="st0" x1="119.5" y1="146.8" x2="106.6" y2="146.8"/>
<path id="path164" class="st0" d="M114.3,92.7h1.7"/>
<path id="path166" class="st0" d="M106.3,92.6c2.1,0,4.2,0,6.3,0"/>
<path id="path168" class="st0" d="M98.2,92.6h6.6"/>
<path id="path170" class="st0" d="M91.7,92.7l4.9-0.1"/>
<path id="path172" class="st0" d="M85.3,92.7h5"/>
<path id="path174" class="st0" d="M130,92.7h-5"/>
<path id="path176" class="st0" d="M136.5,92.6l-4.8,0.1"/>
<path id="path178" class="st0" d="M137.8,92.6c4.7,0,9.5,0,14.2,0.1h0.2"/>
<line id="line180" class="st0" x1="86.6" y1="99.9" x2="86.6" y2="93.3"/>
<line id="line182" class="st0" x1="88.9" y1="99.9" x2="88.9" y2="93.3"/>
<line id="line184" class="st0" x1="91.1" y1="99.9" x2="91.1" y2="93.3"/>
<path id="path186" class="st0" d="M93.3,94.3v-1.1"/>
<path id="path188" class="st0" d="M93.3,99.9v-4.4"/>
<path id="path190" class="st0" d="M95.6,95.4v-2.1"/>
<path id="path192" class="st0" d="M95.6,99.9v-3"/>
<line id="line194" class="st0" x1="97.8" y1="99.9" x2="97.8" y2="93.3"/>
<line id="line196" class="st0" x1="100" y1="99.9" x2="100" y2="93.3"/>
<line id="line198" class="st0" x1="102.2" y1="99.9" x2="102.2" y2="93.3"/>
<path id="path200" class="st0" d="M104.5,94.7v-1.5"/>
<path id="path202" class="st0" d="M104.5,99.9V96"/>
<path id="path204" class="st0" d="M106.7,95.2v-1.9"/>
<path id="path206" class="st0" d="M106.7,99.9v-3"/>
<path id="path208" class="st0" d="M108.9,94.7v-1.5"/>
<path id="path210" class="st0" d="M108.9,97.5v-1.7"/>
<path id="path212" class="st0" d="M108.9,99.9v-1.2"/>
<path id="path214" class="st0" d="M111.1,94.3v-1.1"/>
<path id="path216" class="st0" d="M111.1,99.6v-1.1"/>
<path id="path218" class="st0" d="M126.9,94.8v-1.6"/>
<path id="path220" class="st0" d="M126.9,99.9v-1.6"/>
<path id="path222" class="st0" d="M129.1,94.5v-1.3"/>
<path id="path224" class="st0" d="M129.1,97.3v-1.2"/>
<path id="path226" class="st0" d="M129.1,99.9v-1.4"/>
<path id="path228" class="st0" d="M131.3,94.4v-1.2"/>
<path id="path230" class="st0" d="M131.3,96.9v-1.2"/>
<path id="path232" class="st0" d="M131.3,99.9v-1.8"/>
<path id="path234" class="st0" d="M133.5,94.8v-1.6"/>
<path id="path236" class="st0" d="M133.5,99.9v-2.6"/>
<path id="path238" class="st0" d="M135.7,94.5v-1.3"/>
<path id="path240" class="st0" d="M135.7,96.8v-1.2"/>
<path id="path242" class="st0" d="M135.7,99.9V98"/>
<path id="path244" class="st0" d="M138,95.1v-1.8"/>
<path id="path246" class="st0" d="M138,99.9v-3.6"/>
<line id="line248" class="st0" x1="140.2" y1="99.9" x2="140.2" y2="93.3"/>
<line id="line250" class="st0" x1="142.4" y1="99.9" x2="142.4" y2="93.3"/>
<line id="line252" class="st0" x1="144.6" y1="99.9" x2="144.6" y2="93.3"/>
<line id="line254" class="st0" x1="146.9" y1="99.9" x2="146.9" y2="93.3"/>
<line id="line256" class="st0" x1="149.1" y1="99.9" x2="149.1" y2="93.3"/>
<line id="line258" class="st0" x1="151" y1="99.9" x2="151" y2="93.3"/>
<path id="path260" class="st0" d="M142.3,211.3c1.2,0,2.4,0,3.7,0.1"/>
<path id="path262" class="st0" d="M136.5,211.4h2.9"/>
<path id="path264" class="st0" d="M131.9,211.5l3.4-0.1"/>
<path id="path266" class="st0" d="M111.2,211.8c1.9,0,3.7,0,5.6,0"/>
<path id="path268" class="st0" d="M93.5,211.8h13"/>
<path id="path270" class="st0" d="M114.8,47.7c1.7-0.3,2.9-2,2.6-3.7"/>
<path id="path272" class="st0" d="M112.2,47.8c0.4,0,0.9,0,1.3,0"/>
<path id="path274" class="st0" d="M71,32.1c0,0,11.2-1.5,19.4,6"/>
<path id="path276" class="st0" d="M106.5,37.1c-2.3,1-3.6,3.4-3.2,5.9"/>
<path id="path278" class="st0" d="M79.8,28.8c0,0,16,6.4,17.7,7.5c1.7,1.1,4.9,1.7,6,1.4c0.8-0.2,1.6-0.4,2.5-0.4"/>
<path id="path280" class="st0" d="M75.4,28.6c3.5,0.7,6.9,1.9,10.2,3.5c4.9,2.5,11.5,5.2,11.5,5.2s4.5,2.1,6,1.4
c1.4-0.7,1.8-0.6,1.8-0.6"/>
<path id="path282" class="st0" d="M72.5,29.2c0,0,2.9-0.3,7.8,1.8c4.9,2.1,16.8,7.7,16.8,7.7s4.2,1.8,5.2,1.1
c0.5-0.4,1.1-0.6,1.7-0.7"/>
<path id="path284" class="st0" d="M81,32.3c0.6,0.2,1.2,0.4,1.8,0.5"/>
<path id="path286" class="st0" d="M76.9,30.9c1,0.3,2,0.7,3,1.1"/>
<path id="path288" class="st0" d="M71.5,30.3c1.4-0.3,2.9-0.3,4.3,0.2"/>
<path id="path290" class="st0" d="M71.6,34.4c0,0,9.4,2.9,12.6,5.7c3.1,2.8,14.8,15.1,14.5,16.7"/>
<path id="path292" class="st0" d="M99.6,55.3c0,0-13-15.5-17.5-17.6c-4.6-2.1-9.8-4.3-9.8-4.3"/>
<path id="path294" class="st0" d="M88.7,41.6c4.2,3.8,7.8,8.3,11.5,12.6"/>
<path id="path296" class="st0" d="M83.9,37.9c0.9,0.6,1.7,1.2,2.5,1.9"/>
<path id="path298" class="st0" d="M81.4,36.3c0.5,0.3,1,0.5,1.4,0.8"/>
<path id="path300" class="st0" d="M74.9,33.2c1.1,0.5,2.1,1,3.2,1.5"/>
<path id="path302" class="st0" d="M91.8,43.5c-0.4-0.4-0.8-0.8-1.3-1.2"/>
<path id="path304" class="st0" d="M95.1,46.9c-0.8-0.9-1.6-1.7-2.4-2.6"/>
<path id="path306" class="st0" d="M97.8,49.8l-1.1-1.2"/>
<path id="path308" class="st0" d="M100.6,52.9l-2.1-2.3"/>
<path id="path310" class="st0" d="M106.8,37.6c0,0-2.8,1.5-2.7,4.1"/>
<polyline id="polyline312" class="st0" points="124.1,99.9 124.1,103.8 124.1,105.1 "/>
<line id="line314" class="st0" x1="127.2" y1="99.9" x2="127.2" y2="109.3"/>
<path id="path316" class="st0" d="M123,150.1c0,1,0,1.9,0,2.9"/>
<path id="path318" class="st0" d="M123.1,146.3c0,0.8-0.1,1.6-0.1,2.4"/>
<path id="path320" class="st0" d="M123.3,142.7c0,0.6,0,1.1-0.1,1.7"/>
<path id="path322" class="st0" d="M123.6,135.6c-0.1,1.7-0.2,3.3-0.3,5"/>
<path id="path324" class="st0" d="M123.9,128.8l-0.2,5.5"/>
<path id="path326" class="st0" d="M124.9,169.2c0,0.6-0.1,1.1-0.2,1.7"/>
<path id="path328" class="st0" d="M125.2,165.8c0,0.5-0.1,1-0.1,1.4"/>
<path id="path330" class="st0" d="M125.5,161.2c0,0.6-0.1,1.1-0.1,1.7"/>
<path id="path332" class="st0" d="M125.8,155.6c0,1.1-0.1,2.3-0.2,3.4"/>
<path id="path334" class="st0" d="M126.1,148.6c0,1-0.1,2.1-0.2,3.1"/>
<path id="path336" class="st0" d="M126.7,139.7c-0.2,2-0.3,4-0.4,6"/>
<path id="path338" class="st0" d="M126.8,135.3c0,1,0,2-0.1,2.9"/>
<path id="path340" class="st0" d="M127,123.5c-0.1,3.3-0.1,6.5-0.1,10.1"/>
<path id="path342" class="st0" d="M124.8,180.5c-0.1,0.6-0.3,1.3-0.4,1.9"/>
<path id="path344" class="st0" d="M125.6,177.2c-0.1,0.6-0.2,1.3-0.4,1.9"/>
<path id="path346" class="st0" d="M128,159.2c-0.6,5.7-1.3,11.3-2.3,17"/>
<path id="path348" class="st0" d="M130.3,99.9c-0.2,14.5-0.3,29-1.1,43.5c-0.2,4.1-0.5,8.3-0.9,12.4"/>
<path id="path350" class="st0" d="M125.4,185c-0.2,0.8-0.4,1.5-0.6,2.3"/>
<path id="path352" class="st0" d="M126.8,180.5c-0.3,0.9-0.5,1.9-0.9,2.8"/>
<path id="path354" class="st0" d="M129.1,167.6c-0.4,3.8-1.1,7.6-2,11.4"/>
<path id="path356" class="st0" d="M132.1,99.9c0,21.7,0,43.3-2.7,64.8"/>
<path id="path358" class="st0" d="M126.2,189.9c-0.1,0.5-0.3,1.1-0.4,1.6"/>
<path id="path360" class="st0" d="M127.1,186.4c-0.1,0.6-0.3,1.2-0.5,1.9"/>
<path id="path362" class="st0" d="M129.7,173.7c-0.5,3.1-1.1,6.1-1.8,9.2"/>
<path id="path364" class="st0" d="M133.9,99.9c-0.4,23.1-0.8,46.1-3.5,69.1"/>
<path id="path366" class="st0" d="M127.3,192.5c-0.2,1-0.5,2.1-0.8,3.1"/>
<path id="path368" class="st0" d="M135.7,99.9c-0.5,30.4-0.8,61.2-8,90.8"/>
<path id="path370" class="st0" d="M127.1,198c-0.1,0.4-0.2,0.8-0.3,1.2"/>
<path id="path372" class="st0" d="M128,194.8c-0.1,0.5-0.2,0.9-0.3,1.4"/>
<path id="path374" class="st0" d="M137.5,99.9c-0.9,31.1-0.5,62.6-9,92.5"/>
<path id="path376" class="st0" d="M128.7,197.7c-0.3,1.1-0.5,2.1-0.8,3.2"/>
<path id="path378" class="st0" d="M139.3,99.9c-0.6,16.1,0.1,32.2-2,48.6v3.5c-1.4,15-3.8,30.1-8.2,44.2"/>
<path id="path380" class="st0" d="M141.2,99.9c0,0-0.3,25.4-1,37.3c-0.6,9.1-2.7,31.8-5.3,42.3c-2.2,8.6-6,21.9-6.6,24.3"/>
<path id="path382" class="st0" d="M143,99.9c0,0-0.4,27.2-1.1,38c-0.6,8.6-3,32.8-5.8,43c-2.4,8.8-7.4,25.1-7.8,27"/>
<path id="path384" class="st0" d="M144.8,99.9c0,0-0.4,28.9-1.2,38.7c-0.6,8.1-3.3,33.8-6.3,43.8c-2.7,9-6.3,20.9-6.7,22.4l-1.7,5.5
"/>
<path id="path386" class="st0" d="M146.6,99.9c0,0-0.5,30.7-1.2,39.5c-0.6,7.6-3.6,34.7-6.7,44.6c-3,9.1-6.9,21.8-7.1,22.7
c0,0-1,3.3-1.1,3.7"/>
<path id="path388" class="st0" d="M148.4,99.9c0,0-0.6,32.5-1.3,40.2c-0.7,7.2-3.9,35.7-7.2,45.4c-3.2,9.3-7.4,22.6-7.5,23.1
l-0.6,1.8"/>
<path id="path390" class="st0" d="M150.2,99.9c0,0-0.7,34.3-1.4,40.9c-0.7,6.6-4.2,36.7-7.7,46.1c-3.5,9.4-8,23.4-8,23.4"/>
<path id="path392" class="st0" d="M114.2,180.4c0.1,0.6,0.3,1.2,0.4,1.9"/>
<path id="path394" class="st0" d="M113.5,177.1c0.1,0.6,0.2,1.3,0.4,1.9"/>
<path id="path396" class="st0" d="M111.1,160.1c0.6,5.3,1.3,10.6,2.2,16"/>
<path id="path398" class="st0" d="M108.7,99.9c0.1,6.8,0.2,13.5,0.4,20.3"/>
<path id="path400" class="st0" d="M113.6,184.9c0.2,0.8,0.4,1.5,0.6,2.3"/>
<path id="path402" class="st0" d="M112.3,180.4c0.3,0.9,0.5,1.9,0.9,2.8"/>
<path id="path404" class="st0" d="M109.9,167.5c0.4,3.8,1.1,7.6,2,11.4"/>
<path id="path406" class="st0" d="M108.5,154.3c0.3,3.5,0.7,6.9,1.1,10.4"/>
<path id="path408" class="st0" d="M106.6,99.9c0,8.6,0.4,17,0.5,25.6"/>
<path id="path410" class="st0" d="M112.8,189.8c0.1,0.5,0.3,1.1,0.4,1.6c0,0,1,5,1.4,7.1"/>
<path id="path412" class="st0" d="M112,186.3c0.1,0.6,0.3,1.2,0.5,1.9"/>
<path id="path414" class="st0" d="M109.3,173.6c0.5,3.1,1.1,6.1,1.8,9.2"/>
<path id="path416" class="st0" d="M106.8,148.3c0.5,6.9,1.1,13.7,1.9,20.5"/>
<path id="path418" class="st0" d="M104.8,99.9c0.2,9.6,0.6,19.2,0.9,28.8"/>
<path id="path420" class="st0" d="M111.7,192.4c0.2,1,0.5,2.1,0.8,3.1"/>
<path id="path422" class="st0" d="M103.1,99.9c0.5,30.4,1,61.1,8.2,90.8"/>
<path id="path424" class="st0" d="M111.9,197.9c0.1,0.4,0.2,0.8,0.3,1.2c0,0,0.7,2.9,1,4"/>
<path id="path426" class="st0" d="M111.1,194.7l0.3,1.4"/>
<path id="path428" class="st0" d="M101.3,99.9c0.9,31.1,0.7,62.5,9.1,92.4"/>
<path id="path430" class="st0" d="M110.3,197.6c0.3,1.1,0.5,2.1,0.8,3.2c0,0,1.7,6,2.1,6.4"/>
<path id="path432" class="st0" d="M99.6,99.9c0.6,16.1,0,32.1,2.1,48.5v3.5c1.4,15.1,3.8,30,8.2,44.2"/>
<path id="path434" class="st0" d="M97.5,99.9c0,0,0.7,25.3,1.4,37.2c0.6,9.1,2.7,31.8,5.3,42.3c2.2,8.6,7.3,27.2,8.3,29.3"/>
<path id="path436" class="st0" d="M96.1,99.9c0,0,0.3,27.1,1.1,37.9c0.6,8.6,3,32.8,5.8,43c2.4,8.8,7.4,25.1,7.8,27"/>
<path id="path438" class="st0" d="M94.3,99.9c0,0,0.3,28.8,1.1,38.6c0.6,8.1,3.3,33.8,6.3,43.8c2.7,9,6.3,20.9,6.7,22.4l1.7,5.5v0.1
"/>
<path id="path440" class="st0" d="M92.2,99.9c0,0,0.7,30.6,1.4,39.4c0.6,7.6,3.6,34.7,6.7,44.6c3,9.1,6.9,21.8,7.1,22.7
c0,0,1,3.3,1.1,3.7l0.1,0.1"/>
<path id="path442" class="st0" d="M90.5,99.9c0,0,0.7,32.4,1.4,40.1c0.7,7.1,3.9,35.7,7.2,45.4c3.2,9.3,7.4,22.6,7.5,23.1l0.6,1.8
l0.1,0.1"/>
<path id="path444" class="st0" d="M88.8,99.9c0,0,0.7,34.2,1.4,40.8c0.7,6.6,4.2,36.7,7.7,46.1s8,23.4,8,23.4"/>
<line id="line446" class="st0" x1="105.8" y1="210.2" x2="105.9" y2="210.4"/>
<path id="path448" class="st0" d="M110.6,110.3c-0.1,1,0,2,0.2,2.9"/>
<path id="path450" class="st0" d="M110.7,105c0,1,0,2.1,0,3.1"/>
<path id="path452" class="st0" d="M110.8,99.9c0,0.9,0,1.8-0.1,2.7"/>
<path id="path454" class="st0" d="M112.5,39.6c1.7-0.4,3.5-0.5,5.2-0.5c0,0,10.8-0.8,14.7,6.6c3.9,7.4,3.5,17.2,3.8,18.5
c0.3,1.3,0.1,5.5,5.3,9.7s5.9,17.2,5.9,17.2v0.3"/>
<path id="path456" class="st0" d="M118.6,40.4c4.7,0.3,9.1,1.3,11.8,5.4c3.1,4.7,3.9,11.4,4.4,16.8c0.3,3.2,0.8,6.4,2.6,9.1"/>
<path id="path458" class="st0" d="M118.9,42.5c4.3,0.3,8.3,1.3,10.8,5.1c2.9,4.3,3.6,10.5,4,15.5c0.3,2.9,0.7,5.9,2.4,8.4"/>
<path id="path460" class="st0" d="M119.2,44.6c3.9,0.3,7.4,1.2,9.7,4.7c2.6,4,3.3,9.7,3.7,14.2c0.3,2.7,0.7,5.4,2.2,7.7"/>
<path id="path462" class="st0" d="M119.5,46.8c3.4,0.2,6.6,1.2,8.6,4.4c2.3,3.6,2.9,8.8,3.3,13c0.2,2.5,0.6,5,2,7"/>
<path id="path464" class="st0" d="M119.8,48.9c3,0.2,5.8,1.2,7.6,4.1c2,3.3,2.6,7.9,3,11.6c0.1,2.2,0.7,4.4,1.8,6.3"/>
<path id="path466" class="st0" d="M120.1,51.1c2.7,0,5.2,1.5,6.5,3.8c1.7,3,2.2,7.1,2.6,10.4c0.1,2,0.6,3.9,1.6,5.6"/>
<path id="path468" class="st0" d="M124.6,55.1c1.9,1.9,2.6,4.9,3,7.5s0.3,5.8,1.9,8.1"/>
<path id="path470" class="st0" d="M120.4,53.2c0.9,0.1,1.7,0.3,2.5,0.6"/>
<path id="path472" class="st0" d="M127,66.6c0.1,1.4,0.5,2.7,1.2,3.9"/>
<path id="path474" class="st0" d="M120.7,55.3c4.4,0.3,5.5,5.5,6,9.1"/>
<path id="path476" class="st0" d="M121,57.5c1.3,0.1,2.5,1,3.4,2.9c0.8,2.1,1.3,4.3,1.5,6.5c0.1,1.2,0.4,2.4,1.1,3.4"/>
<path id="path478" class="st0" d="M123.7,62.4c0.4,1.3,0.7,2.6,0.9,4c0,1.3,0.4,2.6,1,3.7"/>
<path id="path480" class="st0" d="M121.3,59.6c0.6,0.1,1.1,0.4,1.4,0.9"/>
<path id="path482" class="st0" d="M123.6,67.8c0.1,0.8,0.3,1.5,0.7,2.2"/>
<path id="path484" class="st0" d="M121.6,61.8c1.1,0.4,1.4,3,1.6,4"/>
<path id="path486" class="st0" d="M122.4,67.8c0,0.7,0.3,1.4,0.6,2"/>
<path id="path488" class="st0" d="M122,63.9c0,0.7,0.1,1.3,0.2,2"/>
<path id="path490" class="st0" d="M141.7,76.1c3.5,4.3,4.3,10.1,4.7,15.5"/>
<path id="path492" class="st0" d="M140.4,77.2c3.2,3.9,4,9.2,4.3,14.4"/>
<path id="path494" class="st0" d="M139.1,78.4c2.9,3.5,3.7,8.3,4,13.3"/>
<path id="path496" class="st0" d="M137.8,79.5c2.6,3.1,3.3,7.5,3.6,12.2"/>
<path id="path498" class="st0" d="M136.5,80.6c2.2,2.7,3,6.6,3.2,11.1"/>
<path id="path500" class="st0" d="M135.2,81.7c1.9,2.4,2.7,5.7,2.8,10"/>
<path id="path502" class="st0" d="M134,82.8c1.6,2,2.4,4.8,2.4,8.9"/>
<path id="path504" class="st0" d="M132.7,83.9c1.3,1.6,2,4,2.1,7.8"/>
<path id="path506" class="st0" d="M132.9,89.2c0.1,0.8,0.1,1.7,0.1,2.5"/>
<path id="path508" class="st0" d="M131.4,85c0.5,0.6,0.8,1.3,1.1,2"/>
<path id="path510" class="st0" d="M130.1,86.2c0.6,0.8,1.4,2.2,1.3,5.6"/>
<path id="path512" class="st0" d="M129.7,90.6c0,0.4,0,0.7,0,1.1"/>
<path id="path514" class="st0" d="M128.8,87.3c0.3,0.4,0.5,0.8,0.6,1.3"/>
<path id="path516" class="st0" d="M128.1,90c0,0.6,0,1.2,0,1.7"/>
<path id="path518" class="st0" d="M127.6,88.4c0.3,0.3,0.4,0.7,0.5,1.1"/>
<path id="path520" class="st0" d="M98.2,70.8c0.9-1.3,1.6-2.6,2.1-4.1c0.3-2.4,0-5.2,1-7.7c1.8-4.2,2.5-8.7,3.8-13
c0.4-1.1,1.1-2.2,2.1-2.9"/>
<path id="path522" class="st0" d="M106.9,46.7c-1,1.7-1.3,3.9-1.8,5.8c-0.5,2.1-1.1,4.2-1.8,6.3c-0.7,2-1.1,4.2-1.2,6.3
c-0.2,2-0.9,3.9-2,5.6"/>
<path id="path524" class="st0" d="M108,48.6c-1.4,2.4-1.4,5.5-2.1,8.3c-1.4,3.5-1.7,7.3-2.8,11.2c-0.3,0.8-0.6,1.6-1,2.4"/>
<path id="path526" class="st0" d="M109.7,49.8c-0.6,0.6-1,1.4-1.2,2.3c-0.7,3-1.3,6.6-2.4,9.6c-0.2,0.5-0.3,1.1-0.5,1.6
c-0.3,1.4-0.2,2.8-0.4,4.1c-0.2,1.1-0.6,2.1-1.2,3.1"/>
<path id="path528" class="st0" d="M108.5,59.4c-0.4,1.9-1.2,3.7-1.4,5.6c-0.3,1.9-0.2,3.7-1.1,5.3"/>
<path id="path530" class="st0" d="M110.5,52c-1.2,1-1.2,3.6-1.5,5"/>
<path id="path532" class="st0" d="M111.3,54.3c-0.4,0.5-0.6,1.2-0.6,1.8c-0.3,2.5-0.8,4.9-1.4,7.4c-0.1,0.4-0.2,0.8-0.3,1.2
c-0.2,1-0.4,2.1-0.4,3.1c-0.1,0.8-0.2,1.6-0.5,2.4"/>
<path id="path534" class="st0" d="M111.5,60.7c-1,2.9-1,6-1.6,9.3"/>
<path id="path536" class="st0" d="M112.1,56.4c-0.3,0.7-0.4,1.5-0.4,2.3"/>
<path id="path538" class="st0" d="M111.8,67.7c-0.1,0.7-0.1,1.5,0,2.2"/>
<path id="path540" class="st0" d="M112.7,62.7c-0.1,1-0.3,2-0.5,3"/>
<path id="path542" class="st0" d="M112.9,58.7c0,0.7,0,1.3,0,2"/>
<path id="path544" class="st0" d="M90.2,91.5C89.8,85.2,90.8,78.2,96,74"/>
<path id="path546" class="st0" d="M92.2,91.5c-0.3-5.6,0.6-12.1,5.3-15.9"/>
<path id="path548" class="st0" d="M94.2,91.5c-0.3-4.9,0.4-10.9,4.6-14.3"/>
<path id="path550" class="st0" d="M96.3,91.6c-0.2-4.2,0.3-9.7,4-12.7"/>
<path id="path552" class="st0" d="M98.3,91.6c-0.2-3.5,0.1-8.5,3.4-11.2"/>
<path id="path554" class="st0" d="M100.3,91.6c-0.1-2.8,0-7.3,2.7-9.6"/>
<path id="path556" class="st0" d="M102.4,91.6c-0.1-2.1-0.1-6.1,2.1-8"/>
<path id="path558" class="st0" d="M104.7,87.3c0.2-0.8,0.6-1.5,1.2-2.1"/>
<path id="path560" class="st0" d="M104.4,91.6c0-0.8,0-1.6,0-2.3"/>
<path id="path562" class="st0" d="M106.6,87.9c0.1-0.4,0.3-0.8,0.6-1.1"/>
<path id="path564" class="st0" d="M106.5,91.6c0-0.6-0.1-1.2-0.1-1.8"/>
<path id="path566" class="st0" d="M108.5,91.6c0,0-0.5-2.6,0.2-3.3"/></g>
</svg>
I got an SVG from a designer of which I'd like to set the color through CSS from outside of the SVG. I managed to overwrite part of the colors, but not all. What would I need to do to have the icon unfilled, with red lines over the grey background? Ideally without modifying the SVG because there are plenty of them with similar structure.
html {
background-color: #eeeeee;
}
.icon{
height: 6rem;
width: 6rem;
}
svg {
fill:red;
}
<html>
<div class="icon">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 76.5 76.5" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#000000;stroke-width:2;}
.st2{fill:#FFFFFF;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:5;}
.st4{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st5{display:inline;}
.st6{font-family:'Akkurat-Bold';}
.st7{font-size:7.0024px;}
.st8{display:inline;fill:#2B3427;}
.st9{fill:none;stroke:#2B3427;stroke-width:2;}
.st10{fill:none;stroke:#2B3427;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st11{display:inline;fill:#FFFFFF;}
.st12{fill:#2B3427;}
</style>
<g id="Vorlagen" class="st0">
</g>
<g id="Kreis_Black">
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
</g>
<g id="Illu">
<g>
<path class="st1" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st1" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st4" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st2" width="32.6" height="8.1"/>
</g>
<g id="Typo" class="st0">
<text transform="matrix(1 0 0 1 25.4238 53.8332)" class="st5 st6 st7">VEGAN</text>
</g>
<g id="Typo_Gepfadet">
<g>
<path d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
<g id="Ikons_x5F_Grün" class="st0">
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<g class="st5">
<path class="st9" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st9" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st10" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st11" width="32.6" height="8.1"/>
<g class="st5">
<path class="st12" d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path class="st12" d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path class="st12" d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path class="st12" d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path class="st12" d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
</svg>
</div>
</html>
why not simply remove the style part inside the SVG ?
(and create your own css [in the html HEAD] with the colors you want)
other just use css !impotant in your css
html { background-color: #eeeeee; }
.icon{
height: 6rem;
width: 6rem;
}
svg { fill:red; }
/* add: */
.st1 { stroke:blue !important; }
path { stroke:orange !important; }
SVG is a regular HTML element. Therefore it takes background-color: white or transparent instead of fill to stylize its background.
I am trying to get an SVG to display in a HTML webpage, but I must be missing something.
I have a svg file called logo-a.svg this is the code for it:
<svg x="0px" y="0px" width="197px" height="71px" viewbox="0 0 346 51">
<style type="text/css">
.Arched_x0020_Green{fill:url(#SVGID_1_);stroke:#FFFFFF;stroke-width:0.25;stroke-miterlimit:1;}
.st0{fill:#008751;}
.st1{fill:#FFFFFF;}
.st2{fill:#F9FBFB;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-32.7222" y1="228.6171" x2="-32.0151" y2="227.9099">
<stop offset="0" style="stop-color:#20AC4B"/>
<stop offset="0.9831" style="stop-color:#19361A"/>
</linearGradient>
<rect y="-0.1" class="st0" width="315.63" height="59.33"/>
<g>
<path class="st1" d="M289.44,54.22c-1.58,1.58-4.15,1.58-5.73,0l-22.21-22.21c-1.58-1.58-1.58-4.15,0-5.73L283.7,4.06
c1.58-1.58,4.15-1.58,5.73,0l22.21,22.21c1.58,1.58,1.58,4.15,0,5.73L289.44,54.22z"/>
<path class="st1" d="M68.19,30.39c0-8.81,5.82-20.2,21.28-20.2c12.83,0,20.82,7.47,20.82,19.27c0,11.8-8.24,21.12-21.33,21.12
C74.17,50.59,68.19,39.51,68.19,30.39z M103.08,31.37c0-11.54-6.65-18.7-15.1-18.7c-5.93,0-12.68,3.3-12.68,16.13
c0,10.72,5.92,19.22,15.82,19.22C94.73,48.01,103.08,46.26,103.08,31.37z"/>
<path class="st2" d="M13.81,36.42c-0.26,0-0.36,0.1-0.46,0.41l-2.78,7.37c-0.52,1.29-0.77,2.53-0.77,3.14c0,0.93,0.46,1.6,2.06,1.6
h0.77c0.62,0,0.77,0.1,0.77,0.41c0,0.41-0.31,0.51-0.87,0.51c-1.65,0-3.86-0.15-5.46-0.15c-0.57,0-3.4,0.15-6.08,0.15
C0.31,49.87,0,49.76,0,49.35c0-0.31,0.21-0.41,0.62-0.41c0.47,0,1.18-0.05,1.6-0.1c2.37-0.31,3.35-2.06,4.38-4.64l12.93-32.36
c0.62-1.49,0.93-2.06,1.44-2.06c0.46,0,0.77,0.46,1.29,1.65c1.24,2.83,9.48,23.86,12.78,31.69c1.96,4.64,3.45,5.36,4.53,5.62
c0.77,0.15,1.55,0.21,2.16,0.21c0.41,0,0.67,0.05,0.67,0.41c0,0.41-0.46,0.51-2.37,0.51c-1.86,0-5.62,0-9.74-0.11
c-0.93-0.05-1.55-0.05-1.55-0.41c0-0.31,0.21-0.41,0.72-0.47c0.36-0.1,0.72-0.56,0.46-1.18l-4.12-10.92
c-0.1-0.26-0.26-0.36-0.52-0.36H13.81z M24.32,33.84c0.26,0,0.31-0.16,0.26-0.31L19.94,20.8c-0.05-0.21-0.1-0.46-0.26-0.46
c-0.15,0-0.26,0.26-0.31,0.46l-4.74,12.68c-0.05,0.21,0,0.36,0.21,0.36H24.32z"/>
<path class="st1" d="M29.14,49.76c-0.9-0.07,3.01-0.17,3.01-1.3c0-2.83-2.31-9.34-2.26-10.16c0.05-0.77,0.2-1.34,0.62-1.34
c0.46,0,0.52,0.46,0.52,0.88c0,0.67,0.22-0.97,0.55-0.11c3.6,9.41,13.99,10.96,19.98,10.39c4.62-0.44,6.9-3.14,6.9-5.87
c0-2.52-0.77-4.89-5.05-8.24l-2.37-1.86c-5.67-4.43-7.63-8.04-7.63-12.21c0-5.67,4.74-9.74,11.9-9.74c3.35,0,5.51,0.52,6.85,0.88
c0.46,0.1,0.72,0.26,0.72,0.62c0,0.67-0.21,2.17-0.21,6.19c0,1.13-0.15,1.55-0.57,1.55c-0.36,0-0.51-0.31-0.51-0.93
c0-0.47-0.26-2.06-1.34-3.4c-0.77-0.98-2.27-2.53-5.62-2.53c-3.81,0-6.13,2.22-6.13,5.31c0,2.37,1.19,4.17,5.46,7.42l1.44,1.08
c6.23,4.69,8.45,8.25,8.45,13.14c0,2.99-1.13,6.54-4.84,8.96c-2.58,1.65-5.46,2.11-8.19,2.11C47.84,50.59,31.33,49.94,29.14,49.76z
"/>
<path class="st1" d="M115.85,25.85c0-7.83,0-9.27-0.1-10.92c-0.11-1.75-0.52-2.58-2.22-2.94c-0.41-0.1-1.29-0.15-2.01-0.15
c-0.57,0-0.88-0.1-0.88-0.46c0-0.36,0.36-0.46,1.13-0.46c2.73,0,5.98,0.15,7.06,0.15c1.75,0,5.67-0.15,7.26-0.15
c3.25,0,6.7,0.31,9.48,2.22c1.45,0.98,3.51,3.61,3.51,7.06c0,3.81-1.6,7.32-6.8,11.54c4.58,5.77,8.14,10.35,11.18,13.55
c2.89,2.99,5,3.35,5.77,3.5c0.57,0.1,1.03,0.16,1.44,0.16c0.41,0,0.62,0.16,0.62,0.41c0,0.41-0.36,0.51-0.98,0.51h-4.89
c-2.89,0-4.18-0.26-5.51-0.98c-2.22-1.18-4.17-3.61-7.06-7.57c-2.06-2.84-4.43-6.34-5.1-7.11c-0.26-0.31-0.57-0.36-0.93-0.36
l-4.48-0.1c-0.26,0-0.41,0.1-0.41,0.41v0.72c0,4.79,0,8.87,0.26,11.03c0.15,1.49,0.46,2.63,2.01,2.84c0.77,0.1,1.9,0.21,2.52,0.21
c0.41,0,0.62,0.16,0.62,0.41c0,0.36-0.36,0.51-1.03,0.51c-2.99,0-6.8-0.15-7.57-0.15c-0.98,0-4.23,0.15-6.29,0.15
c-0.67,0-1.03-0.15-1.03-0.51c0-0.26,0.2-0.41,0.82-0.41c0.77,0,1.39-0.1,1.86-0.21c1.03-0.21,1.29-1.34,1.49-2.84
c0.26-2.16,0.26-6.23,0.26-10.97V25.85z M121.93,29.93c0,0.57,0.1,0.77,0.46,0.93c1.08,0.36,2.63,0.52,3.92,0.52
c2.06,0,2.73-0.21,3.66-0.88c1.54-1.14,3.04-3.5,3.04-7.73c0-7.32-4.85-9.43-7.88-9.43c-1.29,0-2.21,0.05-2.73,0.21
c-0.36,0.1-0.46,0.31-0.46,0.72V29.93z"/>
<path class="st1" d="M144.82,30.39c0-8.81,5.82-20.2,21.28-20.2c12.83,0,20.82,7.47,20.82,19.27c0,11.8-8.24,21.12-21.33,21.12
C150.8,50.59,144.82,39.51,144.82,30.39z M179.7,31.37c0-11.54-6.65-18.7-15.1-18.7c-5.93,0-12.68,3.3-12.68,16.13
c0,10.72,5.93,19.22,15.82,19.22C171.36,48.01,179.7,46.26,179.7,31.37z"/>
<g>
<g>
<path class="st1" d="M272.7,48.93c-0.63,0-1.65-0.15-3.21-0.77c-2.79-1.09-5.12-3.41-7.39-5.58
c-2.01-1.91-10.67-11.2-12.56-13.67l-0.07-0.05c-0.62,0.81-1.84,2.3-3.55,4.14c2.16,2.71,9.62,11.53,11.74,13.4
c2.22,1.97,3.62,3.1,6.41,3.36c1.09,0.11,2.02,0.11,3.56,0.11h4.51c0.98,0,1.24-0.15,1.24-0.52
C273.37,49.04,273.07,48.93,272.7,48.93z"/>
</g>
<path class="st1" d="M243.64,30.23h-0.26v2.55c0.42-0.44,0.83-0.87,1.2-1.28c-0.17-0.21-0.3-0.38-0.38-0.49L243.64,30.23z"/>
<path class="st1" d="M228.24,43.22c-2.75,1.51-7.52,4.34-14.47,4.37c-6.9,0.03-16.23-6.08-16.23-18.34c0-5,0.98-9.89,4.74-13.34
c2.27-2.06,5.21-3.19,9.69-3.19c4.74,0,8.76,1.39,10.46,3.19c1.29,1.34,1.96,3.14,2.01,4.74c0,0.72,0.1,1.13,0.52,1.13
c0.46,0,0.56-0.41,0.62-1.19c0.11-1.03,0.05-3.86,0.16-5.57c0.1-1.8,0.26-2.42,0.26-2.83c0-0.31-0.2-0.57-0.77-0.62
c-1.54-0.15-3.19-0.62-5.15-0.88c-2.37-0.31-4.28-0.52-7.47-0.52c-7.68,0-12.57,2.06-16.28,5.46c-4.95,4.54-6.03,10.62-6.03,14.12
c0,5,1.34,10.77,6.39,15.2c4.69,4.07,10.63,6.08,17.67,5.62c7.93-0.52,16.29-6.13,22.77-11.78c0-0.77,0.01-1.57,0.01-2.39
C234.24,39.16,231.24,41.58,228.24,43.22z"/>
<path class="st1" d="M243.17,26.32h-0.24v-2.18c0-7.52,0-7.79,0.1-9.37c0.1-1.73,0.5-2.57,1.83-2.82c0.59-0.1,0.89-0.15,1.38-0.15
c0.4,0,0.69-0.1,0.69-0.45c0-0.34-0.35-0.44-1.04-0.44c-1.68,0-4.8,0.15-5.98,0.15c-1.19,0-4.3-0.15-6.92-0.15
c-0.74,0-1.09,0.1-1.09,0.44c0,0.35,0.29,0.45,0.84,0.45c0.69,0,1.54,0.05,1.93,0.15c1.63,0.35,2.03,1.14,2.13,2.82
c0.1,1.58,0.1,1.86,0.1,9.37v8.71c0,0.49,0,0.41,0,0.88C241.55,29.25,244.09,25.32,243.17,26.32z"/>
<g>
<path class="st1" d="M237.47,41.41c-0.02,2.93-0.07,3.12-0.25,4.62c-0.2,1.44-0.45,2.54-1.44,2.74c-0.45,0.1-1.05,0.2-1.79,0.2
c-0.6,0-0.8,0.15-0.8,0.4c0,0.35,0.35,0.5,1,0.5c1.99,0,5.13-0.15,6.28-0.15c1.24,0,4.38,0.15,7.18,0.15
c0.54,0,0.95-0.15,0.95-0.5c0-0.25-0.25-0.4-0.65-0.4c-0.65,0-1.74-0.1-2.44-0.2c-1.25-0.2-1.7-1.3-1.8-2.69
c-0.15-2.14-0.15-6.08-0.15-10.67v0.17C241.85,37.37,239.79,39.39,237.47,41.41z"/>
</g>
<path class="st1" d="M254.09,17.15c-0.85,0.95-2.52,2.7-4.3,4.56c-3.38,4.44-7.83,10.05-12.68,14.71c0,0.82,0,1.62-0.01,2.39
c2.4-2.09,4.53-4.18,6.29-6.03v-2.55h0.26l0.57,0.77c0.08,0.11,0.21,0.28,0.38,0.49c2.42-2.63,3.89-4.53,3.98-4.77
C248.78,26.17,252.11,20.62,254.09,17.15z"/>
<path class="st1" d="M248.18,27.4c1.76-1.85,9.54-9.58,11.13-11.13c2.22-2.16,3.97-3.25,5.57-3.86c0.98-0.36,2.27-0.57,2.99-0.57
c0.51,0,0.77-0.1,0.77-0.46c0-0.36-0.36-0.46-0.88-0.46c-1.6,0-4.43,0.15-6.03,0.15c-1.39,0-4.23-0.15-5.31-0.15
c-0.57,0-0.82,0.1-0.82,0.46c0,0.31,0.2,0.41,0.67,0.52c0.52,0.1,0.72,0.46,0.72,1.03c0,0.88-1.13,2.16-2.58,3.86
c-0.09,0.1-0.2,0.23-0.33,0.37c-1.98,3.47-5.3,9.02-5.51,9.57c-0.02,0.07-0.18,0.3-0.45,0.65l0.07,0.05
C248.19,27.41,248.19,27.4,248.18,27.4z"/>
</g>
<path class="st0" d="M269.57,31.17c1.44,0.11,2.81,0.4,4.23,0.51c4.83,0.36,9.84,0,14.55,0c2.54,0,5.04,0,7.45,0
c2.23,0,4.75,0.48,6.6-0.85c0-0.34,0-0.68,0-1.02c-3.06-4.04-13.16-4.06-21.15-4.06c-1.2,0-2.55-0.05-3.72,0
c-1.24,0.06-2.63-0.03-3.39,0.17c-0.81,0.21-1.85,1.85-2.71,2.2c-2.24,0.93-6.39,0.38-9.47,0.51c-1.13,0.05-2.29,0.07-3.44,0.08
c0.46,0.57,1.16,1.37,1.98,2.3C263.55,30.9,266.61,30.95,269.57,31.17z"/>
<path class="st0" d="M270.82,20.5c2.94,0,6.47-0.57,8.8,0.17c1.15,0.36,1.73,1.51,2.88,2.03c1.11,0.5,2.65,0.79,4.23,0.85
c4.78,0.16,9.63-0.8,14.21-1.18c-4.03-0.6-9.61,0.37-13.37-0.51c0.6-0.93,1.98-0.61,3.04-0.67c3.1-0.19,7.23-0.16,10.32-0.51
c-1.19-0.67-3.06-0.26-4.91-0.34c-2.87-0.12-6.06,0-8.46-0.51c0.27-0.66,1.13-0.61,1.69-0.68c3.4-0.39,8.29,0.41,11.68-0.17
c-0.84-0.52-2.14-0.46-3.39-0.51c-2.24-0.08-5.09,0.03-7.61-0.17c-0.77-0.06-2.02-0.01-2.37-0.85c4.04-0.67,8.73,0.08,13.37-0.17
c-0.3-0.57-1.15-0.43-1.69-0.51c-1.69-0.24-3.6-0.35-5.58-0.51c-3.73-0.29-7.91-0.85-10.83,0.34c-1.17,0.48-2.44,1.93-3.56,2.2
c-1.15,0.28-2.97,0.15-4.4,0.17c-2.41,0.04-4.69,0.03-6.92-0.02c-0.48,0.48-1.03,1.02-1.6,1.59
C267.84,20.52,269.33,20.5,270.82,20.5z"/>
<path class="st0" d="M296.33,35.11c-3.52-1.94-9.5-2.63-13.03-0.34c-1.33,0.86-2.26,2.74-3.73,3.22c-1.09,0.36-2.88,0.28-4.4,0.34
c-2.6,0.11-5.37,0.02-8.03-0.14c0.6,0.63,1.13,1.16,1.52,1.55c2.27-0.03,4.56,0,6.86,0.11c1.65,0.08,3.05-0.12,4.23,0.34
c1.52,0.59,2.35,2.55,3.89,3.38c3.54,1.91,9.29,1.21,12.69-0.67c1.71-0.95,3.38-2.1,3.38-3.89
C299.71,36.92,297.62,35.82,296.33,35.11z"/>
</g>
</svg>
Then I have a page in my website trying to display it like this:
<div class="brand-logo">
<object id="svg1" data="/images/logo-a.svg" type="image/svg+xml"></object>
</div>
What am I doing wrong? The SVG was created in illustrator, not sure if that makes any difference though.
Your svg is not real svg, just an xml file while you don't declare its namespace
<svg x="0px" y="0px" width="197px" height="71px" viewbox="0 0 346 51"
xmlns="http://www.w3.org/2000/svg"
>
I've run into an issue when animating an SVG on hover. When you move the cursor away when the animation is done you can see the arrowheads move slightly by a pixel or two. Anyone know how to have them not move?
I am only animating the opacity of the arrowheads so I'm not sure why they shift.
Stack overflow wants me to add more details, but I've added all that I can to describe the problem, so I am just typing more words. Thanks for the help.
svg:hover .woven .st0 {
animation: offset 1.5s linear forwards;
animation-iteration-count: 1;
}
svg:hover .woven .st1 {
opacity: 0;
animation: opacity 1.5s linear forwards;
animation-iteration-count: 1;
}
#keyframes offset {
from {
stroke-dasharray: 0 50;
stroke-dashoffset: 0px;
}
to {
stroke-dasharray: 60 60;
stroke-dashoffset: 0px;
}
}
#keyframes opacity {
0% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 1442.3 836.8" style="enable-background:new 0 0 1442.3 836.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#262322;stroke-width:2.0359;stroke-miterlimit:10;}
.st1{fill:#262322;}
.st2{fill:#C73130;stroke:#C73130;stroke-width:4.3;stroke-miterlimit:10;}
</style>
<g id="Layer_1" class="woven">
<g>
<g>
<g>
<g>
<line class="st0" x1="237.8" y1="680" x2="197.9" y2="719.9"/>
<g>
<path class="st1" d="M200.8,703.2c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8
c0.1,0.5-0.2,1.1-0.8,1.2l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5
C200.1,703.2,200.5,703.1,200.8,703.2z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="236.5" y1="681.3" x2="276.4" y2="641.4"/>
<g>
<path class="st1" d="M273.5,658.2c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8
c-0.1-0.5,0.2-1.1,0.8-1.2l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3s0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C274.2,658.1,273.8,658.2,273.5,658.2z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="236.9" y1="682.1" x2="197" y2="642.2"/>
<g>
<path class="st1" d="M213.7,645.1c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2
c-0.5,0.1-1.1-0.2-1.2-0.8l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9c0.2-0.2,0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3
C213.7,644.4,213.8,644.7,213.7,645.1z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="235.5" y1="680.7" x2="275.5" y2="720.7"/>
<g>
<path class="st1" d="M258.7,717.7c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2
c0.5-0.1,1.1,0.2,1.2,0.8l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9c-0.2,0.2-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3
C258.8,718.4,258.6,718.1,258.7,717.7z"/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<line class="st0" x1="118.3" y1="591.7" x2="78.4" y2="631.6"/>
<g>
<path class="st1" d="M81.3,614.9c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8
c0.1,0.5-0.2,1.1-0.8,1.2l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5
C80.6,614.9,80.9,614.8,81.3,614.9z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="116.9" y1="593" x2="156.9" y2="553.1"/>
<g>
<path class="st1" d="M153.9,569.9c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8s0.2-1.1,0.8-1.2
l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3c0.2,0.2,0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C154.6,569.8,154.3,569.9,153.9,569.9z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="117.4" y1="593.8" x2="77.4" y2="553.8"/>
<g>
<path class="st1" d="M94.2,556.8c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2s-1.1-0.2-1.2-0.8
L75.4,553c-0.1-0.3,0-0.7,0.3-0.9s0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3C94.1,556.1,94.3,556.4,94.2,556.8z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="116" y1="592.4" x2="155.9" y2="632.3"/>
<g>
<path class="st1" d="M139.2,629.4c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2
c0.5-0.1,1.1,0.2,1.2,0.8l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9s-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3
C139.2,630.1,139.1,629.8,139.2,629.4z"/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<line class="st0" x1="118.3" y1="415.3" x2="78.4" y2="455.2"/>
<g>
<path class="st1" d="M81.3,438.4c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8s-0.2,1.1-0.8,1.2
l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5C80.6,438.5,80.9,438.4,81.3,438.4z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="116.9" y1="416.6" x2="156.9" y2="376.7"/>
<g>
<path class="st1" d="M153.9,393.4c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8s0.2-1.1,0.8-1.2
l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3s0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5C154.6,393.4,154.3,393.5,153.9,393.4z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="117.4" y1="417.4" x2="77.4" y2="377.4"/>
<g>
<path class="st1" d="M94.2,380.4c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2s-1.1-0.2-1.2-0.8
l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9s0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3C94.1,379.7,94.3,380,94.2,380.4z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="116" y1="416" x2="155.9" y2="455.9"/>
<g>
<path class="st1" d="M139.2,453c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2
c0.5-0.1,1.1,0.2,1.2,0.8l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9s-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3
C139.2,453.7,139.1,453.4,139.2,453z"/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<line class="st0" x1="118.3" y1="245.4" x2="78.4" y2="285.3"/>
<g>
<path class="st1" d="M81.3,268.5c0.5,0.1,0.9,0.7,0.8,1.2L78.7,285l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8c0.1,0.5-0.2,1.1-0.8,1.2
l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5C80.6,268.6,80.9,268.5,81.3,268.5z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="116.9" y1="246.7" x2="156.9" y2="206.8"/>
<g>
<path class="st1" d="M153.9,223.5c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8
c-0.1-0.5,0.2-1.1,0.8-1.2l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3c0.2,0.2,0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C154.6,223.5,154.3,223.6,153.9,223.5z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="117.4" y1="247.5" x2="77.4" y2="207.5"/>
<g>
<path class="st1" d="M94.2,210.5c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2
c-0.5,0.1-1.1-0.2-1.2-0.8l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9s0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3
C94.1,209.8,94.3,210.1,94.2,210.5z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="116" y1="246.1" x2="155.9" y2="286"/>
<g>
<path class="st1" d="M139.2,283.1c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2
c0.5-0.1,1.1,0.2,1.2,0.8l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9s-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3
C139.2,283.8,139.1,283.4,139.2,283.1z"/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<line class="st0" x1="237.8" y1="504.1" x2="197.9" y2="544"/>
<g>
<path class="st1" d="M200.8,527.3c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8
c0.1,0.5-0.2,1.1-0.8,1.2l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5
C200.1,527.3,200.5,527.2,200.8,527.3z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="236.5" y1="505.4" x2="276.4" y2="465.5"/>
<g>
<path class="st1" d="M273.5,482.3c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8
c-0.1-0.5,0.2-1.1,0.8-1.2l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3s0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C274.2,482.2,273.8,482.3,273.5,482.3z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="236.9" y1="506.2" x2="197" y2="466.2"/>
<g>
<path class="st1" d="M213.7,469.2c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2
c-0.5,0.1-1.1-0.2-1.2-0.8l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9s0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3
C213.7,468.5,213.8,468.8,213.7,469.2z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="235.5" y1="504.8" x2="275.5" y2="544.7"/>
<g>
<path class="st1" d="M258.7,541.8c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2
c0.5-0.1,1.1,0.2,1.2,0.8l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9s-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3
C258.8,542.5,258.6,542.2,258.7,541.8z"/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<line class="st0" x1="237.8" y1="328" x2="197.9" y2="367.9"/>
<g>
<path class="st1" d="M200.8,351.1c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8
c0.1,0.5-0.2,1.1-0.8,1.2l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5
C200.1,351.2,200.5,351.1,200.8,351.1z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="236.5" y1="329.3" x2="276.4" y2="289.4"/>
<g>
<path class="st1" d="M273.5,306.1c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8
c-0.1-0.5,0.2-1.1,0.8-1.2l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3s0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C274.2,306.1,273.8,306.2,273.5,306.1z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="236.9" y1="330" x2="197" y2="290.1"/>
<g>
<path class="st1" d="M213.7,293c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2
c-0.5,0.1-1.1-0.2-1.2-0.8l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9s0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3
C213.7,292.3,213.8,292.7,213.7,293z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="235.5" y1="328.7" x2="275.5" y2="368.6"/>
<g>
<path class="st1" d="M258.7,365.7c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2
c0.5-0.1,1.1,0.2,1.2,0.8l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9s-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3
C258.8,366.4,258.6,366,258.7,365.7z"/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<line class="st0" x1="237.8" y1="151.9" x2="197.9" y2="191.9"/>
<g>
<path class="st1" d="M200.8,175.1c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8
c0.1,0.5-0.2,1.1-0.8,1.2l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3c-0.2-0.2-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5
C200.1,175.1,200.5,175,200.8,175.1z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="236.5" y1="153.3" x2="276.4" y2="113.4"/>
<g>
<path class="st1" d="M273.5,130.1c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8
c-0.1-0.5,0.2-1.1,0.8-1.2l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3c0.2,0.2,0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C274.2,130.1,273.8,130.2,273.5,130.1z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="236.9" y1="154" x2="197" y2="114.1"/>
<g>
<path class="st1" d="M213.7,117c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2
c-0.5,0.1-1.1-0.2-1.2-0.8l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9c0.2-0.2,0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3
C213.7,116.3,213.8,116.7,213.7,117z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="235.5" y1="152.7" x2="275.5" y2="192.6"/>
<g>
<path class="st1" d="M258.7,189.7c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2
c0.5-0.1,1.1,0.2,1.2,0.8l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9s-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3
C258.8,190.4,258.6,190,258.7,189.7z"/>
</g>
</g>
</g>
</g>
<circle class="st2" cx="117.1" cy="681" r="7.9"/>
<circle class="st2" cx="117.1" cy="505.1" r="7.9"/>
<circle class="st2" cx="117.1" cy="329" r="7.9"/>
<circle class="st2" cx="117.1" cy="153" r="7.9"/>
<circle class="st2" cx="236.7" cy="768.9" r="7.9"/>
<circle class="st2" cx="236.7" cy="592.7" r="7.9"/>
<circle class="st2" cx="236.7" cy="416.3" r="7.9"/>
<circle class="st2" cx="236.7" cy="65" r="7.9"/>
<circle class="st2" cx="236.7" cy="246.4" r="7.9"/>
<g>
<g>
<g>
<line class="st0" x1="476.9" y1="680" x2="437" y2="719.9"/>
<g>
<path class="st1" d="M439.9,703.2c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8
c0.1,0.5-0.2,1.1-0.8,1.2l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5
C439.2,703.2,439.6,703.1,439.9,703.2z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="475.6" y1="681.3" x2="515.5" y2="641.4"/>
<g>
<path class="st1" d="M512.6,658.2c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8
c-0.1-0.5,0.2-1.1,0.8-1.2l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3s0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C513.3,658.1,512.9,658.2,512.6,658.2z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="476" y1="682.1" x2="436.1" y2="642.2"/>
<g>
<path class="st1" d="M452.8,645.1c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2s-1.1-0.2-1.2-0.8
l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9c0.2-0.2,0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3
C452.8,644.4,452.9,644.7,452.8,645.1z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="474.6" y1="680.7" x2="514.6" y2="720.7"/>
<g>
<path class="st1" d="M497.8,717.7c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2
c0.5-0.1,1.1,0.2,1.2,0.8l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9c-0.2,0.2-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3
C497.8,718.4,497.7,718.1,497.8,717.7z"/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<line class="st0" x1="357.4" y1="591.7" x2="317.4" y2="631.6"/>
<g>
<path class="st1" d="M320.4,614.9c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8
c0.1,0.5-0.2,1.1-0.8,1.2l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5
C319.7,614.9,320,614.8,320.4,614.9z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="356" y1="593" x2="395.9" y2="553.1"/>
<g>
<path class="st1" d="M393,569.9c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8
c-0.1-0.5,0.2-1.1,0.8-1.2l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3c0.2,0.2,0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C393.7,569.8,393.4,569.9,393,569.9z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="356.4" y1="593.8" x2="316.5" y2="553.8"/>
<g>
<path class="st1" d="M333.3,556.8c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2
c-0.5,0.1-1.1-0.2-1.2-0.8l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9s0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3
C333.2,556.1,333.3,556.4,333.3,556.8z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="355.1" y1="592.4" x2="395" y2="632.3"/>
<g>
<path class="st1" d="M378.3,629.4c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2
c0.5-0.1,1.1,0.2,1.2,0.8l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9s-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3
C378.3,630.1,378.2,629.8,378.3,629.4z"/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<line class="st0" x1="357.4" y1="415.3" x2="317.4" y2="455.2"/>
<g>
<path class="st1" d="M320.4,438.4c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8
c0.1,0.5-0.2,1.1-0.8,1.2l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5
C319.7,438.5,320,438.4,320.4,438.4z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="356" y1="416.6" x2="395.9" y2="376.7"/>
<g>
<path class="st1" d="M393,393.4c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8
c-0.1-0.5,0.2-1.1,0.8-1.2l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3s0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C393.7,393.4,393.4,393.5,393,393.4z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="356.4" y1="417.4" x2="316.5" y2="377.4"/>
<g>
<path class="st1" d="M333.3,380.4c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2
c-0.5,0.1-1.1-0.2-1.2-0.8l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9s0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3
C333.2,379.7,333.3,380,333.3,380.4z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="355.1" y1="416" x2="395" y2="455.9"/>
<g>
<path class="st1" d="M378.3,453c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2s1.1,0.2,1.2,0.8
l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9s-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3C378.3,453.7,378.2,453.4,378.3,453z"/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<line class="st0" x1="357.4" y1="245.4" x2="317.4" y2="285.3"/>
<g>
<path class="st1" d="M320.4,268.5c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8
c0.1,0.5-0.2,1.1-0.8,1.2l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5
C319.7,268.6,320,268.5,320.4,268.5z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="356" y1="246.7" x2="395.9" y2="206.8"/>
<g>
<path class="st1" d="M393,223.5c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8
c-0.1-0.5,0.2-1.1,0.8-1.2l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3c0.2,0.2,0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C393.7,223.5,393.4,223.6,393,223.5z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="356.4" y1="247.5" x2="316.5" y2="207.5"/>
<g>
<path class="st1" d="M333.3,210.5c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2
c-0.5,0.1-1.1-0.2-1.2-0.8l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9s0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3
C333.2,209.8,333.3,210.1,333.3,210.5z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="355.1" y1="246.1" x2="395" y2="286"/>
<g>
<path class="st1" d="M378.3,283.1c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2s1.1,0.2,1.2,0.8
l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9s-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3C378.3,283.8,378.2,283.4,378.3,283.1z"/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<line class="st0" x1="476.9" y1="504.1" x2="437" y2="544"/>
<g>
<path class="st1" d="M439.9,527.3c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8
c0.1,0.5-0.2,1.1-0.8,1.2l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5
C439.2,527.3,439.6,527.2,439.9,527.3z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="475.6" y1="505.4" x2="515.5" y2="465.5"/>
<g>
<path class="st1" d="M512.6,482.3c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8
c-0.1-0.5,0.2-1.1,0.8-1.2l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3s0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C513.3,482.2,512.9,482.3,512.6,482.3z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="476" y1="506.2" x2="436.1" y2="466.2"/>
<g>
<path class="st1" d="M452.8,469.2c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2
c-0.5,0.1-1.1-0.2-1.2-0.8l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9s0.6-0.3,0.9-0.3L452,468c0.2,0,0.4,0.1,0.5,0.3
C452.8,468.5,452.9,468.8,452.8,469.2z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="474.6" y1="504.8" x2="514.6" y2="544.7"/>
<g>
<path class="st1" d="M497.8,541.8c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2
c0.5-0.1,1.1,0.2,1.2,0.8l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9s-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3
C497.8,542.5,497.7,542.2,497.8,541.8z"/>
</g>
</g>
</g>
</g>
<g>
<g>
<g>
<line class="st0" x1="476.9" y1="328" x2="437" y2="367.9"/>
<g>
<path class="st1" d="M439.9,351.1c0.5,0.1,0.9,0.7,0.8,1.2l-3.4,15.2l15.2-3.4c0.5-0.1,1.1,0.2,1.2,0.8s-0.2,1.1-0.8,1.2
l-16.8,3.7c-0.3,0.1-0.7,0-0.9-0.3s-0.3-0.6-0.3-0.9l3.7-16.8c0-0.2,0.1-0.4,0.3-0.5C439.2,351.2,439.6,351.1,439.9,351.1z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="475.6" y1="329.3" x2="515.5" y2="289.4"/>
<g>
<path class="st1" d="M512.6,306.1c-0.5-0.1-0.9-0.7-0.8-1.2l3.4-15.2l-15.2,3.4c-0.5,0.1-1.1-0.2-1.2-0.8
c-0.1-0.5,0.2-1.1,0.8-1.2l16.8-3.7c0.3-0.1,0.7,0,0.9,0.3s0.3,0.6,0.3,0.9l-3.7,16.8c0,0.2-0.1,0.4-0.3,0.5
C513.3,306.1,512.9,306.2,512.6,306.1z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="476" y1="330" x2="436.1" y2="290.1"/>
<g>
<path class="st1" d="M452.8,293c-0.1,0.5-0.7,0.9-1.2,0.8l-15.2-3.4l3.4,15.2c0.1,0.5-0.2,1.1-0.8,1.2
c-0.5,0.1-1.1-0.2-1.2-0.8l-3.7-16.8c-0.1-0.3,0-0.7,0.3-0.9s0.6-0.3,0.9-0.3l16.8,3.7c0.2,0,0.4,0.1,0.5,0.3
C452.8,292.3,452.9,292.7,452.8,293z"/>
</g>
</g>
</g>
<g>
<g>
<line class="st0" x1="474.6" y1="328.7" x2="514.6" y2="368.6"/>
<g>
<path class="st1" d="M497.8,365.7c0.1-0.5,0.7-0.9,1.2-0.8l15.2,3.4l-3.4-15.2c-0.1-0.5,0.2-1.1,0.8-1.2
c0.5-0.1,1.1,0.2,1.2,0.8l3.7,16.8c0.1,0.3,0,0.7-0.3,0.9s-0.6,0.3-0.9,0.3l-16.8-3.7c-0.2,0-0.4-0.1-0.5-0.3
C497.8,366.4,497.7,366,497.8,365.7z"/>
</g>
</g>
</g>
</g>
<g id="Layer_2">
</g>
</svg>
Looks to me like a bug in Chrome. It doesn't seem to happen in Firefox.
It looks like it's perhaps a compositing error. The arrowheads are moving slightly to the left when their opacity becomes 1.
I would recommend you report it to Chrome, and then please post the bug number here for the benefit of other readers.
I wanna to animate my logo in SVG, but this code not showing my logo, whats it's wrong with my code? This code does not display anything. In case if I was able to display, how to handle the animation of my logo?
<html>
<head>
<style type="text/css">
.st0{fill:#231F20;}
.st1{fill:#FFC510;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFC510;}
</style>
</head>
<body>
<svg>
<g>
<g id="tomato">
<path id="1" class="st0 bracketRight" d="M50.4,248.1c3.2-0.5,5.8-0.8,7.6-0.8c2.7,0,4,0.6,4,1.7v0.1c-1.5,5.6-2.5,11.9-2.9,19
c-1.2,15.9-1.8,24.5-1.9,25.8c-0.3,4.7-0.5,13.9-0.7,27.8c-1,20.9-1.3,31.4-1.1,31.4l-0.1,0.6c0,0.6-0.1,1.5-0.3,2.7h0.3
c2.8-3.5,4.2-5.2,4.4-5.2v0.1c-3.1,8.8-5.2,13.1-6.4,13.1c-1.1,0-2-1.7-2.9-5.1c-0.9-3.4-1.6-7.6-2.1-12.4
c-2.3-15.2-3.5-23.3-3.4-24.4c-0.6-5.5-1.1-14.4-1.3-26.9h-0.1l-0.4,0.5c0,0,0-0.1-0.1-0.1l0.4-4.8c0.1-8.6,0.2-13.5,0.3-15
c0-0.6,0.1-1.3,0.2-2.1c0.1-2.8,0.3-6.5,0.5-10.9c0.3-5.2,0-7.5-1.1-7c-0.7-1.1-1.1-2.1-1.1-3C42.1,250.8,44.9,249.1,50.4,248.1z"
/>
<path id="2" class="st0 bracketRight" d="M89.2,294.5c5.9,0,11.2,1.3,16,4c2,1.1,4.8,3.6,8.5,7.5c2.6,3,4.5,6.1,5.7,9.2c0.6,1.6,0.9,2.9,0.9,3.8
c0,4.5-1.6,7.5-4.9,8.8l-1.5,0.3c-1.1,0-2.3-0.5-3.5-1.5h-0.8c-2.1,0-8.9,0.9-20.6,2.8c-5.8,0.9-12.3,1.3-19.6,1.3
c-0.5,2-0.8,3.5-0.8,4.6c2.8,1.6,9.5,3.3,20,5.4c1.9,0.3,3.7,0.4,5.7,0.4h3c2.9,0,5.9-0.3,9.2-0.9l0.1,0.2
c-3.3,3.2-6.5,5.8-9.7,7.8c-5.7,3.2-10.1,5-13.1,5.2c-3.6,0.8-6.8,1.1-9.5,1.1c-7.1,0-12.4-2.4-16-7.1c-2.1-3-3.1-6.3-3.1-9.9
c0,0-0.1-0.2-0.1-0.6c0-1,0.3-3.1,0.8-6.4h-0.1c-2.4,0-5.8-0.7-10.3-2.1c-3-1.9-4.6-4-4.6-6.3v-0.2c0-1.9,1.3-4.2,4-7.1
c5.1-6.2,7.6-9.8,7.6-10.7c0.3-0.5,0.4-1,0.4-1.6c-0.1-0.4-0.3-0.6-0.4-0.6c-0.4,0-1.2,0.4-2.3,1.1v-0.1c1.1-1.1,1.9-1.7,2.4-1.7
c0.7,0,1.1,0.6,1.1,1.9c0,2.2-2,6.7-6,13.6c-1.3,2.4-2,3.8-2,4.1v0.2c1.8,0.7,6,1.1,12.6,1.1c1.3-3.8,3.2-7.6,5.4-11.4
c4.3-7,9.6-11.8,15.7-14.4C82.9,295,86,294.5,89.2,294.5z M73.1,321.9v0.2c9.6,0,19.8-1.1,30.4-3.4v-0.1c-2.7-2.9-5-4.7-7-5.4
c-2.6-1.1-5.9-1.6-10-1.6C81.5,311.6,77,315,73.1,321.9z"/>
<path id="3" class="st0 bracketRight" d="M159.9,286.2l0.1,0.1h0.1c3,0,5.6,1.5,7.8,4.6c1.2,1.8,1.8,5.7,1.8,11.6v7.8h0.1c2.1-2.7,4.1-5,5.9-7
c4.4-4.3,8.4-6.4,11.8-6.4c2.6,0,5.1,1.1,7.5,3.4c2.9,3.1,4.4,9.2,4.4,18.4c0,6.3,1.1,25.1,3.4,56.5h-0.1
c-0.2-0.1-1.8-3.7-4.8-10.7c-5-26-7.7-42-8-47.8c-0.3-5.8-1.1-8.2-2.4-7.1c-1.2,1.1-6.2,8.4-14.8,22c1.1,2.5,0.9,4.1-0.3,4.9
c-1.9,1.6-4.3,2.4-7,2.4c-2.6,0-4.9-1.2-6.9-3.7c-0.6-0.6-1.1-2.7-1.5-6.3c-1.9-6.7-3.3-12.5-4-17.6H153
c-2.9,4.3-5.9,11.5-9.1,21.4c-2.4,7.9-3.6,13-3.6,15.4c-0.3,2-0.8,3.4-1.5,4.2c-1.6,1.7-3.3,2.6-5.2,2.6h-0.4
c-2.6,0-4.7-1.2-6.1-3.6c-0.7-1.8-1.1-3.4-1.1-4.7c0-2.9,0.5-6.4,1.4-10.4c0-8.4,0.6-18.9,1.7-31.5c-0.1,0-0.2,0-0.2-0.1
c-6.4,1-11.1,1.5-14,1.5c-7.2-0.4-10.8-0.8-10.8-1.1c-1.9-0.8-2.8-2-2.8-3.7c0-1.5,1.2-3,3.5-4.5c1.1-0.5,4.6-1.3,10.6-2.5
c7.8-2.1,12.9-3.7,15.4-4.9c1.1-0.8,2.6-1.3,4.7-1.3c2.6,0,4.8,1.2,6.6,3.6c1.3,2.2,1.9,4.7,1.9,7.6v1.8h0.1
c4.4-5.4,7-8.7,7.8-9.7c0.9-1.9,2.4-3.3,4.4-4.2c1.2-0.5,2.3-0.7,3.3-0.7h0.1C159.9,286.3,159.9,286.3,159.9,286.2z M124,302.5
v0.1c1.6,0.1,3.3,0.2,5,0.2h0.2c0.1,0,0.1-0.1,0.1-0.2v-0.6l0.1-0.9C129.3,301.2,127.5,301.6,124,302.5z"/>
<path id="4" class="st1 bracketRight " d="M258.6,282.8c0.2,0,0.3,0.2,0.3,0.5c0,0.8-0.1,3.2-0.3,7.3c0.2,6.4,0.4,9.6,0.8,9.6c2.1,2.7,3.6,6,4.3,10
c0.2,1.4,0.3,2.4,0.3,3v0.4c0,0.7-0.1,1.7-0.4,3.1c6.7,2.5,11.1,5.9,13.4,10.1c1.1,1.8,1.6,3.6,1.6,5.4c0,7.2-4.8,13.2-14.5,18
c-6,2.8-13,4.2-20.8,4.2h-1c-18.4,0-30.1-5.9-35.1-17.6c-0.9-2.7-1.4-5.3-1.4-7.6v-0.8c0-3.8,0.8-7.8,2.3-11.9
c4-9,11-15.6,21.2-19.9c4.9-1.9,9.4-2.9,13.5-2.9h0.6c3.6,0,7.1,0.7,10.6,2.1c0.9,0.5,1.8,1,2.7,1.7h0.1v-0.1c0-2.4,0.3-7.1,1-14
C257.9,283.3,258.2,283.1,258.6,282.8z M226.1,328.9c0,6.3,3.5,10.8,10.6,13.5c3.3,1,7.1,1.5,11.4,1.5c6.8,0,12.1-2.2,15.8-6.6
c1.2-1.5,1.8-3,1.8-4.5v-0.4c-0.4-1.9-2.1-4.2-5.1-7c-4.6-3.5-9.5-6.7-14.5-9.5c-4.1-2.3-6.3-3.6-6.4-3.7v-0.1
c7.6,0.9,12.8,1.8,15.6,2.6v-0.1c-0.1-1.3-0.9-3.4-2.3-6.3c-1-1.7-3.1-2.5-6.4-2.5c-4.5,0-9.1,2.2-13.9,6.6
c-2.4,2.8-3.7,4.8-4,5.8C226.9,321.1,226.1,324.7,226.1,328.9z"/>
<path id="5" class="st1 bracketRight" d="M333.9,282.8c0.2,0,0.3,0.2,0.3,0.5c0,0.8-0.1,3.2-0.3,7.3c0.2,6.4,0.4,9.6,0.8,9.6c2.1,2.7,3.6,6,4.3,10
c0.2,1.4,0.3,2.4,0.3,3v0.4c0,0.7-0.1,1.7-0.4,3.1c6.7,2.5,11.1,5.9,13.4,10.1c1.1,1.8,1.6,3.6,1.6,5.4c0,7.2-4.8,13.2-14.5,18
c-6,2.8-13,4.2-20.8,4.2h-1c-18.4,0-30.1-5.9-35.1-17.6c-0.9-2.7-1.4-5.3-1.4-7.6v-0.8c0-3.8,0.8-7.8,2.3-11.9
c4-9,11-15.6,21.2-19.9c4.9-1.9,9.4-2.9,13.5-2.9h0.6c3.6,0,7.1,0.7,10.6,2.1c0.9,0.5,1.8,1,2.7,1.7h0.1v-0.1c0-2.4,0.3-7.1,1-14
C333.2,283.3,333.4,283.1,333.9,282.8z M301.4,328.9c0,6.3,3.5,10.8,10.6,13.5c3.3,1,7.1,1.5,11.4,1.5c6.8,0,12.1-2.2,15.8-6.6
c1.2-1.5,1.8-3,1.8-4.5v-0.4c-0.4-1.9-2.1-4.2-5.1-7c-4.6-3.5-9.5-6.7-14.5-9.5c-4.1-2.3-6.3-3.6-6.4-3.7v-0.1
c7.6,0.9,12.8,1.8,15.6,2.6v-0.1c-0.1-1.3-0.9-3.4-2.3-6.3c-1-1.7-3.1-2.5-6.4-2.5c-4.5,0-9.1,2.2-13.9,6.6
c-2.4,2.8-3.7,4.8-4,5.8C302.2,321.1,301.4,324.7,301.4,328.9z"/>
<path id="6" class="st0 bracketRight" d="M379.1,289.3c2.5,0,4.4,1.4,5.8,4.2c0.6,1.6,0.9,2.9,0.9,4c0,1.9-1.3,7-4,15.3c-0.1,0.3-0.2,0.7-0.2,0.9
c0,0,1-1.1,2.8-3.2c2.9-3.1,6.6-6.8,11.2-11.1c1.9-3.1,4.3-4.6,7.1-4.6c2.2,0,4.3,1.1,6.3,3.2c1.3,1.8,2,4,2,6.6
c-0.6,6.4-0.9,11-0.9,13.8c0,3.7,0.9,8.6,2.7,14.5c0.2,0.5,0.3,1.1,0.5,1.6h0.2c2.4-2.2,5.3-4.8,8.6-7.6h0.1c-2,8.2-3,13.2-3,14.8
c0,0.5,0.1,1.6,0.3,3.2c0,2-1,3.7-3,5.2c-1.1,0.5-2.1,0.8-3,0.8h-0.1c-2.4,0-4.3-1.5-5.8-4.4c-5.1-6.4-8.5-11.8-10-16.2
c-1.7-4.9-2.5-9.2-2.5-12.8H395c-3.3,3.9-6.3,8-8.9,12.4c-2.3,3.7-4.8,8.2-7.6,13.6c-1.1,2.1-2.8,4.7-5.1,7.8
c-1.9,1.8-3.7,2.7-5.6,2.7c-0.2,0-0.3,0-0.3,0.1c-1.9,0-3.7-0.9-5.3-2.8c-0.9-1.4-1.3-2.7-1.3-3.9c0-1.5,0.8-3.6,2.3-6.3
c1-3.9,2.4-10.8,4.4-20.7c1-5,2.9-11.8,5.8-20.5c-2.9,0.5-7.4,1.7-13.6,3.5v0.3c0.1,0,0.1,0,0.2,0.1c-0.3,0.5-0.8,0.8-1.3,0.8
c0-0.1,0.1-0.2,0.4-0.3v-0.2H359c-0.3,0-1.2,0.2-2.7,0.6c-0.9-0.2-1.3-0.6-1.3-1.2c0-0.5,0.6-1.2,1.7-2c1.4-1.4,3.4-2.9,6-4.7
c3.6-2.6,7.7-4.8,12.1-6.6C376.7,289.6,378.1,289.3,379.1,289.3z"/>
<path id="7" class="st0 bracketRight" d="M566.8,282.4c0.1,0,0.2,0.1,0.3,0.1c8.6-0.5,15.7-0.8,21.1-0.8c5.9,0,9.9,0.3,12.1,0.9
c6.9,1.2,14,4.4,21.4,9.7c6.5,5.1,9.8,10.5,9.8,16.4c0,6.2-4.7,15.8-14,28.9c-4,4.8-7,8.1-9,9.7c-6.4,5.5-12.1,8.5-16.9,9.1
c-0.5,0.1-1.1,0.1-1.6,0.1c-3.6,0-6.1-1.7-7.6-5c-0.3-2.1-1.3-4.8-3-8.2c-1.7-3.4-3.5-9.1-5.6-17.3c-2-8.1-3.4-13.2-3.9-15.3h-0.1
c-0.2,0.2-3.5,5.9-10,17.2c-6.5,11.2-10.3,17.6-11.2,19.1c-1.6,2-3.4,3.2-5.3,3.4c-2.7,0.3-4.7-0.8-6.2-3.5
c-0.2-0.8-0.3-1.5-0.3-2v-0.5c0.5-2.8,1.1-5.4,1.9-7.8c1-13,1.9-21.6,2.5-25.8c0-1.8,1.3-6.8,4-15v-0.1c-3.9,1.7-6.5,2.8-7.8,3.3
l-1.1,0.3c-0.8,0-1.2-0.3-1.2-0.8v-0.3c0-0.3,1.1-0.7,3.2-1.3c1.9-1.3,4.5-3.2,7.7-5.7c0.2-0.2,0.8-0.4,1.7-0.7
c1.6-0.2,2.8,0.7,3.5,2.8c0.2,0.6,0.3,1.4,0.3,2.3l-3.7,29.9l0.1-0.1c0.3-0.3,6.8-8.7,19.6-25.2c0-1.1,1-2.7,3-5.1
c1.9-1.5,3.7-2.3,5.5-2.6c2.7-0.3,5.1,0.7,7.1,3.2c1.5,1.6,2.2,5.8,2.2,12.6c0,2.3,0.4,6,1.3,11.2c1.1,5.1,2.5,10.2,4.4,15.3
c1,2.3,1.8,3.8,2.3,4.5h0.1c3.3-1.4,6.9-4,10.9-7.8c4.3-4.6,6.4-7,6.4-7.5c4.6-6.1,7-10.6,7-13.5v-0.1c0-2.7-3.5-6.4-10.6-11.1
c-5.9-3.4-10.8-5.9-14.8-7.5C587.5,290.2,579.1,287,566.8,282.4L566.8,282.4z"/>
<path id="8" class="st0 bracketRight" d="M666.3,292.1c5.9,0,11.2,1.3,16,4c2,1.1,4.8,3.6,8.5,7.5c2.6,3,4.5,6.1,5.7,9.2c0.6,1.6,0.9,2.9,0.9,3.8
c0,4.5-1.6,7.5-4.9,8.8l-1.5,0.3c-1.1,0-2.3-0.5-3.5-1.5h-0.8c-2.1,0-8.9,0.9-20.6,2.8c-5.8,0.9-12.3,1.3-19.6,1.3
c-0.5,2-0.8,3.5-0.8,4.6c2.8,1.6,9.5,3.3,20,5.4c1.9,0.3,3.7,0.4,5.7,0.4h3c2.9,0,5.9-0.3,9.2-0.9l0.1,0.2
c-3.3,3.2-6.5,5.8-9.7,7.8c-5.7,3.2-10.1,5-13.1,5.2c-3.6,0.8-6.8,1.1-9.5,1.1c-7.1,0-12.4-2.4-16-7.1c-2.1-3-3.1-6.3-3.1-9.9
c0,0-0.1-0.2-0.1-0.6c0-1,0.3-3.1,0.8-6.4h-0.1c-2.4,0-5.8-0.7-10.3-2.1c-3-1.9-4.6-4-4.6-6.3v-0.2c0-1.9,1.3-4.2,4-7.1
c5.1-6.2,7.6-9.8,7.6-10.7c0.3-0.5,0.4-1,0.4-1.6c-0.1-0.4-0.3-0.6-0.4-0.6c-0.4,0-1.2,0.4-2.3,1.1v-0.1c1.1-1.1,1.9-1.7,2.4-1.7
c0.7,0,1.1,0.6,1.1,1.9c0,2.2-2,6.7-6,13.6c-1.3,2.4-2,3.8-2,4.1v0.2c1.8,0.7,6,1.1,12.6,1.1c1.3-3.8,3.2-7.6,5.4-11.4
c4.3-7,9.6-11.8,15.7-14.4C660.1,292.6,663.2,292.1,666.3,292.1z M650.3,319.5v0.2c9.6,0,19.8-1.1,30.4-3.4v-0.1
c-2.7-2.9-5-4.7-7-5.4c-2.6-1.1-5.9-1.6-10-1.6C658.7,309.2,654.2,312.6,650.3,319.5z"/>
<path id="9" class="st0 bracketLeft" d="M707.2,264.4c1.3,0,2.8,0.8,4.2,2.5c1,1.5,1.5,3.2,1.5,5.1c0,2.5-0.4,6.6-1.3,12.2c-0.7,2.9-1.5,5.5-2.5,7.9
c-0.6,1.8-2.1,4.5-4.5,8.2c-0.1,1.6,1.2,9.3,4.1,23h0.1c20.2-17,32.3-18.7,36.5-5.1c1.4,4.6,2.1,8.7,2.1,12.3
c0,7.2-2.7,12.5-8.2,15.9c-7.3,4.7-15.9,7-25.8,7c-1.3,0-2.6,0-3.9-0.1h-0.2c-0.3,0-0.7,0-1.1-0.1c-0.4,0.1-0.7,0.1-0.9,0.1
c-4.3-0.8-8.1-1.5-11.6-2.3c-2.3-0.6-3.5-0.9-3.6-1.1c0.8-0.2,4.2-1.1,10-2.7c0-0.6-0.1-2.4-0.4-5.3c-0.3-2.9-1.4-10.1-3.5-21.4
c-2-11.3-3.1-16.9-3.2-16.9c-1.5,0.7-2.9,1.1-4.2,1.1c2.1-2.2,3.3-3.9,3.7-5.1c0.1,0,0.1-0.1,0.2-0.3c-0.1-1.8-0.1-3.3-0.1-4.7
c0-8.8,1.9-17.2,5.7-25.1C702.4,266.1,704.6,264.4,707.2,264.4z M711.7,346.5c15.4-1,22.8-7.7,22.2-20.1
c-0.6-12.4-8.3-11.2-23.1,3.5C710.9,333.3,711.2,338.9,711.7,346.5z"/>
</g>
<path class="st2" d="M486.6,213.5c-48,19.8-70.8,74.7-51,122.6c15.2,37,51.3,59,89.1,58.1l0-5.1l0,0c-35.7,0.9-69.9-20-84.3-54.9
c-18.7-45.3,2.9-97.3,48.3-116c34.7-14.3,73.3-5,97.9,20.6c1.6-0.8,3.1-1.7,4.7-2.4C565.3,208.5,523.8,198.2,486.6,213.5
L486.6,213.5z M542.5,224.4c6.8,1.8,13.4,4.6,19.6,8.1c8.7,5.1,11.3,11.8,4.8,19.3l-41.6,41.6l0.1-56.8
C525.4,225.1,532.1,221.7,542.5,224.4L542.5,224.4z M502.2,376.3c-6.8-1.8-13.4-4.6-19.6-8.1c-9.3-5.4-11.6-12.7-3.4-20.8
l40.3-40.1l-0.3,60.4C517.9,376.3,511.5,378.8,502.2,376.3L502.2,376.3z M454.4,339.8c-3.6-6.1-6.3-12.7-8.1-19.6
c-2.7-10.4,0.8-17.2,12.3-17.1l56.8,0.1l-40.3,40.1C467.1,351.5,459.8,349.1,454.4,339.8L454.4,339.8z M446.4,280.2
c1.8-6.8,4.6-13.4,8.1-19.6c5.4-9.3,12.7-11.6,20.8-3.4l40.1,40.3l-56.8-0.1C447.1,297.4,443.7,290.6,446.4,280.2L446.4,280.2z
M482.9,232.4c6.1-3.6,12.7-6.3,19.6-8.1c10.4-2.7,17.2,0.8,17.1,12.3l-0.1,56.8l-40.1-40.3C471.3,245,473.6,237.8,482.9,232.4
L482.9,232.4z"/>
<g>
<path class="st0" d="M227.7,374.2h-1.6l-3.1-5.8l-3,5.8h-1.6l-6.8-12.8h2.2l5.3,10.1l2.7-5.2l-2.5-4.9h2.2l5.3,10.1l5.2-10.1h2.2
L227.7,374.2z"/>
<path class="st0" d="M234.7,374.2v-12.8h12.1v1.6h-10v3.7h8.9v1.6h-8.9v4.2h10.1v1.6H234.7z"/>
<path class="st0" d="M259,373.4c-1.1,0.5-2.4,0.8-4,0.8h-7.5v-12.8h7.7c1.4,0,2.7,0.3,3.6,0.8c1.2,0.6,1.7,1.5,1.7,2.8
c0,1-0.6,1.8-1.7,2.5c1.4,0.6,2.2,1.6,2.2,3C261.1,371.8,260.4,372.8,259,373.4z M257.6,363.5c-0.6-0.3-1.4-0.5-2.4-0.5h-5.6v3.7
h5.6c1,0,1.8-0.2,2.4-0.5c0.6-0.3,0.9-0.8,0.9-1.4C258.5,364.3,258.2,363.8,257.6,363.5z M258,368.9c-0.7-0.3-1.7-0.5-2.8-0.5
h-5.6v4.2h5.7c1.1,0,2-0.2,2.7-0.5c0.8-0.4,1.1-0.9,1.1-1.6C259,369.8,258.7,369.2,258,368.9z"/>
<path class="st0" d="M282.9,372.6c-1.5,1.1-3.6,1.6-6.1,1.6h-5.5v-12.8h6.3c2.5,0,4.5,0.6,5.8,1.7c1.3,1.1,1.9,2.7,1.9,4.7
C285.3,369.9,284.5,371.5,282.9,372.6z M281.9,364.3c-0.9-0.8-2.4-1.2-4.3-1.2h-4.3v9.5h3.5c2.1,0,3.7-0.4,4.8-1.2
c1.1-0.8,1.7-2,1.7-3.5S282.8,365.1,281.9,364.3z"/>
<path class="st0" d="M286.7,374.2v-12.8h12.1v1.6h-10v3.7h8.9v1.6h-8.9v4.2h10.1v1.6H286.7z"/>
<path class="st0" d="M307.8,374.2h-1.5l-7.1-12.8h2.2l5.6,10.1l5.4-10.1h2.2L307.8,374.2z"/>
<path class="st0" d="M315.8,374.2v-12.8h12.1v1.6h-10v3.7h8.9v1.6h-8.9v4.2H328v1.6H315.8z"/>
<path class="st0" d="M329.3,374.2v-12.8h2.1v11.2h9.2v1.6H329.3z"/>
<path class="st0" d="M354.7,372.6c-1.5,1.2-3.5,1.8-6,1.8c-2.5,0-4.5-0.6-6-1.7c-1.5-1.2-2.2-2.8-2.2-4.8c0-2,0.8-3.6,2.3-4.7
c1.4-1.1,3.4-1.6,6-1.6c2.5,0,4.5,0.5,6,1.6c1.5,1.1,2.3,2.7,2.3,4.7C357,369.8,356.2,371.4,354.7,372.6z M353.3,364.3
c-1.1-0.8-2.6-1.2-4.6-1.2c-2,0-3.5,0.4-4.5,1.2c-1.1,0.8-1.6,2-1.6,3.5c0,1.5,0.5,2.7,1.6,3.6c1.1,0.9,2.6,1.3,4.5,1.3
c2,0,3.5-0.4,4.6-1.3c1.1-0.9,1.6-2.1,1.6-3.6C354.9,366.3,354.4,365.1,353.3,364.3z"/>
<path class="st0" d="M369.6,368.2c-1.1,0.5-2.4,0.8-4,0.8h-4.9v5.2h-2.1v-12.8h7.3c3.9,0,5.8,1.3,5.8,3.8
C371.6,366.5,371,367.5,369.6,368.2z M366,363h-5.3v4.3h5.3c1,0,1.9-0.2,2.5-0.5c0.7-0.4,1.1-0.9,1.1-1.5
C369.6,363.8,368.4,363,366,363z"/>
<path class="st0" d="M388.4,374.2v-9l-5.6,9h-1.5l-5.6-9v9h-2.1v-12.8h2l6.3,10.3l6.4-10.3h2v12.8H388.4z"/>
<path class="st0" d="M392.6,374.2v-12.8h12.1v1.6h-10v3.7h8.9v1.6h-8.9v4.2h10.1v1.6H392.6z"/>
<path class="st0" d="M418.8,374.2l-9.9-9.9v9.9h-2.1v-12.8h1.9c1.2,1.3,2.9,3,5,5c2.5,2.5,4.1,4.1,4.9,4.9v-9.9h2.1v12.8H418.8z"
/>
<path class="st0" d="M430.1,363v11.2h-2.1V363h-5.6v-1.6h13.2v1.6H430.1z"/>
<path class="st1" d="M552.7,374.2v-9l-5.6,9h-1.5l-5.6-9v9H538v-12.8h2l6.3,10.3l6.4-10.3h2v12.8H552.7z"/>
<path class="st1" d="M568.6,374.2l-2.1-3.8h-7.2l-2.1,3.8h-2.3l7.3-12.8h1.6l7.1,12.8H568.6z M563,364.1l-2.7,4.7h5.3L563,364.1z"
/>
<path class="st1" d="M582.7,368c1.1,0.6,1.7,1.5,1.7,2.8v3.5h-2.1v-3.4c0-1.3-1.2-2-3.5-2h-5.3v5.4h-2.1v-12.8h7.5
c3.7,0,5.6,1.2,5.6,3.5C584.6,366.3,584,367.3,582.7,368z M579,363h-5.5v4.1h5.1c1.1,0,2.1-0.2,2.7-0.5c0.7-0.4,1.1-0.9,1.1-1.7
C582.5,363.7,581.3,363,579,363z"/>
<path class="st1" d="M598.8,374.2l-8-6.2l-2.6,1.6v4.6h-2.1v-12.8h2.1v6.2l10.1-6.2h3.4l-9.2,5.6l9.3,7.2H598.8z"/>
<path class="st1" d="M603.1,374.2v-12.8h12.1v1.6h-10v3.7h8.9v1.6h-8.9v4.2h10.1v1.6H603.1z"/>
<path class="st1" d="M623.5,363v11.2h-2.1V363h-5.6v-1.6H629v1.6H623.5z"/>
<path class="st1" d="M630,374.2v-12.8h2.1v12.8H630z"/>
<path class="st1" d="M645.7,374.2l-9.9-9.9v9.9h-2.1v-12.8h1.9c1.2,1.3,2.9,3,5,5c2.5,2.5,4.1,4.1,4.9,4.9v-9.9h2.1v12.8H645.7z"
/>
<path class="st1" d="M662.8,369.2h-6.2v-1.7h8.2c0.1,0.7,0.1,1.1,0.1,1.4c0,1.8-0.8,3.1-2.4,4.1c-1.4,0.9-3.2,1.3-5.3,1.3
c-2.6,0-4.6-0.6-6.1-1.7c-1.6-1.1-2.4-2.8-2.4-4.8c0-2,0.8-3.6,2.3-4.8c1.5-1.2,3.5-1.8,6.1-1.8c1.9,0,3.5,0.3,4.7,0.9
c1.5,0.7,2.5,2.1,3,4.1h-2.1c-0.3-1.2-0.9-2.1-1.8-2.6c-0.9-0.5-2.1-0.8-3.8-0.8c-2,0-3.5,0.4-4.6,1.3c-1.1,0.9-1.7,2.1-1.7,3.6
c0,1.6,0.6,2.8,1.7,3.6c1.1,0.8,2.7,1.3,4.7,1.3c1.5,0,2.9-0.3,3.9-1C662.2,371.1,662.8,370.2,662.8,369.2z"/>
</g>
</g>
</svg>
</body>
</html>
I think your nice logo is not really suitable for an drawing animation.
one way is drawing the outlines of your path and fill it in the callback function...
The following sample give you a little orientation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG 001</title>
<style>
body{font-family:"Calibri", sans-serif;}
svg{border:1px solid #eee;width:100px;height:100px;}
</style>
</head>
<body>
<p>Offset Dasharray</p>
<svg width="200" height="200" viewBox="0 0 500 500">
<path id="myPath" d="M 50 50 q 200 800 400 0" stroke="none"
stroke-width="5" fill="none" />
</svg>
<script>
var paintPathAni=function(path, duration, color, callback){
easeInOutQuad= function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }
easeInQuad= function (t) { return t*t}
easeOutQuad= function (t) { return t*(2-t) }
/*
for (var i=0; i<=1; i+=0.1)
{
console.log(easeInOutQuad(i));
}
*/
var len=path.getTotalLength();
var aktLen;
var sumSteps = duration / (1000/60) // 60 pics per second
var step=1;
var pathAnim;
var anim=function(){
//aktLen = len/sumSteps*step;
aktLen = easeInOutQuad(step/sumSteps)*len;
//aktLen = easeInQuad(step/sumSteps)*len;
//aktLen = easeOutQuad(step/sumSteps)*len;
path.setAttribute('stroke-dasharray', aktLen + ' ' + (len - aktLen));
path.setAttribute('stroke',color);
if (step < sumSteps){
step++;
pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second
} else {
clearTimeout(pathAnim);
path.setAttribute('stroke',"red");
path.setAttribute('stroke-dasharray','none');
if (callback) return callback();
}
}
anim();
}
paintPathAni(myPath, 3500,'red',function(){console.log('Animation End')});
</script>
</body>
</html>