svg tooltip on mouse hover position - svg

I'm working on a svg, a tooltip must appear on hover, but the problem is that tooltips appear far from the desired location.
The svg is a map and that's why the tooltip's location must be precise. First intention that the svg itself is the problem but after checking with another one which works perfectly I didn't find the source of the problem.
the actual result:
the desired one:
the yellow part is where the hover happen in the map.
Part of the svg code:
<svg id="Layer_0" data-name="Layer 0" xmlns="http://www.w3.org/2000/svg" width="529.017" height="491.509" viewBox="0 0 529.017 491.509">
<defs>
<style>
.cls-5898b1 {
fill: #5898b1 ;
}
.cls-f9f9f9 {
fill: #f9f9f9 ;
}
.cls-061d53 {
fill: #061d53 ;
}
.cls-5898b1, .cls-f9f9f9, .cls-061d53, .cls-IDF {
stroke: #061d53;
stroke-width: 0.5px;
}
.cls-f9f9f9-nostroke {
fill: #f9f9f9;
}
.cls-IDF {
fill: #bee0e0;
}
/* .mapImage, .mapImageMobile { */
/* float: left; */
/* width: 100%; */
/* } */
.mapImage path, .mapImageMobile path {
stroke-width: 1px;
}
.mapImage polygon, .mapImageMobile polygon {
stroke-width: 1px;
}
.mapImage path:hover, .mapImage polygon:hover, .mapImageMobile path:hover,
.mapImageMobile polygon:hover {
fill: #ffcb00;
}
.cls-1, .cls-4 {
stroke: #C4C4C4;
}
.st0 {
fill: #000000;
}
.cls-1, .cls-3, .cls-2 {
fill: transparent;
}
<g id="Groupe_1355" data-name="Groupe 1355" transform="translate(-129.507 -2290.08)">
<g id="Groupe_1190" data-name="Groupe 1190" transform="translate(-35.507 2042.682)">
<a id="centre" style="stroke:#061D53;">
<path id="FR-F" class="cls-f9f9f9-nostroke" data-name="Tracé 1042" d="M2822.574,2031.032a.545.545,0,0,1-.094-.146,10,10,0,0,1,0-3.668c.084-.661.556-1.926.667-2.583.064-.382-.071-1.209.125-1.542.248-.421,1.289-.729,1.625-1.083a7.25,7.25,0,0,0,1.292-2.167,19.775,19.775,0,0,0,.083-2.125,20.276,20.276,0,0,1,.75-3c.172-.478.755-1.34.875-1.834.161-.668-.172-2.111.083-2.75a3.738,3.738,0,0,1,1.375-1.542,3.789,3.789,0,0,1,1.709,0c.388.08,1.067.562,1.458.625a1.778,1.778,0,0,0,1-.083c.406-.3.38-1.531.75-1.875a4.486,4.486,0,0,1,1.834-.583,12.812,12.812,0,0,0,1.292,0c.418-.125,1.04-.834,1.458-.958.469-.14,1.515.206,1.959,0a2.524,2.524,0,0,0,.917-1.084c.147-.4-.118-1.3,0-1.708a3.525,3.525,0,0,1,.959-1.542c.441-.287,1.609-.064,2.084-.292a4.236,4.236,0,0,0,1.375-1.292c.323-.575.277-1.98.542-2.584.18-.41.952-1.019,1.042-1.458.107-.523-.7-1.609-.459-2.084s1.631-.473,2-.875a4.753,4.753,0,0,0,.75-2.208c.024-.371-.3-1.087-.292-1.458.019-.614.86-1.808.625-2.376-.166-.4-1.393-.454-1.5-.875s.6-1.135.875-1.459c.212-.248.875-.533,1-.833.141-.338-.328-1.154-.125-1.459s1.171-.178,1.417-.458a1.528,1.528,0,0,0,.208-1.125,1.348,1.348,0,0,0-.667-.5c-.238-.079-.775.108-1,0a2.837,2.837,0,0,1-.853-.986c-.059-.1-.109-.189-.147-.264a4.525,4.525,0,0,1-.5-1.833c.038-.362.614-.933.667-1.292a3.093,3.093,0,0,0-.292-1.542c-.137-.221-.663-.429-.833-.625-.281-.323-.875-1.074-.833-1.5a2.776,2.776,0,0,1,1.333-1.584c.5-.206,1.633.313,2.167.208a4.927,4.927,0,0,0,1.667-.875,7.99,7.99,0,0,0,1.208-1.667,10.572,10.572,0,0,0,1.083-2.625,5.313,5.313,0,0,0-.25-2.5c-.141-.254-.753-.469-.917-.708a12.664,12.664,0,0,1-.583-2,5.6,5.6,0,0,0-.958-1.917c-.219-.172-.842-.113-1.083-.25a4.216,4.216,0,0,1-1.25-1.292,4.653,4.653,0,0,1-.375-2.084,3.471,3.471,0,0,1,.367-.953,4.334,4.334,0,0,1,.592-.881,5.386,5.386,0,0,1,1.709-1c.657-.211,2.113.016,2.75-.25.553-.23,1.324-1.227,1.834-1.542a7.255,7.255,0,0,1,1.542-.667,16.14,16.14,0,0,1,1.667-.125c.732-.074,2.221-.613,2.917-.375.321.109.633.867.958.958a2.907,2.907,0,0,0,1.375-.333,7.579,7.579,0,0,0,2.125-1.375,6.794,6.794,0,0,0,.625-1.375,6.764,6.764,0,0,1,.75-1.792c.329-.314,1.339-.359,1.709-.625a2.534,2.534,0,0,0,.833-1.042c.079-.368-.428-1.086-.375-1.458a2.924,2.924,0,0,1,.667-1.125,7.51,7.51,0,0,1,1.258-.661,5.364,5.364,0,0,1,.77,1.23c.089.322-.11,1.019,0,1.333.177.5,1.107,1.185,1.334,1.667a4.512,4.512,0,0,1,.279,1.334,16.093,16.093,0,0,0-.279,1.834,8.07,8.07,0,0,0,.667,1.167,7.467,7.467,0,0,1,.667,2.112c.007.594-.847,1.713-.667,2.278.1.32.862.559,1.056.833.272.383.315,1.413.611,1.778.153.189.643.351.833.5a5.356,5.356,0,0,1,1.223,1.223c.2.4.027,1.405.278,1.778.271.4,1.27.72,1.667,1,.25.177.836.492.945.779.18.472-.364,1.5-.306,2a3.339,3.339,0,0,0,.583,1.444,3.058,3.058,0,0,0,1.195.556c.278.061.873-.1,1.139,0,.376.145.836.9,1.2,1.083.31.157,1.094.057,1.362.278a5.025,5.025,0,0,1,.944,2.278c.094.47-.179,1.473,0,1.917.153.381.985.8,1.139,1.181a3.008,3.008,0,0,1,0,1.32c-.057.255-.444.684-.445.945a1.046,1.046,0,0,0,.306.653c.3.194,1.063.066,1.417.042a2.332,2.332,0,0,0,1-.167c.175-.141.149-.705.334-.833.282-.2,1.031-.037,1.375-.042a4.759,4.759,0,0,0,1.25,0,1.625,1.625,0,0,0,.667-.625c.1-.229-.153-.8,0-1a1.527,1.527,0,0,1,1.125-.292c.414.086,1.013.766,1.333,1.042.262.227.654.938,1,.958.416.025,1.09-.662,1.333-1,.116-.16.09-.634.25-.75a1.446,1.446,0,0,1,1.125,0c.284.162.383.964.667,1.125.417.237,1.516-.263,1.917,0,.371.242.617,1.191.708,1.625.085.407-.25,1.333,0,1.667s1.285.173,1.584.458a4.559,4.559,0,0,1,.708,2.084,3.276,3.276,0,0,1-.083,1.458c-.172.329-1,.583-1.167.917a1.689,1.689,0,0,0,0,1.167,1.655,1.655,0,0,0,1,.542c.35.018.968-.409,1.292-.542a7.726,7.726,0,0,1,1.458-.583,7.4,7.4,0,0,1,1.931.292,9.191,9.191,0,0,0,1.584.556,4.1,4.1,0,0,0,1.889-.695c.236-.194.39-.864.639-1.042a2.652,2.652,0,0,1,1.167-.263,3.458,3.458,0,0,1,1.167.263c.279.142.634.781.944.82a2.181,2.181,0,0,0,1.223-.612c.21-.2.3-.879.556-1.028.193-.115.682.033,1.06.1a1.526,1.526,0,0,0,.176.564,2.168,2.168,0,0,0,.916.583c.24.07.759-.063,1,0a2.084,2.084,0,0,1,1.042.583c.218.392-.189,1.356-.083,1.792a4.048,4.048,0,0,0,.917,1.584,9.343,9.343,0,0,0,1.375.542c.224.12.716.357.834.583a4.751,4.751,0,0,1,0,2.334,5.606,5.606,0,0,1-.792,1.833c-.208.255-.915.468-1.084.75-.188.315.061,1.17-.167,1.459-.322.408-1.659.282-1.958.708a2.309,2.309,0,0,0,0,1.458c.087.288.6.707.667,1a4.265,4.265,0,0,1-.25,1.625,4.537,4.537,0,0,1-.583,1.167c-.133.16-.541.334-.667.5-.175.231-.2.893-.417,1.083a2.6,2.6,0,0,1-1.459.333c-.2-.02-.545-.32-.75-.333a2.863,2.863,0,0,0-1.542.458,2.456,2.456,0,0,0-.625,1.417,3.426,3.426,0,0,0,.917,1.667c.344.321,1.411.427,1.709.792a5.322,5.322,0,0,1,.5,2.125c.049.424-.169,1.316,0,1.708.113.264.7.538.833.792a2.246,2.246,0,0,1,.209,1.25,2.986,2.986,0,0,1-1.083,1.125c-.26.156-.964.108-1.167.333a1.617,1.617,0,0,0-.208,1.167c.1.279.755.522.875.792.182.409-.132,1.363,0,1.792.1.337.692.828.792,1.167a4.344,4.344,0,0,1-.042,1.667,6.105,6.105,0,0,1-.75,1.542c-.179.252-.757.589-.875.875a3.652,3.652,0,0,0,0,1.625,4.967,4.967,0,0,0,.875,1.875c.3.3,1.22.432,1.542.709a4.581,4.581,0,0,1,.875,1.333c.265.648.18,2.15.542,2.75.18.3.917.569,1.084.875a5.666,5.666,0,0,1,.25,2.292c-.028.48-.412,1.395-.431,1.875a4.436,4.436,0,0,0,.278,1.861c.245.4,1.218.755,1.528,1.112a4.5,4.5,0,0,1,.861,1.611,8.536,8.536,0,0,1-.444,2.695c-.126.454-.618,1.286-.694,1.75a6.316,6.316,0,0,0,.083,1.7c.084.427.589,1.2.583,1.639a6.057,6.057,0,0,1-.7,1.806,9.875,9.875,0,0,0-.944,1.612,2.345,2.345,0,0,0,.043.756c-.3-.048-.6-.121-.766-.145-.43-.063-1.244-.607-1.667-.5-.3.077-.629.711-.889.889-.426.292-1.539.454-1.889.833-.229.25-.243,1.006-.444,1.279a2.911,2.911,0,0,1-1.056.777c-.554.182-2-.481-2.334,0-.152.222.54.779.389,1s-.792,0-1.055,0a7.7,7.7,0,0,0-1.557,0c-.36.1-.917.677-1.277.778-.307.087-1.079-.25-1.278,0s.278,1.223,0,1.333a4.9,4.9,0,0,0-1.445.612,1.693,1.693,0,0,0-.333,1c.02.148.32.35.333.5.02.21-.349.567-.333.778.021.292.5.73.612,1,.177.422.726,1.417.444,1.778-.086.11-.43-.059-.556,0-.339.162-.616.986-.944,1.167a5.688,5.688,0,0,1-2.834.333c-.373-.071-.954-.729-1.334-.722-.355.007-.924.531-1.223.722-.227.145-.662.465-.888.612-.724.466-2.522,1.029-2.946,1.778-.177.314.182,1.133,0,1.444-.194.33-1.075.453-1.358.744a4.049,4.049,0,0,0-1.753.062c-.307.12-.469.912-.75,1.084a6.319,6.319,0,0,1-3.834.5c-.273-.089-.567-.685-.833-.792-.62-.248-2.011.12-2.667,0-.548-.1-1.535-.691-2.083-.792a6.887,6.887,0,0,0-2,0c-.469.1-1.276.874-1.75.792s-.959-1.189-1.417-1.375c-.328-.133-1.2-.278-1.417,0-.346.435.566,1.615.5,2.167-.033.278-.223.967-.5,1-.407.049-.668-1.142-1.064-1.25a2.39,2.39,0,0,0-1.853.639c-.149.209.182.846,0,1.028a1.85,1.85,0,0,1-1.834,0c-.316-.317.268-1.433,0-1.792-.195-.262-.927-.328-1.25-.375a5.1,5.1,0,0,0-1.917,0,3.008,3.008,0,0,0-1.25,1.139c-.1.235.133.808,0,1.028-.28.462-1.421.784-1.917,1-.344.15-1.079.663-1.417.5-.4-.191-.3-1.329-.583-1.667a2.894,2.894,0,0,0-1.584-.875,1.829,1.829,0,0,0-.917.542c-.2.222-.252.918-.5,1.083a3.261,3.261,0,0,1-2.084.083,4.657,4.657,0,0,1-1.028-.833c-.149-.128-.45-.3-.678-.489a.745.745,0,0,1-.294-.387c-.078-.485.989-1.218.973-1.709a1.705,1.705,0,0,0-.556-.833c-.348-.3-1.469-.338-1.667-.75-.252-.524.6-1.669.583-2.25a2.908,2.908,0,0,0-.583-1.75c-.338-.243-1.256-.068-1.667,0-.51.084-1.479.86-1.959.667-.674-.271-.809-2.08-1.333-2.583-.464-.445-1.854-.656-2.334-1.084a5.866,5.866,0,0,1-1.584-2.584c-.067-.529.546-1.514.625-2.042a6.676,6.676,0,0,0,0-2.129,7.393,7.393,0,0,0-1.292-2.038c-.411-.464-1.6-1.04-1.917-1.57-.395-.649-.208-2.339-.625-2.973-.358-.543-1.72-.991-2.125-1.5a9.785,9.785,0,0,1-.75-1.833c-.306-.732-.675-2.371-1.25-2.917-.282-.269-1.134-.326-1.458-.542-.405-.269-.87-1.272-1.333-1.417a1.485,1.485,0,0,0-1.167.25c-.3.365.164,1.437,0,1.876a1.525,1.525,0,0,1-.542.625c-.442.213-1.529-.151-1.959.083-.269.147-.436.859-.708,1a2.222,2.222,0,0,1-.958,0c-.649-.078-1.888-.635-2.542-.625-.313,0-.912.435-1.209.333a3.476,3.476,0,0,1-1.458-1.959c-.112-.486.372-1.46.375-1.959a4.754,4.754,0,0,0-.375-2.083,2.5,2.5,0,0,0-1.209-.708c-.3-.055-.933.344-1.208.208-.4-.2-.5-1.29-.833-1.583-.368-.321-1.459-.355-1.833-.667-.521-.433-.969-1.792-1.375-2.334C2823,2031.41,2822.728,2031.213,2822.574,2031.032Z" transform="translate(-2481.446 -1580.518)">
<title transform="translate(-2481.446 -1580.518)">Centre Val de Loire</title>
</path>
</a>
It appear that the bug appears just on large size desktops, in medium size the tooltip works perfectly.


You need to add closing tags </style>,</defs> </g> </svg>
Move <title> tag from path inside<a>link tags
Remove from <title> transform = "translate (-2481.446 -1580.518)
<svg id="Layer_0" data-name="Layer 0" xmlns="http://www.w3.org/2000/svg" width="529.017" height="491.509" viewBox="0 0 529.017 491.509">
<defs>
<style>
.cls-5898b1 {
fill: #5898b1 ;
}
.cls-f9f9f9 {
fill: #f9f9f9 ;
}
.cls-061d53 {
fill: #061d53 ;
}
.cls-5898b1, .cls-f9f9f9, .cls-061d53, .cls-IDF {
stroke: #061d53;
stroke-width: 0.5px;
}
.cls-f9f9f9-nostroke {
fill: #f9f9f9;
}
.cls-IDF {
fill: #bee0e0;
}
/* .mapImage, .mapImageMobile { */
/* float: left; */
/* width: 100%; */
/* } */
.mapImage path, .mapImageMobile path {
stroke-width: 1px;
}
.mapImage polygon, .mapImageMobile polygon {
stroke-width: 1px;
}
.mapImage path:hover, .mapImage polygon:hover, .mapImageMobile path:hover,
.mapImageMobile polygon:hover, path:hover {
fill: #ffcb00;
}
.cls-1, .cls-4 {
stroke: #C4C4C4;
}
.st0 {
fill: #000000;
}
.cls-1, .cls-3, .cls-2 {
fill: transparent;
}
</style>
</defs>
<g id="Groupe_1355" data-name="Groupe 1355" transform="translate(-129.507 -2290.08)">
<g id="Groupe_1190" data-name="Groupe 1190" transform="translate(-35.507 2042.682)">
<a id="centre" style="stroke:#061D53;">
<title transform="translate(-2481.446 -1580.518)">Centre Val de Loire</title>
<path id="FR-F" class="cls-f9f9f9-nostroke" data-name="Tracé 1042" d="M2822.574,2031.032a.545.545,0,0,1-.094-.146,10,10,0,0,1,0-3.668c.084-.661.556-1.926.667-2.583.064-.382-.071-1.209.125-1.542.248-.421,1.289-.729,1.625-1.083a7.25,7.25,0,0,0,1.292-2.167,19.775,19.775,0,0,0,.083-2.125,20.276,20.276,0,0,1,.75-3c.172-.478.755-1.34.875-1.834.161-.668-.172-2.111.083-2.75a3.738,3.738,0,0,1,1.375-1.542,3.789,3.789,0,0,1,1.709,0c.388.08,1.067.562,1.458.625a1.778,1.778,0,0,0,1-.083c.406-.3.38-1.531.75-1.875a4.486,4.486,0,0,1,1.834-.583,12.812,12.812,0,0,0,1.292,0c.418-.125,1.04-.834,1.458-.958.469-.14,1.515.206,1.959,0a2.524,2.524,0,0,0,.917-1.084c.147-.4-.118-1.3,0-1.708a3.525,3.525,0,0,1,.959-1.542c.441-.287,1.609-.064,2.084-.292a4.236,4.236,0,0,0,1.375-1.292c.323-.575.277-1.98.542-2.584.18-.41.952-1.019,1.042-1.458.107-.523-.7-1.609-.459-2.084s1.631-.473,2-.875a4.753,4.753,0,0,0,.75-2.208c.024-.371-.3-1.087-.292-1.458.019-.614.86-1.808.625-2.376-.166-.4-1.393-.454-1.5-.875s.6-1.135.875-1.459c.212-.248.875-.533,1-.833.141-.338-.328-1.154-.125-1.459s1.171-.178,1.417-.458a1.528,1.528,0,0,0,.208-1.125,1.348,1.348,0,0,0-.667-.5c-.238-.079-.775.108-1,0a2.837,2.837,0,0,1-.853-.986c-.059-.1-.109-.189-.147-.264a4.525,4.525,0,0,1-.5-1.833c.038-.362.614-.933.667-1.292a3.093,3.093,0,0,0-.292-1.542c-.137-.221-.663-.429-.833-.625-.281-.323-.875-1.074-.833-1.5a2.776,2.776,0,0,1,1.333-1.584c.5-.206,1.633.313,2.167.208a4.927,4.927,0,0,0,1.667-.875,7.99,7.99,0,0,0,1.208-1.667,10.572,10.572,0,0,0,1.083-2.625,5.313,5.313,0,0,0-.25-2.5c-.141-.254-.753-.469-.917-.708a12.664,12.664,0,0,1-.583-2,5.6,5.6,0,0,0-.958-1.917c-.219-.172-.842-.113-1.083-.25a4.216,4.216,0,0,1-1.25-1.292,4.653,4.653,0,0,1-.375-2.084,3.471,3.471,0,0,1,.367-.953,4.334,4.334,0,0,1,.592-.881,5.386,5.386,0,0,1,1.709-1c.657-.211,2.113.016,2.75-.25.553-.23,1.324-1.227,1.834-1.542a7.255,7.255,0,0,1,1.542-.667,16.14,16.14,0,0,1,1.667-.125c.732-.074,2.221-.613,2.917-.375.321.109.633.867.958.958a2.907,2.907,0,0,0,1.375-.333,7.579,7.579,0,0,0,2.125-1.375,6.794,6.794,0,0,0,.625-1.375,6.764,6.764,0,0,1,.75-1.792c.329-.314,1.339-.359,1.709-.625a2.534,2.534,0,0,0,.833-1.042c.079-.368-.428-1.086-.375-1.458a2.924,2.924,0,0,1,.667-1.125,7.51,7.51,0,0,1,1.258-.661,5.364,5.364,0,0,1,.77,1.23c.089.322-.11,1.019,0,1.333.177.5,1.107,1.185,1.334,1.667a4.512,4.512,0,0,1,.279,1.334,16.093,16.093,0,0,0-.279,1.834,8.07,8.07,0,0,0,.667,1.167,7.467,7.467,0,0,1,.667,2.112c.007.594-.847,1.713-.667,2.278.1.32.862.559,1.056.833.272.383.315,1.413.611,1.778.153.189.643.351.833.5a5.356,5.356,0,0,1,1.223,1.223c.2.4.027,1.405.278,1.778.271.4,1.27.72,1.667,1,.25.177.836.492.945.779.18.472-.364,1.5-.306,2a3.339,3.339,0,0,0,.583,1.444,3.058,3.058,0,0,0,1.195.556c.278.061.873-.1,1.139,0,.376.145.836.9,1.2,1.083.31.157,1.094.057,1.362.278a5.025,5.025,0,0,1,.944,2.278c.094.47-.179,1.473,0,1.917.153.381.985.8,1.139,1.181a3.008,3.008,0,0,1,0,1.32c-.057.255-.444.684-.445.945a1.046,1.046,0,0,0,.306.653c.3.194,1.063.066,1.417.042a2.332,2.332,0,0,0,1-.167c.175-.141.149-.705.334-.833.282-.2,1.031-.037,1.375-.042a4.759,4.759,0,0,0,1.25,0,1.625,1.625,0,0,0,.667-.625c.1-.229-.153-.8,0-1a1.527,1.527,0,0,1,1.125-.292c.414.086,1.013.766,1.333,1.042.262.227.654.938,1,.958.416.025,1.09-.662,1.333-1,.116-.16.09-.634.25-.75a1.446,1.446,0,0,1,1.125,0c.284.162.383.964.667,1.125.417.237,1.516-.263,1.917,0,.371.242.617,1.191.708,1.625.085.407-.25,1.333,0,1.667s1.285.173,1.584.458a4.559,4.559,0,0,1,.708,2.084,3.276,3.276,0,0,1-.083,1.458c-.172.329-1,.583-1.167.917a1.689,1.689,0,0,0,0,1.167,1.655,1.655,0,0,0,1,.542c.35.018.968-.409,1.292-.542a7.726,7.726,0,0,1,1.458-.583,7.4,7.4,0,0,1,1.931.292,9.191,9.191,0,0,0,1.584.556,4.1,4.1,0,0,0,1.889-.695c.236-.194.39-.864.639-1.042a2.652,2.652,0,0,1,1.167-.263,3.458,3.458,0,0,1,1.167.263c.279.142.634.781.944.82a2.181,2.181,0,0,0,1.223-.612c.21-.2.3-.879.556-1.028.193-.115.682.033,1.06.1a1.526,1.526,0,0,0,.176.564,2.168,2.168,0,0,0,.916.583c.24.07.759-.063,1,0a2.084,2.084,0,0,1,1.042.583c.218.392-.189,1.356-.083,1.792a4.048,4.048,0,0,0,.917,1.584,9.343,9.343,0,0,0,1.375.542c.224.12.716.357.834.583a4.751,4.751,0,0,1,0,2.334,5.606,5.606,0,0,1-.792,1.833c-.208.255-.915.468-1.084.75-.188.315.061,1.17-.167,1.459-.322.408-1.659.282-1.958.708a2.309,2.309,0,0,0,0,1.458c.087.288.6.707.667,1a4.265,4.265,0,0,1-.25,1.625,4.537,4.537,0,0,1-.583,1.167c-.133.16-.541.334-.667.5-.175.231-.2.893-.417,1.083a2.6,2.6,0,0,1-1.459.333c-.2-.02-.545-.32-.75-.333a2.863,2.863,0,0,0-1.542.458,2.456,2.456,0,0,0-.625,1.417,3.426,3.426,0,0,0,.917,1.667c.344.321,1.411.427,1.709.792a5.322,5.322,0,0,1,.5,2.125c.049.424-.169,1.316,0,1.708.113.264.7.538.833.792a2.246,2.246,0,0,1,.209,1.25,2.986,2.986,0,0,1-1.083,1.125c-.26.156-.964.108-1.167.333a1.617,1.617,0,0,0-.208,1.167c.1.279.755.522.875.792.182.409-.132,1.363,0,1.792.1.337.692.828.792,1.167a4.344,4.344,0,0,1-.042,1.667,6.105,6.105,0,0,1-.75,1.542c-.179.252-.757.589-.875.875a3.652,3.652,0,0,0,0,1.625,4.967,4.967,0,0,0,.875,1.875c.3.3,1.22.432,1.542.709a4.581,4.581,0,0,1,.875,1.333c.265.648.18,2.15.542,2.75.18.3.917.569,1.084.875a5.666,5.666,0,0,1,.25,2.292c-.028.48-.412,1.395-.431,1.875a4.436,4.436,0,0,0,.278,1.861c.245.4,1.218.755,1.528,1.112a4.5,4.5,0,0,1,.861,1.611,8.536,8.536,0,0,1-.444,2.695c-.126.454-.618,1.286-.694,1.75a6.316,6.316,0,0,0,.083,1.7c.084.427.589,1.2.583,1.639a6.057,6.057,0,0,1-.7,1.806,9.875,9.875,0,0,0-.944,1.612,2.345,2.345,0,0,0,.043.756c-.3-.048-.6-.121-.766-.145-.43-.063-1.244-.607-1.667-.5-.3.077-.629.711-.889.889-.426.292-1.539.454-1.889.833-.229.25-.243,1.006-.444,1.279a2.911,2.911,0,0,1-1.056.777c-.554.182-2-.481-2.334,0-.152.222.54.779.389,1s-.792,0-1.055,0a7.7,7.7,0,0,0-1.557,0c-.36.1-.917.677-1.277.778-.307.087-1.079-.25-1.278,0s.278,1.223,0,1.333a4.9,4.9,0,0,0-1.445.612,1.693,1.693,0,0,0-.333,1c.02.148.32.35.333.5.02.21-.349.567-.333.778.021.292.5.73.612,1,.177.422.726,1.417.444,1.778-.086.11-.43-.059-.556,0-.339.162-.616.986-.944,1.167a5.688,5.688,0,0,1-2.834.333c-.373-.071-.954-.729-1.334-.722-.355.007-.924.531-1.223.722-.227.145-.662.465-.888.612-.724.466-2.522,1.029-2.946,1.778-.177.314.182,1.133,0,1.444-.194.33-1.075.453-1.358.744a4.049,4.049,0,0,0-1.753.062c-.307.12-.469.912-.75,1.084a6.319,6.319,0,0,1-3.834.5c-.273-.089-.567-.685-.833-.792-.62-.248-2.011.12-2.667,0-.548-.1-1.535-.691-2.083-.792a6.887,6.887,0,0,0-2,0c-.469.1-1.276.874-1.75.792s-.959-1.189-1.417-1.375c-.328-.133-1.2-.278-1.417,0-.346.435.566,1.615.5,2.167-.033.278-.223.967-.5,1-.407.049-.668-1.142-1.064-1.25a2.39,2.39,0,0,0-1.853.639c-.149.209.182.846,0,1.028a1.85,1.85,0,0,1-1.834,0c-.316-.317.268-1.433,0-1.792-.195-.262-.927-.328-1.25-.375a5.1,5.1,0,0,0-1.917,0,3.008,3.008,0,0,0-1.25,1.139c-.1.235.133.808,0,1.028-.28.462-1.421.784-1.917,1-.344.15-1.079.663-1.417.5-.4-.191-.3-1.329-.583-1.667a2.894,2.894,0,0,0-1.584-.875,1.829,1.829,0,0,0-.917.542c-.2.222-.252.918-.5,1.083a3.261,3.261,0,0,1-2.084.083,4.657,4.657,0,0,1-1.028-.833c-.149-.128-.45-.3-.678-.489a.745.745,0,0,1-.294-.387c-.078-.485.989-1.218.973-1.709a1.705,1.705,0,0,0-.556-.833c-.348-.3-1.469-.338-1.667-.75-.252-.524.6-1.669.583-2.25a2.908,2.908,0,0,0-.583-1.75c-.338-.243-1.256-.068-1.667,0-.51.084-1.479.86-1.959.667-.674-.271-.809-2.08-1.333-2.583-.464-.445-1.854-.656-2.334-1.084a5.866,5.866,0,0,1-1.584-2.584c-.067-.529.546-1.514.625-2.042a6.676,6.676,0,0,0,0-2.129,7.393,7.393,0,0,0-1.292-2.038c-.411-.464-1.6-1.04-1.917-1.57-.395-.649-.208-2.339-.625-2.973-.358-.543-1.72-.991-2.125-1.5a9.785,9.785,0,0,1-.75-1.833c-.306-.732-.675-2.371-1.25-2.917-.282-.269-1.134-.326-1.458-.542-.405-.269-.87-1.272-1.333-1.417a1.485,1.485,0,0,0-1.167.25c-.3.365.164,1.437,0,1.876a1.525,1.525,0,0,1-.542.625c-.442.213-1.529-.151-1.959.083-.269.147-.436.859-.708,1a2.222,2.222,0,0,1-.958,0c-.649-.078-1.888-.635-2.542-.625-.313,0-.912.435-1.209.333a3.476,3.476,0,0,1-1.458-1.959c-.112-.486.372-1.46.375-1.959a4.754,4.754,0,0,0-.375-2.083,2.5,2.5,0,0,0-1.209-.708c-.3-.055-.933.344-1.208.208-.4-.2-.5-1.29-.833-1.583-.368-.321-1.459-.355-1.833-.667-.521-.433-.969-1.792-1.375-2.334C2823,2031.41,2822.728,2031.213,2822.574,2031.032Z" transform="translate(-2481.446 -1580.518)">
</path>
</a>
</g>
</g>
</svg>

Related

Safari won't rotate an SVG path but chrome and firefox does?

I'm running into an extremely odd issue. I'm trying to animate an SVG path rotation based on an image hover. It seems to not add the class with the transform when you hover over the image. When I manually add it in the HTML it does work but I don't get why it won't work with just a hover function. I have added all the prefixes too. I made a codepen with an example SVG and image to hover. Please check this in safari and chrome.
Codepen link
HTML
<div class="wrapper-logo">
<svg class="App-logo" viewBox="0 0 375 84" fill="#DB3232" xmlns="http://www.w3.org/2000/svg">
<path class="LETTER-P" d="M39.3,6.1c9.59-.72,18.89,2.31,26.17,8.58,14.99,12.98,16.72,35.69,3.68,50.69-12.98,15.07-35.76,16.8-50.75,3.82-2.52-2.24-4.76-4.83-6.63-7.64v14.13c0,1.59-1.3,2.88-2.88,2.88s-2.88-1.3-2.88-2.88V41.94c0-8.58,3.1-16.94,8.72-23.43,6.27-7.28,14.99-11.68,24.58-12.4Z" />
</svg>
</div>
<svg class="App-pill" viewBox="0 0 375 84" fill="#DB3232" xmlns="http://www.w3.org/2000/svg"> <defs>
<mask id="mask-p">
<path class="LETTER-P" d="M39.3,6.1c9.59-.72,18.89,2.31,26.17,8.58,14.99,12.98,16.72,35.69,3.68,50.69-12.98,15.07-35.76,16.8-50.75,3.82-2.52-2.24-4.76-4.83-6.63-7.64v14.13c0,1.59-1.3,2.88-2.88,2.88s-2.88-1.3-2.88-2.88V41.94c0-8.58,3.1-16.94,8.72-23.43,6.27-7.28,14.99-11.68,24.58-12.4Z" fill="white"/>
<path class='pill-1' d="M47.3377 18.8021L18.8226 47.1101C13.7279 52.1678 13.7293 60.3942 18.8258 65.3743C23.9223 70.4298 32.2122 70.4281 37.2309 65.3704L65.746 37.0624C68.2554 34.5713 69.5477 31.2502 69.5471 27.9295C69.5465 24.6087 68.253 21.2882 65.7428 18.7982C60.7223 13.7426 52.4325 13.7444 47.3377 18.8021Z" fill="black"/>
</mask>
</defs>
</svg>
<footer>
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/" class="shoes small" alt="browns" onmouseover="rotateBrowns(this)" />
</footer>
CSS
.App-pill {
display: block;
width: 0;
height: 0;
}
.App-logo {
min-width: 50%;
pointer-events: none;
}
/* LETTER */
.LETTER-P {
-webkit-mask: url(#mask-p);
mask: url(#mask-p);
}
.pill-1 {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform-origin: 42px 41px;
-ms-transform-origin: 42px 41px;
transform-origin: 42px 41px;
}
.horizontal {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
JS
let shoesarray = document.querySelectorAll('.shoes')
let path1 = document.querySelector('.pill-1')
let path2 = document.querySelector('.pill-1')
let path3 = document.querySelector('.pill-1')
let path4 = document.querySelector('.pill-1')
function rotateBrowns() {
console.log('e')
path1.classList.add('horizontal')
path2.classList.add('horizontal')
path3.classList.add('horizontal')
path4.classList.add('horizontal')
}
function revertBrowns() {
console.log('e')
path1.classList.remove('horizontal')
path2.classList.remove('horizontal')
path3.classList.remove('horizontal')
path4.classList.remove('horizontal')
}

Pure svg pie chart, text align center

How to place the value text inside each pie chart without framework d3.js.
i have tried using some javascript to get the width. It is the default
getBBox()); // get the SVG width.
I use stroke-dasharray to expand the pie space.
Which way i can get the correct stroke-dasharray size from javascript?
figure {
background-color: #eee;
display: block;
height: 0;
margin: 0 auto;
position: relative;
font-size:16px;
font-size:1vw;
width: 40em;
padding-bottom: 40em;
}
svg {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: visible;
}
circle {
fill:transparent;
stroke-width:31.8309886184;
stroke-dasharray: 0,0,0,100;
stroke-dashoffset: 25;
animation: pie1 4s ease both;
}
.pie1 {
stroke:pink;
}
.pie2 {
stroke: green;
-webkit-animation-name: pie2;
animation-name: pie2;
}
.pie3 {
stroke: aqua;
-webkit-animation-name: pie3;
animation-name: pie3;
}
#keyframes pie1 {
50%,100% {stroke-dasharray: 40,60,0,0;}
}
#keyframes pie2 {
50%,100% {stroke-dasharray: 0,40,30,30;}
}
#keyframes pie3 {
50%,100% {stroke-dasharray: 0,70,30,0;}
}
<body>
<figure>
<svg class="chart" viewBox="0 0 63.6619772368 63.6619772368">
<circle class="pie1" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie2" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie3" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
</svg>
</figure>
</body>

You can't. The getBBox() gets the bounds of the shape. In your case, the shapes are circles centred on the middle of the graph. You would need to use trigonometry to calculate the position for your text.
makeLabel('Pink', 340, 15.9);
makeLabel('Green', 110, 15.9);
makeLabel('Cyan', 210, 15.9);
function makeLabel(text, angle, radius)
{
const chart = document.getElementById("chart");
const label = document.createElementNS(chart.namespaceURI, "text");
label.classList.add("label");
label.setAttribute("x", 31.83 + Math.cos(angle * Math.PI/180) * radius);
label.setAttribute("y", 31.83 + Math.sin(angle * Math.PI/180) * radius);
label.textContent = text;
chart.appendChild(label);
}
figure {
background-color: #eee;
display: block;
height: 0;
margin: 0 auto;
position: relative;
font-size:16px;
font-size:1vw;
width: 40em;
padding-bottom: 40em;
}
svg {
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow: visible;
}
circle {
fill:transparent;
stroke-width:31.8309886184;
stroke-dasharray: 0,0,0,100;
stroke-dashoffset: 25;
animation: pie1 4s ease both;
}
.pie1 {
stroke:pink;
stroke-dasharray: 40,60,0,0;
}
.pie2 {
stroke: green;
stroke-dasharray: 0,40,30,30;
}
.pie3 {
stroke: aqua;
stroke-dasharray: 0,70,30,0;
}
.label {
font: 3px sans-serif;
text-anchor: middle;
}
<body>
<figure>
<svg id="chart" class="chart" viewBox="0 0 63.6619772368 63.6619772368">
<circle class="pie1" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie2" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
<circle class="pie3" cx="31.8309886184" cy="31.8309886184" r="15.9154943092" />
</svg>
</figure>
</body>
BTW, that approach for doing pie graphs works most of the time. And may be alright for your case. But in general it is not recommended. Some browsers have trouble rendering circles drawn that way. You might want to consider switching to drawing proper circular sectors.

Creating a SVG image tooltip

hi guys i need some help i need to create a tooltip with an image inside it however this is for an svg map so i cant use divs like in css and html.I have managed to create an image tooltip .However only one image can appear when i hover on all elements how can i make different images appear for different svg elements ? this is the code i have used for my tooltip:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)" width="380" height="100">
<style>
.caption{
font-size: 14px;
font-family: Georgia, serif;
}
.tooltip{
font-size: 12px;
}
.tooltip_bg{
fill: white;
stroke: black;
stroke-width: 1;
opacity: 0.85;
}
</style>
<script type="text/ecmascript">
<![CDATA[
function init(evt)
{
if ( window.svgDocument == null )
{
svgDocument = evt.target.ownerDocument;
}
tooltip = svgDocument.getElementById('tooltip');
tooltip_bg = svgDocument.getElementById('tooltip_bg');
}
function ShowTooltip(evt, mouseovertext)
{
tooltip.setAttributeNS(null,"x",evt.clientX+11);
tooltip.setAttributeNS(null,"y",evt.clientY+27);
tooltip.setAttributeNS(null,"visibility","visible");
length = tooltip.getComputedTextLength();
tooltip_bg.setAttributeNS(null,"width",length+8);
tooltip_bg.setAttributeNS(null,"x",evt.clientX+8);
tooltip_bg.setAttributeNS(null,"y",evt.clientY+14);
tooltip_bg.setAttributeNS(null,"visibility","visibile");
}
function HideTooltip(evt)
{
tooltip.setAttributeNS(null,"visibility","hidden");
tooltip_bg.setAttributeNS(null,"visibility","hidden");
}
]]>
</script>
<text class="caption" x="10" y="35">Mouseover a square</text>
<text class="caption" x="10" y="50">to display a tooltip</text>
<rect id="rect1" x="160" y="10" width="60" height="60" fill="blue"
onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"/>
<rect id="rect2" x="240" y="10" width="60" height="60" fill="green"
onmousemove="ShowTooltip(evt)"
onmouseout="HideTooltip(evt)"/>
<rect class="tooltip_bg" id="tooltip_bg"
x="0" y="0" rx="4" ry="4"
width="55" height="17" visibility="hidden"/>
<image xlink:href="Blooper-icon.png" class="tooltip" id="tooltip"x="0" y="0"height="50px"width="50px"visibility="hidden"/>
</svg>

in HTML
<div class="svgTooltip"></div>
<svg>
<path class="tempClass" .......>
</path>
</svg>
in CSS
.svgTooltip {
pointer-events: none;
position: absolute;
font-size: 15px;
text-align: center;
background: white;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
z-index: 5;
height: 30px;
line-height: 30px;
margin: 0 auto;
color: #21669e;
border-radius: 5px;
box-shadow: 0 0 0 1px rgb(122, 92, 92);
display: none;
}
.svgTooltip::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
width: 0;
height: 0;
margin-left: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgb(122, 92, 92);
}
.active {
display: block;
}
in JS
$(function() {
$tooltip = $(".svgTooltip");
$(".tempClass").hover(
function() {
$tooltip.addClass("active");
$tooltip.html($(this).attr("title"));
},
function() {
$tooltip.removeClass("active");
}
);
});
$(document).on("mousemove", function(e) {
$tooltip.css({
left: e.pageX - 30,
top: e.pageY - 70
});
});

Animate SVG Hamburger menu icon on click and keep it in :active state

I have a SVG hamburger menu icon that is animated when clicked. The goal is to transform it in to a "close" button when you activate the side-push menu. I need some help achieving that:
http://jsfiddle.net/a6ysa9zk/
HTML:
<div class="toggle-menu menu-right push-body">
<svg class="inline-svg" width="42px" height="42px" viewBox="0 0 42 42" enable-background="new 0 0 32 22.5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.0.4 (8054) - http://www.bohemiancoding.com/sketch -->
<title>Group</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g class="svg-menu-toggle" sketch:type="MSLayerGroup">
<circle class="round" fill="#3B3B41" sketch:type="MSShapeGroup" cx="21" cy="21" r="21"></circle>
<rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="26" width="18" height="4"></rect>
<rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="19" width="18" height="4"></rect>
<rect class="bar" fill="#F2F2F2" sketch:type="MSShapeGroup" x="12" y="12" width="18" height="4"></rect>
</g>
</svg>
</div>
CSS:
.svg-menu-toggle {
fill: #fff;
pointer-events: all;
cursor: pointer;
}
.svg-menu-toggle .round {
transition: fill .4s ease-in-out;
}
.svg-menu-toggle .bar {
-webkit-transform: rotate(0) translateY(0) translateX(0);
transform: rotate(0) translateY(0) translateX(0);
opacity: 1;
-webkit-transform-origin: 20px 10px;
transform-origin: 20px 10px;
-webkit-transition: -webkit-transform 0.4s ease-in-out, opacity 0.2s ease-in-out, fill .4s ease-in-out;
transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out, fill .4s ease-in-out;
}
.svg-menu-toggle .bar:nth-of-type(1) {
-webkit-transform-origin: 20px 10px;
transform-origin: 20px 10px;
}
.svg-menu-toggle .bar:nth-of-type(3) {
-webkit-transform-origin: 20px 20px;
transform-origin: 20px 20px;
}
.svg-menu-toggle:active .bar:nth-of-type(1) {
-webkit-transform: rotate(-45deg) translateY(-10px) translateX(-8px);
transform: rotate(-45deg) translateY(-10px) translateX(-8px);
fill: #3B3B41;
}
.svg-menu-toggle:active .bar:nth-of-type(2) {
opacity: 0;
}
.svg-menu-toggle:active .bar:nth-of-type(3) {
-webkit-transform: rotate(45deg) translateY(6px) translateX(0px);
transform: rotate(45deg) translateY(6px) translateX(0px);
fill: #3B3B41;
}
.svg-menu-toggle:active .round {
fill: #F2F2F2;
}
Javascript for menu toggle:
jQuery(document).ready(function ($) {
$('.toggle-menu').jPushMenu();
});

Instead of using the :active pseudo-element, its easier to add a class to the group (.svg-menu-toggle).
Unfortunately it isn't possible to use toggleClass from jQuery.
// CSS
.svg-menu-toggle:active become .svg-menu-toggle.active
// JS
$('.toggle-menu').on('click', function(e) {
var $toggle = $(this).find('.svg-menu-toggle');
// toggleClass with addClass & removeClass
});

SVG not working in Chrome

This works in Firefox but not Chrome. Basically the animation works correctly in Firefox with the lightbulb glowing and the leaf growing but for some reason cannot get it to work in Chrome. Thanks for the help here.
jsfiddle here, http://jsfiddle.net/EfLtD/1/
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
<g id="light-bulb-6-icon_1_">
<path fill="#FFFFFF" d="M-314.3,152.1c-2.1,0-2.8-0.6-7.4-5c-0.6-0.6-1.4-1.3-2.2-2h25.6c-0.9,0.8-1.7,1.6-2.4,2.2
c-4.6,4.3-5.3,4.8-7.4,4.8H-314.3z M-326.6,137.7c-1.7,0-3.1-1.4-3.1-3.1s1.4-3.1,3.1-3.1h31.2c1.7,0,3.1,1.4,3.1,3.1
c0,1.7-1.4,3.1-3.1,3.1H-326.6z M-327.4,123.9c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1h32.7c0.9,0,1.7,0.4,2.3,1
c0.5,0.6,0.8,1.3,0.8,2.1c0,1.8-1.4,3.1-3.1,3.1L-327.4,123.9L-327.4,123.9z M-298,109.7c0.3-13.3,6.4-23.6,12.4-33.5
c6-10,11.6-19.4,11.6-31.5c0-16.9-11.6-35.1-37.1-35.1c-25.5,0-37,18.2-37,35.1c0,12.1,5.6,21.4,11.5,31.3
c5.9,9.9,12,20.1,12.6,33.7h-9.1c-0.3-10.3-5.6-19.1-11.2-28.5c-6.4-10.8-13-21.9-13-36.5c0-13.7,5-25.2,14.4-33.2
c8.4-7.2,19.7-11.1,31.9-11.1c12.1,0,23.4,3.9,31.8,11.1c9.4,8,14.4,19.5,14.4,33.2c0,14.6-6.6,25.7-13,36.5
c-5.6,9.4-10.8,18.2-11.2,28.5L-298,109.7L-298,109.7z M-312.8,109.6c-3.3-14.5-1.4-40.1,6.7-54.6l2.4-4.3l-3.9,3.1
c-5.2,4-9.9,14.2-11.6,21.9c-5.4-3.9-7.4-10.6-5.3-18.3c2.9-10.6,14-22,31.7-23.2c-2,1.8-3.6,4.2-4.5,7c-1.9,5.3-1.3,10.1-0.7,14.7
c0.6,4.6,1.1,9-0.8,13.6c-2,4.8-6.1,7.9-11.3,8.4l-0.8,0.1l-0.1,0.8c-1,9.8,0.3,22.7,3.1,30.8L-312.8,109.6L-312.8,109.6z"/>
<path fill="#225650" d="M-311,1.4c11.9,0,23,3.9,31.2,10.9c9.2,7.8,14.1,19.1,14.1,32.5c0,14.3-6.6,25.3-12.9,36
c-5.5,9.2-10.6,17.9-11.3,28h-7c0.6-12.5,6.5-22.4,12.2-32c5.8-9.7,11.8-19.7,11.8-32c0-11.2-4.1-20.5-12-27.1
c-6.9-5.8-16.2-9-26.1-9c-9.9,0-19.2,3.2-26.1,9c-7.8,6.6-12,16-12,27.1c0,12.4,5.7,21.8,11.6,31.9c5.7,9.5,11.5,19.3,12.4,32.1
h-7.1c-0.6-10.1-5.8-18.8-11.3-28c-6.3-10.6-12.9-21.7-12.9-36c0-13.4,4.9-24.6,14.1-32.5C-334,5.2-322.9,1.4-311,1.4L-311,1.4
M-295.4,35.5c-1.2,1.6-2.2,3.4-2.9,5.4c-1.9,5.5-1.3,10.4-0.8,15.2c0.5,4.5,1.1,8.7-0.7,13.1c-1.8,4.5-5.6,7.3-10.4,7.8l-1.6,0.2
l-0.2,1.6c-1,9.4,0.2,21.7,2.7,29.9h-2.7c-3-14.4-1.1-39.1,6.8-53.1l4.9-8.7l-7.8,6.1c-5.1,4-9.6,13.2-11.6,21
c-4.1-3.7-5.5-9.6-3.7-16.2c1.6-5.9,5.5-11.4,11-15.4C-307.7,38.6-301.8,36.3-295.4,35.5 M-294.7,118.7c0.6,0,1.2,0.2,1.6,0.7
c0.2,0.3,0.5,0.7,0.5,1.4l0,0v0c0,1.1-1,2.1-2.1,2.1h-32.7c-1.1,0-2.1-1-2.1-2.1c0-1.1,1-2.1,2.1-2.1L-294.7,118.7 M-295.4,132.5
c1.2,0,2.1,0.9,2.1,2.1c0,1.1-1,2.1-2.1,2.1h-31.2c-1.1,0-2.1-1-2.1-2.1s1-2.1,2.1-2.1H-295.4 M-300.9,146.1
c-0.2,0.2-0.3,0.3-0.5,0.5c-4.6,4.2-5.1,4.5-6.7,4.5h-6.2c-1.6,0-2.1-0.4-6.7-4.7c-0.1-0.1-0.2-0.2-0.3-0.3H-300.9 M-311-0.6
c-23.6,0-47.3,15.1-47.3,45.3c0,28.1,24.2,43.8,24.2,66h11.1c-0.6-28-24.1-41.7-24.1-66c0-22.8,18-34.1,36-34.1S-275,22-275,44.7
c0,24.3-24,38.7-24,66h11c0-22.2,24.2-37.9,24.2-66C-263.8,14.5-287.4-0.6-311-0.6L-311-0.6z M-289.6,33.1
c-33.2,0-46.5,33.8-28.9,44.2c1.5-8.4,6.5-18.9,11.5-22.8c-8.3,14.8-10.3,41.2-6.6,56.1h7.1c-3.1-8-4.5-21.8-3.5-31.7
c5-0.5,9.8-3.4,12.1-9c3.9-9.7-2.1-18.1,1.5-28.4C-295.1,37.7-292.7,34.9-289.6,33.1L-289.6,33.1z M-294.7,116.7h-32.7
c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h32.7c2.3,0,4.1-1.9,4.1-4.1C-290.5,118.5-292.4,116.7-294.7,116.7L-294.7,116.7z
M-295.4,130.5h-31.2c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h31.2c2.3,0,4.1-1.9,4.1-4.1
C-291.3,132.3-293.1,130.5-295.4,130.5L-295.4,130.5z M-295.7,144.1h-30.7c8.1,7.5,8.9,9,12.1,9h6.2
C-304.9,153.1-304.2,151.7-295.7,144.1L-295.7,144.1z"/>
</g>
<g>
<path fill="#F9E46E" class="yellow" d="M89.5,93.2c0,24.3,23.5,38,24.1,66h24c0-27.3,24-41.7,24-66C161.6,47.7,89.5,47.7,89.5,93.2z"/>
</g>
<g id="light-bulb-6-icon_37_">
<path fill="#FFFFFF" d="M122.2,200.9c-2.1,0-2.8-0.6-7.4-5c-0.6-0.6-1.4-1.3-2.2-2h25.6c-0.9,0.8-1.7,1.6-2.4,2.2
c-4.6,4.3-5.3,4.8-7.4,4.8H122.2z M109.9,186.5c-1.7,0-3.1-1.4-3.1-3.1s1.4-3.1,3.1-3.1h31.2c1.7,0,3.1,1.4,3.1,3.1
c0,1.7-1.4,3.1-3.1,3.1H109.9z M109.1,172.7c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1h32.7c0.9,0,1.7,0.4,2.3,1
c0.5,0.6,0.8,1.3,0.8,2.1c0,1.8-1.4,3.1-3.1,3.1L109.1,172.7L109.1,172.7z M138.6,158.5c0.3-13.3,6.4-23.6,12.4-33.5
c6-10,11.6-19.4,11.6-31.5c0-16.9-11.6-35.1-37.1-35.1S88.4,76.6,88.4,93.5c0,12.1,5.6,21.4,11.5,31.3c5.9,9.9,12,20.1,12.6,33.7
h-9.1c-0.3-10.3-5.6-19.1-11.2-28.5c-6.4-10.8-13-21.9-13-36.5c0-13.7,5-25.2,14.4-33.2c8.4-7.2,19.7-11.1,31.9-11.1
c12.1,0,23.4,3.9,31.8,11.1c9.4,8,14.4,19.5,14.4,33.2c0,14.6-6.6,25.7-13,36.5c-5.6,9.4-10.8,18.2-11.2,28.5L138.6,158.5
L138.6,158.5z"/>
<path fill="#225650" d="M122.3,201.9h6.2c3.2,0,3.9-1.4,12.4-9h-30.7C118.3,200.4,119,201.9,122.3,201.9z M135.2,195.3
c-4.6,4.2-5.1,4.5-6.7,4.5h-6.2c-1.6,0-2.1-0.4-6.7-4.7c-0.1-0.1-0.2-0.2-0.3-0.3h20.5C135.5,195,135.3,195.2,135.2,195.3z"/>
<path fill="#225650"d="M141.1,179.3h-31.2c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h31.2c2.3,0,4.1-1.9,4.1-4.1
C145.2,181.1,143.4,179.3,141.1,179.3z M141.1,185.5h-31.2c-1.1,0-2.1-1-2.1-2.1s1-2.1,2.1-2.1h31.2c1.2,0,2.1,0.9,2.1,2.1
C143.2,184.5,142.3,185.5,141.1,185.5z"/>
<path fill="#225650" d="M125.5,48.1c-23.6,0-47.3,15.1-47.3,45.3c0,28.1,24.2,43.8,24.2,66h11.1c-0.6-28-24.1-41.7-24.1-66
c0-22.8,18-34.1,36.1-34.1s36,11.4,36,34.1c0,24.3-24,38.7-24,66h11c0-22.2,24.2-37.9,24.2-66C172.8,63.2,149.1,48.1,125.5,48.1z
M146.6,157.5h-7c0.6-12.5,6.5-22.4,12.2-32c5.8-9.7,11.8-19.7,11.8-32c0-11.2-4.1-20.5-12-27.1c-6.9-5.8-16.2-9-26.1-9
s-19.2,3.2-26.1,9c-7.8,6.6-12,16-12,27.1c0,12.4,5.7,21.8,11.6,31.9c5.7,9.5,11.5,19.3,12.4,32.1h-7.1c-0.6-10.1-5.8-18.8-11.3-28
c-6.3-10.6-12.9-21.7-12.9-36c0-13.4,4.9-24.6,14.1-32.5c8.2-7,19.3-10.9,31.2-10.9c11.9,0,23,3.9,31.2,10.9
c9.2,7.8,14.1,19.1,14.1,32.5c0,14.3-6.6,25.3-12.9,36C152.4,138.6,147.2,147.3,146.6,157.5z"/>
<path fill="#225650" d="M141.8,165.5h-32.7c-2.3,0-4.1,1.9-4.1,4.1c0,2.3,1.9,4.1,4.1,4.1h32.7c2.3,0,4.1-1.9,4.1-4.1
C146,167.3,144.1,165.5,141.8,165.5z M143.9,169.5L143.9,169.5c0,1.2-1,2.1-2.1,2.1h-32.7c-1.1,0-2.1-1-2.1-2.1
c0-1.1,1-2.1,2.1-2.1h32.7v0c0.6,0,1.2,0.2,1.6,0.7C143.7,168.4,144,168.8,143.9,169.5L143.9,169.5z"/>
</g>
<path fill="#FFFFFF" class="leaf" stroke="#225650" stroke-width="2" stroke-miterlimit="10" d="M121.8,158.6c-3.3-14.5-1.4-40.1,6.7-54.6
l2.4-4.3l-3.9,3.1c-5.2,4-9.9,14.2-11.6,21.9c-5.4-3.9-7.4-10.6-5.3-18.3c2.9-10.6,14-22,31.7-23.2c-2,1.8-3.6,4.2-4.5,7
c-1.9,5.3-1.3,10.1-0.7,14.7c0.6,4.6,1.1,9-0.8,13.6c-2,4.8-6.1,7.9-11.3,8.4l-0.8,0.1l-0.1,0.8c-1,9.8,0.3,22.7,3.1,30.8
L121.8,158.6L121.8,158.6z"/>
</svg>
/* CSS */
/* Globe */
#yellow-globe {width: 300px; height: 300px; margin: 0 auto; text-align: center;}
#keyframes yellow {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #F9E46E;
}
75% {
fill: #F9E46E;
}
100% {
fill: #F9E46E;
}
}
.yellow {
fill: yellow;
animation-name: yellow;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.leaf {
stroke-dasharray: 242;
stroke-dashoffset: 242;
animation: dash 4s linear alternate;
animation-iteration-count: 1;
}
#keyframes dash {
from {
stroke-dashoffset: 242;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes fillme {
0% {
fill: #FFFFFF;
}
25% {
fill: #FFFFFF;
}
50% {
fill: #225650;
}
75% {
fill: #225650;
}
100% {
fill: #225650;
}
}

You need to include the -webkit- prefix on animations (and transitions) for webkit browsers (like Chrome). Working demo
You may also want to include the -ms- and -moz- prefixes so that you can reach older versions of FireFox and IE as well

Resources