Marker with custom image and text (HERE Maps)

Marker with custom image and text (HERE Maps) - here-api

Do you know if it's possible to have a label in right side of icon like google maps function "MarkerWithLabel"?
I already have a solution, it isn't my favorite (right side of the icon), I have in top of the icon like the sample:
function addSVGMarkers(map){
//Create the svg mark-up
var svgMarkup = '<svg width="76px" height="53px" xmlns="http://www.w3.org/2000/svg">'+
'<g id="unload-plate" transform="translate(27.49994 17.5)">'+
'<g id="surface1">'+
'<path d="M0 0L1 1L0 0Z" transform="translate(9.48437 0)" id="Shape" fill="#FF7F00" stroke="none" />'+
'<path d="M10.6016 30.793L10.7266 30.793C13.0781 26.8164 15.3477 22.7891 17.6406 18.7773C18.2109 17.7813 18.7851 16.7813 19.3594 15.7891C19.7305 15.1523 20.1406 14.5391 20.4297 13.8594C21.5781 11.1875 21.6406 8.15625 20.543 5.45313C20.0781 4.30469 19.3867 3.26953 18.5664 2.34375C15.4687 -1.17187 10.0156 -2.07422 5.85937 0C3.73828 1.05859 2.09375 2.78906 1.04297 4.89453C0.4375 6.10938 0.0585928 7.52344 0 8.87891C-0.0742187 10.6016 0.21875 12.2734 0.898437 13.8594C1.56641 15.418 2.59375 16.8711 3.4375 18.3438C5.8125 22.4961 8.16797 26.6719 10.6016 30.793L10.6016 30.793Z" transform="translate(0.003907203 1.082031)" id="Shape" fill="#D73925" stroke="none" />'+
'<path d="M0 0L1 1L0 0Z" transform="translate(11.78906 0)" id="Shape" fill="#FF7F00" stroke="none" />'+
'<path d="M0 0L1 1L0 0Z" transform="translate(0.125 8.714844)" id="Shape" fill="#FF7F00" stroke="none" />'+
'<path d="M0 0L1 1L0 0Z" transform="translate(6.863278 9.402344)" id="Shape" fill="#FF0000" stroke="none" />'+
'<path d="M0 0L1 1L0 0Z" transform="translate(0 11.51563)" id="Shape" fill="#00A65A" stroke="none" />'+
'<path d="M0 0L1 1L0 0Z" transform="translate(21.14843 12.45313)" id="Shape" fill="#00A65A" stroke="none" />'+
'<path d="M0 0L0.999997 1L0 0Z" transform="translate(13.60156 26.76953)" id="Shape" fill="#00A65A" stroke="none" />'+
'<path d="M0 144.5C0 64.6892 66.442 0 148.477 0C230.512 0 296.954 64.6892 296.954 144.5C296.954 224.248 230.512 289 148.477 289C66.442 289 0 224.248 0 144.5L0 144.5Z" transform="matrix(0.0623782 0 0 0.0622568 1.4375 1.433594)" id="Shape" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1" />'+
'<path d="M8.85307 1.05859L14.1617 1.05859L14.1617 0L8.4976 0C8.10697 0 7.79057 0.316406 7.79057 0.707032L7.79057 8.23047L0.130413 10.2773C0.036663 10.3008 -0.0180244 10.3984 0.00541305 10.4961L0.189007 11.1758C0.212443 11.2734 0.3101 11.3281 0.407757 11.3047L9.21635 8.94532C9.27885 10.2578 10.3531 11.3086 11.6851 11.3086C13.0562 11.3086 14.1617 10.1992 14.1617 8.83204C14.1617 7.46485 13.0562 6.35938 11.6851 6.35938C10.6968 6.35938 9.85307 6.94141 9.45463 7.77344L8.85307 7.77344L8.85307 1.05859ZM11.6851 7.42188C12.4663 7.42188 13.0992 8.05469 13.0992 8.83204C13.0992 9.61329 12.4663 10.2461 11.6851 10.2461C10.9038 10.2461 10.2671 9.61329 10.2671 8.83204C10.2671 8.05469 10.9038 7.42188 11.6851 7.42188Z" transform="translate(3.619586 4.628906)" id="Shape" fill="#000000" fill-rule="evenodd" stroke="none" />'+
'</g>'+
'</g>'+
'<path d="M0 0L75 0L75 52L0 52L0 0Z" transform="translate(0.5 0.5)" id="Rectangle-2" fill="none" stroke="none" />'+
'<path d="M6.499 0L64.501 0C68.0903 0 71 2.9097 71 6.499L71 6.501C71 10.0903 68.0903 13 64.501 13L6.499 13C2.9097 13 0 10.0903 0 6.501L0 6.499C0 2.9097 2.9097 0 6.499 0Z" transform="translate(3.499939 2.499969)" id="Rectangle" fill="#000000" stroke="#000000" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" />'+
'<text x="38" y="12" font-size="11px" font-family="Arial" font-weight="bold" fill="white" text-anchor="middle">99-D-123456</text>'+
'</svg>';
// Add the first marker
var bearsIcon = new H.map.Icon(
svgMarkup.replace('${FILL}', 'blue').replace('${STROKE}', 'red')),
bearsMarker = new H.map.Marker({lat: 41.8625, lng: -87.6166 },
{icon: bearsIcon});
map.addObject(bearsMarker);
}
function addSVGMarkers(map){
//Create the svg mark-up
var svgMarkup = '<svg width="76px" height="53px" xmlns="http://www.w3.org/2000/svg">'+
'<g id="unload-plate" transform="translate(27.49994 17.5)">'+
'<g id="surface1">'+
'<path d="M0 0L1 1L0 0Z" transform="translate(9.48437 0)" id="Shape" fill="#FF7F00" stroke="none" />'+
'<path d="M10.6016 30.793L10.7266 30.793C13.0781 26.8164 15.3477 22.7891 17.6406 18.7773C18.2109 17.7813 18.7851 16.7813 19.3594 15.7891C19.7305 15.1523 20.1406 14.5391 20.4297 13.8594C21.5781 11.1875 21.6406 8.15625 20.543 5.45313C20.0781 4.30469 19.3867 3.26953 18.5664 2.34375C15.4687 -1.17187 10.0156 -2.07422 5.85937 0C3.73828 1.05859 2.09375 2.78906 1.04297 4.89453C0.4375 6.10938 0.0585928 7.52344 0 8.87891C-0.0742187 10.6016 0.21875 12.2734 0.898437 13.8594C1.56641 15.418 2.59375 16.8711 3.4375 18.3438C5.8125 22.4961 8.16797 26.6719 10.6016 30.793L10.6016 30.793Z" transform="translate(0.003907203 1.082031)" id="Shape" fill="#D73925" stroke="none" />'+
'<path d="M0 0L1 1L0 0Z" transform="translate(11.78906 0)" id="Shape" fill="#FF7F00" stroke="none" />'+
'<path d="M0 0L1 1L0 0Z" transform="translate(0.125 8.714844)" id="Shape" fill="#FF7F00" stroke="none" />'+
'<path d="M0 0L1 1L0 0Z" transform="translate(6.863278 9.402344)" id="Shape" fill="#FF0000" stroke="none" />'+
'<path d="M0 0L1 1L0 0Z" transform="translate(0 11.51563)" id="Shape" fill="#00A65A" stroke="none" />'+
'<path d="M0 0L1 1L0 0Z" transform="translate(21.14843 12.45313)" id="Shape" fill="#00A65A" stroke="none" />'+
'<path d="M0 0L0.999997 1L0 0Z" transform="translate(13.60156 26.76953)" id="Shape" fill="#00A65A" stroke="none" />'+
'<path d="M0 144.5C0 64.6892 66.442 0 148.477 0C230.512 0 296.954 64.6892 296.954 144.5C296.954 224.248 230.512 289 148.477 289C66.442 289 0 224.248 0 144.5L0 144.5Z" transform="matrix(0.0623782 0 0 0.0622568 1.4375 1.433594)" id="Shape" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1" />'+
'<path d="M8.85307 1.05859L14.1617 1.05859L14.1617 0L8.4976 0C8.10697 0 7.79057 0.316406 7.79057 0.707032L7.79057 8.23047L0.130413 10.2773C0.036663 10.3008 -0.0180244 10.3984 0.00541305 10.4961L0.189007 11.1758C0.212443 11.2734 0.3101 11.3281 0.407757 11.3047L9.21635 8.94532C9.27885 10.2578 10.3531 11.3086 11.6851 11.3086C13.0562 11.3086 14.1617 10.1992 14.1617 8.83204C14.1617 7.46485 13.0562 6.35938 11.6851 6.35938C10.6968 6.35938 9.85307 6.94141 9.45463 7.77344L8.85307 7.77344L8.85307 1.05859ZM11.6851 7.42188C12.4663 7.42188 13.0992 8.05469 13.0992 8.83204C13.0992 9.61329 12.4663 10.2461 11.6851 10.2461C10.9038 10.2461 10.2671 9.61329 10.2671 8.83204C10.2671 8.05469 10.9038 7.42188 11.6851 7.42188Z" transform="translate(3.619586 4.628906)" id="Shape" fill="#000000" fill-rule="evenodd" stroke="none" />'+
'</g>'+
'</g>'+
'<path d="M0 0L75 0L75 52L0 52L0 0Z" transform="translate(0.5 0.5)" id="Rectangle-2" fill="none" stroke="none" />'+
'<path d="M6.499 0L64.501 0C68.0903 0 71 2.9097 71 6.499L71 6.501C71 10.0903 68.0903 13 64.501 13L6.499 13C2.9097 13 0 10.0903 0 6.501L0 6.499C0 2.9097 2.9097 0 6.499 0Z" transform="translate(3.499939 2.499969)" id="Rectangle" fill="#000000" stroke="#000000" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" />'+
'<text x="38" y="12" font-size="11px" font-family="Arial" font-weight="bold" fill="white" text-anchor="middle">99-D-123456</text>'+
'</svg>';
// Add the first marker
var bearsIcon = new H.map.Icon(
svgMarkup.replace('${FILL}', 'blue').replace('${STROKE}', 'red')),
bearsMarker = new H.map.Marker({lat: 41.8625, lng: -87.6166 },
{icon: bearsIcon});
map.addObject(bearsMarker);
}
http://jsfiddle.net/pafcosta/upends4z/4/
Thanks
/PC

This logic can also be implemented with bubble info, however if the location needs to be modified then path value needs to be modified. please refer : developer.here.com/api-explorer/maps-js/infobubbles/open-infobubble

Related

Why doesn't the group animation work for me?

I have svg (from undraw edited in figma) with groups selected by id and I would like to have animation in css on these groups.
But I set animation for group with id head and it doesn't work (The head should tilt, but the image doesn't move at all).
Can you help me?
Thank you in advance for your reply!
#head{
animation: head 1s ease infinite alternate;
transform-origin: bottom;
}
#keyframes head{
from{
transform: rotateZ('-10deg');
}
to{
transform: rotateZ('10deg');
}
}
<div class="svg-animation">
<svg width="600" height="523" viewBox="0 0 600 523" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="undraw_developer_activity_re_39tg 1" clip-path="url(#clip0_3_67)">
// Lots of other vectors
<g id="head">
<path id="ab6171fa-7d69-4734-b81c-8dff60f9761b" d="M199.507 172.87C226.126 172.87 247.704 151.292 247.704 124.674C247.704 98.0553 226.126 76.4769 199.507 76.4769C172.889 76.4769 151.311 98.0553 151.311 124.674C151.311 151.292 172.889 172.87 199.507 172.87Z" fill="#FFB6B6"/>
<path id="bf427902-b9bf-4946-b5d7-5c1c7e04535e" d="M241.715 89.3366C241.715 89.3366 254.32 65.2383 226.587 63.0475C226.587 63.0475 202.945 41.6007 178.847 59.1267C178.847 59.1267 165.702 59.1267 158.514 74.0013C158.514 74.0013 148.176 70.0805 145.904 80.5736C145.904 80.5736 138.339 102.481 145.904 122.198C153.469 141.915 155.981 144.106 155.981 144.106C155.981 144.106 143.551 102.768 173.808 100.577C204.064 98.3866 237.923 79.4782 240.444 103.577C242.966 127.675 246.76 133.612 246.76 133.612C246.76 133.612 270.709 99.1951 241.715 89.3366Z" fill="#2F2E41"/>
<path id="Vector_42" d="M257.955 122.04H254.428C254.428 95.3746 228.038 77.901 201.415 77.8869C197.542 77.8755 193.678 78.2513 189.881 79.0085C185.606 79.8621 181.169 80.885 176.809 82.2182C159.618 87.4879 143.675 97.6743 143.675 122.04C143.671 126.772 144.273 131.485 145.467 136.064L142.052 136.953C140.786 132.083 140.146 127.072 140.148 122.04C140.148 100.75 148.888 86.1264 163.984 77.4072C171.92 72.8218 181.606 69.8661 192.702 68.427C197.32 67.8127 201.988 67.6708 206.635 68.0037C237.251 70.2047 257.955 93.6816 257.955 122.04Z" fill="#009B77"/>
<path id="Vector_43" d="M263.832 123.994L262.442 113.723C262.099 111.129 260.85 108.74 258.915 106.979C257.673 105.831 256.186 104.98 254.566 104.491C252.947 104.003 251.238 103.888 249.568 104.157L247.36 104.461C246.755 104.54 246.173 104.739 245.646 105.045C245.12 105.352 244.659 105.76 244.291 106.245C243.92 106.73 243.649 107.282 243.492 107.872C243.336 108.462 243.298 109.076 243.381 109.681L246.591 133.341C246.723 134.305 247.155 135.204 247.826 135.909C248.497 136.614 249.373 137.09 250.33 137.27C250.613 137.327 250.901 137.356 251.19 137.355C251.398 137.355 251.605 137.341 251.811 137.313L254.28 136.981C255.785 136.781 257.234 136.276 258.537 135.496C259.84 134.716 260.969 133.678 261.856 132.445C262.047 132.177 262.23 131.902 262.4 131.62C263.722 129.312 264.226 126.625 263.832 123.994Z" fill="#009B77"/>
<path id="Vector_44" d="M245.935 104.891C245.287 105.206 244.724 105.67 244.291 106.245C243.92 106.73 243.649 107.282 243.492 107.872C243.336 108.462 243.298 109.076 243.381 109.681L246.591 133.341C246.723 134.306 247.155 135.204 247.826 135.909C248.497 136.614 249.373 137.09 250.33 137.27L245.935 104.891Z" fill="white"/>
<path id="Vector_45" d="M263.832 123.994L262.442 113.723C262.099 111.129 260.85 108.74 258.915 106.979L262.11 130.519C262.158 130.897 262.255 131.267 262.4 131.62C263.722 129.312 264.226 126.625 263.832 123.994Z" fill="#3F3D56"/>
<path id="Vector_46" d="M252.848 131.395C253.813 131.264 254.299 128.967 253.932 126.264C253.565 123.562 252.486 121.477 251.521 121.608C250.555 121.739 250.07 124.036 250.437 126.738C250.803 129.441 251.883 131.526 252.848 131.395Z" fill="#3F3D56"/>
<path id="Vector_47" d="M250.732 118.697C251.697 118.566 252.182 116.269 251.816 113.566C251.449 110.864 250.369 108.779 249.404 108.91C248.439 109.041 247.954 111.338 248.32 114.041C248.687 116.743 249.767 118.828 250.732 118.697Z" fill="#3F3D56"/>
<path id="Vector_48" d="M264.135 123.635C265.1 123.504 265.586 121.207 265.219 118.505C264.852 115.802 263.773 113.717 262.808 113.848C261.842 113.979 261.357 116.276 261.724 118.979C262.09 121.681 263.17 123.766 264.135 123.635Z" fill="#3F3D56"/>
<path id="Vector_49" d="M201.415 77.8868C197.542 77.8755 193.678 78.2513 189.881 79.0085C185.606 79.8621 181.169 80.8849 176.809 82.2182C170.002 81.8867 164.993 80.1231 163.984 77.4071C171.92 72.8218 181.606 69.866 192.702 68.4269C197.32 67.8126 201.988 67.6708 206.635 68.0037C207.127 68.292 207.552 68.6812 207.883 69.1457C208.213 69.6101 208.442 70.1393 208.554 70.6984C208.885 73.1534 206.085 75.7635 201.415 77.8868Z" fill="#3F3D56"/>
<path id="Vector_50" d="M156.38 146.519L150.948 123.938C150.754 123.123 150.324 122.384 149.711 121.813C149.099 121.242 148.331 120.864 147.505 120.728C147.272 120.692 147.036 120.673 146.8 120.672C146.467 120.673 146.136 120.713 145.812 120.791L143.71 121.299C141.003 121.954 138.667 123.656 137.213 126.031C135.76 128.406 135.308 131.261 135.957 133.969L138.391 144.099C138.947 146.484 140.27 148.62 142.158 150.18C142.464 150.427 142.784 150.655 143.117 150.864C144.3 151.605 145.619 152.102 146.996 152.325C148.374 152.548 149.782 152.493 151.138 152.162L153.233 151.654C153.787 151.525 154.309 151.282 154.764 150.942C155.442 150.448 155.957 149.764 156.245 148.976C156.532 148.188 156.579 147.333 156.38 146.519Z" fill="#009B77"/>
<path id="Vector_51" d="M144.992 142.317C145.939 142.089 146.19 139.755 145.552 137.104C144.914 134.452 143.629 132.487 142.682 132.715C141.735 132.943 141.484 135.277 142.122 137.929C142.76 140.58 144.045 142.545 144.992 142.317Z" fill="#3F3D56"/>
<path id="Vector_52" d="M137.938 144.434C138.885 144.206 139.135 141.871 138.497 139.22C137.859 136.568 136.574 134.604 135.627 134.832C134.68 135.059 134.43 137.394 135.068 140.045C135.706 142.697 136.991 144.661 137.938 144.434Z" fill="#3F3D56"/>
<path id="Vector_53" d="M156.725 146.434L151.293 123.853C151.082 122.972 150.615 122.172 149.951 121.555C149.287 120.937 148.456 120.53 147.562 120.382L154.976 151.224C155.708 150.688 156.265 149.947 156.576 149.094C156.888 148.242 156.94 147.316 156.725 146.434Z" fill="white"/>
<path id="Vector_54" d="M137.185 129.497C137.035 128.869 136.753 128.28 136.359 127.768C135.596 129.746 135.455 131.909 135.957 133.969L138.391 144.099C138.947 146.484 140.27 148.62 142.158 150.18L137.185 129.497Z" fill="#3F3D56"/>
</g>
</g>
<defs>
<clipPath id="clip0_3_67">
<rect width="600" height="522.608" fill="white"/>
</clipPath>
</defs>
</svg>
</div>

restart svg animation on hover (mouseover) svg or css solutions only

This is my svg, the eyes blink every 12 seconds, but I want the user to be able to trigger that on any mouseover event. So restart the animation on hover.
I've tried adding
begin="mouseover;...." to my svg animate tags, but it just triggers that lone animation, not all 6 animations, and I don't want it to trigger when the user hovers over a small shape, but rather over the whole svg.
I'm not keen on javascript because it slows the load time. I'd love some assistance, it'll help those impatient to view the animation again.
<svg width="120.03" height="120.4" viewBox="0 0 120.03 120.399" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:auto; margin-top: -110px;">
<path d="M13.936 69.536s-.904.55-1.48 1.279-1.667 3.216-1.667 3.216-1.105-7.03-1.199-10.04c-.093-3.01.45-7.942.45-7.942l-8.691.6s1.9-6.464 3.147-8.991c1.245-2.527 3.596-5.994 3.596-5.994s-2.52-.16-3.896.15S0 43.612 0 43.612c2.675-9.279 6.027-16.872 10.94-22.178C18.673 13.326 34.6-.32 57.991.004s33.594 5.326 44.206 13.637c10.612 8.311 17.832 29.67 17.832 29.67l-7.942-2.098 6.743 14.685-8.99.6-.75 15.883-2.847-3.296s-.488 10.012-1.649 13.936c-1.16 3.924-4.645 9.44-4.645 9.44l-1.349-3.596s-2.494 7.072-5.095 9.59c-2.118 2.051-5.239 2.718-7.942 3.896-7.797 3.4-13.699 8.929-23.826 9.141s-27.169-6.132-33.417-11.239c-6.248-5.106-6.593-11.389-6.593-11.389l-1.199 5.245s-4.679-9.466-5.694-13.636-.9-10.939-.9-10.939z" fill="#45332c" fill-rule="evenodd"/><path d="M19.331 13.043s-3.966-3.487-4.945-5.844c-.904-2.176-.6-7.043-.6-7.043s7.166 3.172 13.17 5.076c3 .953 7.174.818 12.08 1.929 4.907 1.11 10.865 3.784 10.865 3.784L48.85 6.3l6.894 5.544 3.896-9.29 3.596 9.74 7.643-5.695-1.499 4.646s6.731-2.78 10.639-3.747c3.908-.965 8.456-.707 12.737-1.873 4.281-1.165 12.737-5.17 12.737-5.17s-.35 4.496-1.199 6.594c-.849 2.098-3.896 5.994-3.896 5.994s6.142 7.34 7.343 12.438c1.2 5.097 1.137 11.9-1.199 16.933s-6.847 9.09-11.688 11.389c-4.842 2.298-10.806 2.824-15.734 1.798-4.928-1.026-9.334-4.78-12.438-7.193s-6.444-6.593-6.444-6.593-4.605 5.051-7.942 7.492c-3.336 2.442-7.178 5.841-12.138 6.744-4.96.902-11.333.372-16.184-2.398-4.85-2.77-9.06-8.213-10.789-13.337s-.665-10.657.45-15.285 5.694-11.988 5.694-11.988z" fill="#785647" fill-rule="evenodd"/>
<ellipse id="yellow" cx="35.443" cy="30.654" rx="17.099" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73361021, 17.606645" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".734"/>
<ellipse id="black" cx="35.664" cy="30.051" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759"/>
<ellipse id="white" cx="28.696" cy="24.431" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624"/>
<ellipse id="yellow2" cx="84.029" cy="29.938" rx="17.066" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73219484, 17.57267607" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".732"/>
<ellipse id="black2" cx="84.216" cy="29.976" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759"/>
<ellipse id="white2" cx="77.248" cy="24.356" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624"/>
<path d="M34.232 104.03l-.344 6.305 3.284 8.9 3.391-6.781 2.12 7.629 3.92-7.735 2.119 6.04 2.86-6.146 1.167-7.312zM65.57 105.35l5.616 13.563 2.437-6.676 2.437 8.16 3.709-8.054 2.33 6.676 3.71-9.007-1.166-6.781z" fill="#f59e01" fill-rule="evenodd"/><path d="M21.064 60.248s-1.255 4.953-1.199 7.642c.056 2.69 1.649 8.242 1.649 8.242l1.648-3.896s-.085 7.66 1.086 11.09c1.172 3.427 5.058 8.091 5.058 8.091l.15-4.196s.463 3.721 1.948 5.844 7.343 5.845 7.343 5.845l-7.043 7.792 5.094.6-2.547 2.397s4.28-.363 5.994-1.349c1.715-.986 3.896-4.196 3.896-4.196s1.782 3.081 3.121 3.966c1.34.885 4.664.917 4.664.917s-.704-3.049-.442-3.234c.32-.227 2.997 1.798 2.997 1.798l-.45-2.098 11.538-.15-.45 2.847 3.783-.837-.869 2.111s4.14-.577 4.938-1.413c.797-.835 3.537-3.607 3.537-3.607s3.022 3.412 4.646 4.196c1.623.784 4.495.75 4.495.75l-2.547-2.698 6.144.45s-3.181-3.102-4.346-4.646-2.697-4.495-2.697-4.495 5.457-2.504 6.893-4.496 1.648-6.294 1.648-6.294l1.218 4.566s3.437-5.57 4.327-7.862c.89-2.293.717-3.393.899-5.245s.15-5.844.15-5.844l1.798 2.697s1.37-7.276 1.498-9.89c.128-2.615-.3-5.694-.3-5.694l-40.758 4.345z" fill="#785647" fill-rule="evenodd"/><path d="M36.563 61.997l-5.006 6.939s4.14 1.15 6.252.953c2.112-.197 6.04-2.119 6.04-2.119s-1.236 3.934-2.331 5.404c-1.096 1.47-3.921 3.285-3.921 3.285s4.698.717 6.993.212c2.296-.505 6.358-3.179 6.358-3.179l-1.59 6.888 7.63-8.795 3.062 16.27 3.19-16.482 6.463 8.795-.636-7.206s2.438 2.334 4.45 3.073 7.418.742 7.418.742l-5.26-8.59s2.796 1.16 4.795 1.35c2 .19 7.043-.6 7.043-.6l-4.645-7.193s-8.02-.125-11.913-.899c-1.947-.387-6.65-2.862-8.88-3.889s-3.15-.13-3.15-.13-6.802 3.06-10.823 4.146c-4.021 1.085-11.539 1.025-11.539 1.025z" fill="#ffe8bb" fill-rule="evenodd"/><path d="M53.047 37.768s4.706-3.805 7.343-3.746c2.637.059 6.593 3.746 6.593 3.746S63.06 66.979 60.54 66.989c-3.12.012-7.492-29.221-7.492-29.221z" fill="#f59e01" fill-rule="evenodd"/>
<animate
id = "yellowEye"
xlink:href="#yellow"
attributeName="ry"
values="17.066; 0; 17.066"
keyTimes="0; 0.5; 1"
dur="0.25s"
fill="freeze"
begin="2s;yellowEye.end+12s;"
/>
<animate
id = "yellowEye2"
xlink:href="#yellow2"
attributeName="ry"
values="17.066; 0; 17.066"
keyTimes="0; 0.5; 1"
dur="0.25s"
fill="freeze"
begin="2s;yellowEye2.end+12s;"
/>
<animate
id = "blackEye"
xlink:href="#black"
attributeName="ry"
values="8.848; 8.848; 0; 0; 8.848; 8.848"
keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1"
dur="0.25s"
fill="freeze"
begin="2s;blackEye.end+12s;"
/>
<animate
id = "blackEye2"
xlink:href="#black2"
attributeName="ry"
values="8.848; 8.848; 0; 0; 8.848; 8.848"
keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1"
dur="0.25s"
fill="freeze"
begin="2s;blackEye2.end+12s;"
/>
<animate
id = "whiteEye"
xlink:href="#white"
attributeName="ry"
values="4.196; 0; 0; 4.196"
keyTimes="0; 0.27; 0.7; 1"
dur="0.25s"
fill="freeze"
begin="2s;whiteEye.end+12s;"
/>
<animate
id = "whiteEye2"
xlink:href="#white2"
attributeName="ry"
values="4.196; 0; 0; 4.196"
keyTimes="0; 0.27; 0.7; 1"
dur="0.25s"
fill="freeze"
begin="2s;whiteEye2.end+12s;"
/>
</svg>

In SMIL you can use the event mouseover. Since you want the eyes to blink simultaneously I've putted the eyes in a group and I'm targeting the group:
begin="2s; theGroup.mouseover; whiteEye2.end+12s;"`
However you won't get a blink when mousing between the eyes. To fix this I'm adding to the group a rect behind the eyes:
<rect x="18" y="12" width="84" height="36" fill="none" pointer-events="all"/>
The rect has no fill so you need to add pointer-events="all" in order to make it sensitive to the mouse.
<svg width="120.03" height="120.4" viewBox="0 0 120.03 120.399" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:auto;">
<g id="theGroup">
<rect x="18" y="12" width="84" height="36" fill="none" pointer-events="all"/>
<ellipse id="yellow" cx="35.443" cy="30.654" rx="17.099" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73361021, 17.606645" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".734" />
<ellipse id="black" cx="35.664" cy="30.051" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759" />
<ellipse id="white" cx="28.696" cy="24.431" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624" />
<ellipse id="yellow2" cx="84.029" cy="29.938" rx="17.066" ry="17.066" fill="#f9c802" stroke="#000" stroke-dasharray="0.73219484, 17.57267607" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".732" />
<ellipse id="black2" cx="84.216" cy="29.976" rx="8.848" ry="8.848" fill="#302c3b" stroke="#000" stroke-dasharray="0.75924348, 18.22184352" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".759" />
<ellipse id="white2" cx="77.248" cy="24.356" rx="2.847" ry="4.196" fill="#fff" stroke="#000" stroke-dasharray="0.62362205, 14.96692913" stroke-linejoin="round" stroke-opacity=".436" stroke-width=".624" />
<animate id="yellowEye" xlink:href="#yellow" attributeName="ry" values="17.066; 0; 17.066" keyTimes="0; 0.5; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="yellowEye2" xlink:href="#yellow2" attributeName="ry" values="17.066; 0; 17.066" keyTimes="0; 0.5; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="blackEye" xlink:href="#black" attributeName="ry" values="8.848; 8.848; 0; 0; 8.848; 8.848" keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="blackEye2" xlink:href="#black2" attributeName="ry" values="8.848; 8.848; 0; 0; 8.848; 8.848" keyTimes="0; 0.23; 0.48; 0.51; 0.77; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="whiteEye" xlink:href="#white" attributeName="ry" values="4.196; 0; 0; 4.196" keyTimes="0; 0.27; 0.7; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; blackEye.end+12s;" />
<animate id="whiteEye2" xlink:href="#white2" attributeName="ry" values="4.196; 0; 0; 4.196" keyTimes="0; 0.27; 0.7; 1" dur="0.25s" fill="freeze" begin="2s; theGroup.mouseover; whiteEye2.end+12s;" />
</g>
</svg>

How do I control animation-play-start on nested animate element?

I'm trying to create an svg that only plays its animation when it's hovered over.
I've made multiple attempts to affect the animation-play-state attribute of the following svg markup's nested animate elements; and I'm just not getting it.
I've tried:
inlining, which doesn't work, because apparently there is no inline equivalent of the animation-play-state CSS property. I also haven't been able to affect the element's inline attributes, unless I set both 'default' and 'hover' states within my CSS
selecting elements by attribute, i.e.
svg [id^=anim_RenderLayer] {/*some attribute*/}
which doesn't have an effect on any attribute I've tried
setting the CSS properties to the enclosing g elements and svg element, which was unsuccessful for the animation-play-start attribute, but successful for others.
Does anyone have any suggestions for getting the below code's animation element's into the 'paused' state, 'running' state on hover over, and to restart on mouseout?
<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" height="100" version="1.1" width="100">
<g id="RenderLayer_LineSet" inkscape:groupmode="lineset" inkscape:label="RenderLayer_LineSet">
<g id="frame_0001" inkscape:groupmode="frame" inkscape:label="frame_0001">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 50.000, 61.244 57.071, 68.315 64.142, 75.386 67.616, 78.860 74.687, 71.788 78.860, 67.616 71.788, 60.544 64.717, 53.473 61.244, 50.000 68.315, 42.929 75.386, 35.858 78.860, 32.384 71.788, 25.313 67.616, 21.140 60.544, 28.212 53.473, 35.283 50.000, 38.756 42.929, 31.685 35.858, 24.614 32.384, 21.140 25.313, 28.212 21.140, 32.384 28.212, 39.455 35.283, 46.527 38.756, 50.000 31.685, 57.071 24.614, 64.142 21.140, 67.616 28.212, 74.687 32.384, 78.860 39.456, 71.788 46.527, 64.717 50.000, 61.244 " fill="red" />
</g>
<animate attributeName="display" begin="-0.500s" dur="0.500s" id="anim_RenderLayer_LineSet_000001" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0002" inkscape:groupmode="frame" inkscape:label="frame_0002">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 50.000, 61.200 57.068, 68.273 64.136, 75.347 67.653, 78.867 74.712, 71.784 78.897, 67.585 71.823, 60.517 64.749, 53.449 61.244, 49.947 68.312, 42.873 75.380, 35.799 78.822, 32.355 71.738, 25.296 67.578, 21.150 60.504, 28.218 53.430, 35.286 50.000, 38.712 42.926, 31.644 35.852, 24.576 32.422, 21.150 25.339, 28.209 21.178, 32.355 28.247, 39.429 35.315, 46.503 38.756, 49.947 31.682, 57.015 24.608, 64.083 21.103, 67.585 28.162, 74.668 32.347, 78.867 39.415, 71.793 46.483, 64.719 50.000, 61.200 " fill="red" />
</g>
<animate attributeName="display" begin="-0.458s" dur="0.500s" id="anim_RenderLayer_LineSet_000002" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0003" inkscape:groupmode="frame" inkscape:label="frame_0003">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 50.000, 61.073 57.062, 68.153 64.124, 75.234 67.758, 78.877 74.784, 71.762 79.001, 67.493 71.917, 60.435 64.833, 53.376 61.244, 49.800 68.305, 42.720 75.367, 35.639 78.718, 32.280 71.600, 25.256 67.475, 21.186 60.391, 28.244 53.307, 35.302 50.000, 38.597 42.916, 31.539 35.832, 24.481 32.525, 21.186 25.407, 28.210 21.282, 32.280 28.344, 39.360 35.406, 46.441 38.756, 49.800 31.672, 56.858 24.588, 63.916 20.999, 67.493 28.026, 74.608 32.242, 78.877 39.304, 71.797 46.366, 64.717 50.000, 61.073 " fill="red" />
</g>
<animate attributeName="display" begin="-0.417s" dur="0.500s" id="anim_RenderLayer_LineSet_000003" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0004" inkscape:groupmode="frame" inkscape:label="frame_0004">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 50.000, 60.872 57.056, 67.959 64.112, 75.045 67.914, 78.864 74.896, 71.704 79.155, 67.337 72.053, 60.297 64.951, 53.257 61.243, 49.581 68.298, 42.495 75.354, 35.409 78.563, 32.187 71.390, 25.219 67.322, 21.267 60.220, 28.307 53.118, 35.347 50.000, 38.437 42.898, 31.397 35.796, 24.358 32.678, 21.267 25.505, 28.235 21.437, 32.187 28.493, 39.273 35.549, 46.359 38.757, 49.581 31.655, 56.621 24.553, 63.661 20.845, 67.337 27.827, 74.496 32.086, 78.864 39.141, 71.778 46.197, 64.691 50.000, 60.872 " fill="red" />
</g>
<animate attributeName="display" begin="-0.375s" dur="0.500s" id="anim_RenderLayer_LineSet_000004" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0005" inkscape:groupmode="frame" inkscape:label="frame_0005">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.760, 49.312 38.734, 49.337 31.603, 56.349 24.473, 63.360 20.655, 67.113 27.586, 74.322 31.890, 78.799 32.938, 77.798 39.993, 70.711 47.047, 63.623 50.000, 60.656 57.054, 67.744 64.109, 74.832 67.062, 77.798 68.110, 78.799 75.041, 71.590 79.345, 67.113 72.214, 60.102 65.084, 53.091 61.266, 49.337 61.240, 49.312 " fill="red" />
<path d=" M 61.266, 49.337 68.321, 42.250 75.375, 35.162 76.797, 33.733 78.372, 32.101 71.127, 25.208 67.136, 21.410 60.006, 28.421 52.875, 35.433 50.000, 38.260 42.870, 31.249 35.739, 24.238 32.864, 21.410 25.619, 28.304 21.628, 32.101 23.203, 33.733 30.257, 40.821 37.312, 47.908 38.734, 49.337 " fill="red" />
<path d=" M 50.000, 60.605 57.055, 67.692 64.109, 74.780 68.110, 78.799 " fill="red" />
<path d=" M 61.240, 49.312 68.295, 42.225 75.350, 35.137 78.372, 32.101 " fill="red" />
<path d=" M 31.890, 78.799 38.945, 71.711 45.999, 64.624 50.000, 60.605 50.000, 60.656 " fill="red" />
<path d=" M 21.628, 32.101 28.683, 39.188 35.738, 46.276 38.760, 49.312 " fill="red" />
</g>
<animate attributeName="display" begin="-0.333s" dur="0.500s" id="anim_RenderLayer_LineSet_000005" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0006" inkscape:groupmode="frame" inkscape:label="frame_0006">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.764, 49.013 38.584, 49.188 31.414, 56.159 24.245, 63.130 20.446, 66.824 27.326, 74.080 31.670, 78.661 32.738, 77.960 39.797, 70.878 46.857, 63.795 50.000, 60.641 57.060, 67.724 64.119, 74.806 67.262, 77.960 68.330, 78.661 75.210, 71.405 79.554, 66.824 72.385, 59.853 65.215, 52.882 61.416, 49.188 61.236, 49.013 " fill="red" />
<path d=" M 61.416, 49.188 68.476, 42.105 75.535, 35.023 76.616, 33.938 78.159, 32.044 70.829, 25.241 66.933, 21.625 59.763, 28.596 52.593, 35.567 50.000, 38.088 42.830, 31.117 35.661, 24.146 33.067, 21.625 25.738, 28.427 21.841, 32.044 23.384, 33.938 30.443, 41.021 37.503, 48.103 38.584, 49.188 " fill="red" />
<path d=" M 50.000, 60.281 57.061, 67.362 64.123, 74.442 68.330, 78.661 " fill="red" />
<path d=" M 61.236, 49.013 68.298, 41.932 75.359, 34.852 78.159, 32.044 " fill="red" />
<path d=" M 31.670, 78.661 38.732, 71.580 45.793, 64.499 50.000, 60.281 50.000, 60.641 " fill="red" />
<path d=" M 21.841, 32.044 28.902, 39.125 35.964, 46.205 38.764, 49.013 " fill="red" />
</g>
<animate attributeName="display" begin="-0.292s" dur="0.500s" id="anim_RenderLayer_LineSet_000006" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0007" inkscape:groupmode="frame" inkscape:label="frame_0007">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.769, 48.707 38.427, 49.035 31.209, 55.955 23.990, 62.875 20.231, 66.479 27.068, 73.777 31.442, 78.444 32.526, 78.066 39.599, 70.997 46.672, 63.928 50.000, 60.601 57.073, 67.671 64.146, 74.740 67.474, 78.066 68.558, 78.444 75.395, 71.147 79.769, 66.479 72.550, 59.559 65.332, 52.638 61.573, 49.035 61.231, 48.707 " fill="red" />
<path d=" M 61.573, 49.035 68.645, 41.965 75.718, 34.896 76.433, 34.182 77.940, 32.026 70.517, 25.326 66.727, 21.905 59.508, 28.825 52.289, 35.745 50.000, 37.940 42.781, 31.020 35.563, 24.099 33.273, 21.904 25.850, 28.605 22.060, 32.026 23.567, 34.182 30.640, 41.251 37.713, 48.320 38.427, 49.035 " fill="red" />
<path d=" M 50.000, 59.918 57.077, 66.983 64.154, 74.048 68.558, 78.444 " fill="red" />
<path d=" M 61.231, 48.707 68.308, 41.642 75.385, 34.577 77.940, 32.026 " fill="red" />
<path d=" M 31.442, 78.444 38.519, 71.379 45.596, 64.314 50.000, 59.918 50.000, 60.601 " fill="red" />
<path d=" M 22.060, 32.026 29.137, 39.091 36.214, 46.156 38.769, 48.707 " fill="red" />
</g>
<animate attributeName="display" begin="-0.250s" dur="0.500s" id="anim_RenderLayer_LineSet_000007" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0008" inkscape:groupmode="frame" inkscape:label="frame_0008">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.776, 48.414 38.274, 48.888 31.000, 55.750 23.726, 62.612 20.027, 66.102 26.830, 73.432 31.220, 78.161 32.319, 78.107 39.413, 71.059 46.506, 64.010 50.000, 60.539 57.094, 67.588 64.187, 74.636 67.681, 78.107 68.780, 78.161 75.583, 70.832 79.973, 66.102 72.699, 59.240 65.425, 52.378 61.726, 48.888 61.224, 48.414 " fill="red" />
<path d=" M 61.726, 48.888 68.820, 41.839 75.913, 34.791 76.259, 34.447 77.730, 32.049 70.212, 25.456 66.532, 22.228 59.258, 29.091 51.984, 35.953 50.000, 37.825 42.726, 30.963 35.452, 24.100 33.468, 22.228 25.950, 28.822 22.270, 32.049 23.741, 34.447 30.834, 41.496 37.928, 48.544 38.274, 48.888 " fill="red" />
<path d=" M 50.000, 59.542 57.101, 66.582 64.203, 73.623 68.780, 78.161 " fill="red" />
<path d=" M 61.224, 48.414 68.325, 41.373 75.427, 34.333 77.730, 32.049 " fill="red" />
<path d=" M 31.220, 78.161 38.321, 71.120 45.423, 64.080 50.000, 59.542 50.000, 60.539 " fill="red" />
<path d=" M 22.270, 32.049 29.371, 39.090 36.472, 46.130 38.776, 48.414 " fill="red" />
</g>
<animate attributeName="display" begin="-0.208s" dur="0.500s" id="anim_RenderLayer_LineSet_000008" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0009" inkscape:groupmode="frame" inkscape:label="frame_0009">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.783, 48.154 38.134, 48.757 30.804, 55.560 23.474, 62.362 19.847, 65.728 26.627, 73.079 31.021, 77.843 32.131, 78.091 39.250, 71.068 46.369, 64.045 50.000, 60.463 57.119, 67.486 64.238, 74.509 67.869, 78.091 68.979, 77.843 75.759, 70.492 80.153, 65.728 72.823, 58.926 65.493, 52.123 61.866, 48.757 61.217, 48.154 " fill="red" />
<path d=" M 61.866, 48.757 68.985, 41.734 76.107, 34.709 77.544, 32.102 69.936, 25.612 66.361, 22.562 59.031, 29.364 51.701, 36.167 50.000, 37.745 42.670, 30.943 35.340, 24.140 33.639, 22.562 26.031, 29.052 22.456, 32.102 23.893, 34.709 31.012, 41.732 38.134, 48.757 " fill="red" />
<path d=" M 50.000, 59.183 57.131, 66.194 64.261, 73.205 68.979, 77.843 " fill="red" />
<path d=" M 61.217, 48.154 68.347, 41.144 75.478, 34.133 77.544, 32.102 " fill="red" />
<path d=" M 31.021, 77.843 38.152, 70.832 45.282, 63.821 50.000, 59.183 50.000, 60.463 " fill="red" />
<path d=" M 22.456, 32.102 29.587, 39.112 36.718, 46.123 38.783, 48.154 " fill="red" />
</g>
<animate attributeName="display" begin="-0.167s" dur="0.500s" id="anim_RenderLayer_LineSet_000009" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0010" inkscape:groupmode="frame" inkscape:label="frame_0010">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.790, 47.947 38.018, 48.653 30.638, 55.401 23.258, 62.149 19.703, 65.400 26.470, 72.763 30.860, 77.541 31.978, 78.040 39.122, 71.042 46.266, 64.045 50.000, 60.388 57.144, 67.385 64.288, 74.383 68.022, 78.040 69.140, 77.541 75.906, 70.178 80.297, 65.400 72.917, 58.652 65.537, 51.904 61.982, 48.653 61.210, 47.947 " fill="red" />
<path d=" M 61.982, 48.653 69.126, 41.656 75.987, 34.936 77.394, 32.166 69.712, 25.765 66.225, 22.860 58.845, 29.608 51.466, 36.356 50.000, 37.696 42.620, 30.948 35.240, 24.200 33.775, 22.860 26.092, 29.261 22.606, 32.166 24.013, 34.936 31.157, 41.934 38.018, 48.653 " fill="red" />
<path d=" M 50.000, 58.878 57.160, 65.859 64.319, 72.841 69.140, 77.541 " fill="red" />
<path d=" M 61.210, 47.947 68.370, 40.966 75.529, 33.984 77.394, 32.166 " fill="red" />
<path d=" M 30.860, 77.541 38.020, 70.560 45.180, 63.578 50.000, 58.878 50.000, 60.388 " fill="red" />
<path d=" M 22.606, 32.166 29.765, 39.147 36.925, 46.129 38.790, 47.947 " fill="red" />
</g>
<animate attributeName="display" begin="-0.125s" dur="0.500s" id="anim_RenderLayer_LineSet_000010" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0011" inkscape:groupmode="frame" inkscape:label="frame_0011">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.795, 47.810 37.939, 48.584 30.524, 55.293 23.109, 62.002 19.609, 65.168 26.369, 72.537 30.753, 77.316 31.874, 77.986 39.038, 71.008 46.201, 64.031 50.000, 60.331 57.163, 67.309 64.327, 74.286 68.126, 77.986 69.247, 77.316 76.007, 69.947 80.391, 65.168 72.976, 58.459 65.560, 51.750 62.061, 48.584 61.205, 47.810 " fill="red" />
<path d=" M 62.061, 48.584 69.224, 41.606 75.908, 35.097 77.295, 32.220 69.561, 25.880 66.136, 23.073 58.721, 29.782 51.305, 36.491 50.000, 37.672 42.585, 30.963 35.169, 24.254 33.864, 23.073 26.130, 29.412 22.705, 32.220 24.092, 35.097 31.256, 42.074 37.939, 48.584 " fill="red" />
<path d=" M 50.000, 58.667 57.182, 65.626 64.363, 72.584 69.247, 77.316 " fill="red" />
<path d=" M 61.205, 47.810 68.387, 40.851 75.569, 33.893 77.295, 32.220 " fill="red" />
<path d=" M 30.753, 77.316 37.935, 70.358 45.116, 63.399 50.000, 58.667 50.000, 60.331 " fill="red" />
<path d=" M 22.705, 32.220 29.887, 39.178 37.068, 46.137 38.795, 47.810 " fill="red" />
</g>
<animate attributeName="display" begin="-0.083s" dur="0.500s" id="anim_RenderLayer_LineSet_000011" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
<g id="frame_0012" inkscape:groupmode="frame" inkscape:label="frame_0012">
<g id="strokes" inkscape:groupmode="layer" inkscape:label="strokes">
<path d=" M 38.797, 47.760 37.910, 48.559 30.482, 55.253 23.053, 61.947 19.575, 65.081 26.333, 72.452 30.714, 77.230 31.837, 77.962 39.008, 70.993 46.179, 64.023 50.000, 60.309 57.171, 67.279 64.342, 74.248 68.163, 77.962 69.286, 77.230 76.044, 69.859 80.425, 65.081 72.996, 58.387 65.568, 51.693 62.090, 48.559 61.203, 47.760 " fill="red" />
<path d=" M 62.090, 48.559 69.261, 41.589 75.879, 35.156 77.259, 32.241 69.506, 25.925 66.104, 23.153 58.675, 29.847 51.246, 36.542 50.000, 37.665 42.571, 30.970 35.142, 24.276 33.896, 23.153 26.143, 29.469 22.741, 32.241 24.121, 35.156 31.292, 42.126 37.910, 48.559 " fill="red" />
<path d=" M 50.000, 58.589 57.190, 65.539 64.381, 72.488 69.286, 77.230 " fill="red" />
<path d=" M 61.203, 47.760 68.394, 40.810 75.584, 33.861 77.259, 32.241 " fill="red" />
<path d=" M 30.714, 77.230 37.904, 70.280 45.094, 63.330 50.000, 58.589 50.000, 60.309 " fill="red" />
<path d=" M 22.741, 32.241 29.931, 39.191 37.121, 46.141 38.797, 47.760 " fill="red" />
</g>
<animate attributeName="display" begin="-0.042s" dur="0.500s" id="anim_RenderLayer_LineSet_000012" keyTimes="0.0;0.083;0.167;0.25;0.333;0.417;0.5;0.583;0.667;0.75;0.833;0.917;1" repeatCount="indefinite" values="none;none;none;none;none;none;none;none;none;none;none;inline;none" />
</g>
</g>
</svg>

I was able to create a working solution, using the techniques implemented by Heydon Pickering in the following article: https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/
You can see a working implementation at: https://codepen.io/jamesdoe/pen/yLyrwmV
Basically, each path element within the svg represents a 'frame' of animation; and each of those frames are made visible for only brief moments of time - in the same manner that traditional motion pictures are displayed.
The start and restart of the animation are accomplished by removing and then re-adding classes that apply the animation. i.e.,
<style>
.timeline>g:nth-child(1) path.frame {
animation-name: click_animation_frame_1;
}
.timeline>g:nth-child(2) path.frame {
animation-name: click_animation_frame_2;
}
...
#keyframes click_animation_frame_1 {
0% {opacity: 1;}
16.666666666666668% {opacity: 0;}
}
#keyframes click_animation_frame_2 {
16.666666666666668% {opacity: 1;}
33.333333333333336% {opacity: 0;}
}
...
</style>
<script>
for (let g of document.getElementById('timeline').children) {
for (let path of g.children) {
path.classList.add('frame');
}
}
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="100" version="1.1" width="100" id="timeline">
<g id="frame1">
<path d=" M 38.797, 47.754 37.907, 48.556 30.476, 55.248 23.046, 61.940 19.571, 65.070 26.329, 72.441 30.709, 77.219 31.832, 77.959 39.004, 70.990 46.176, 64.022 50.000, 60.306 57.172, 67.275 64.344, 74.243 68.168, 77.959 69.291, 77.219 76.049, 69.848 80.429, 65.070 72.999, 58.378 65.568, 51.686 62.093, 48.556 61.203, 47.754 "/>
<path d=" M 62.093, 48.556 69.265, 41.587 75.875, 35.164 77.255, 32.244 69.500, 25.931 66.100, 23.163 58.669, 29.855 51.239, 36.548 50.000, 37.664 42.570, 30.971 35.139, 24.279 33.900, 23.163 26.145, 29.476 22.745, 32.244 24.125, 35.164 31.297, 42.133 37.907, 48.556 "/>
<path d=" M 50.000, 58.579 57.191, 65.528 64.383, 72.476 69.291, 77.219 " />
<path d=" M 61.203, 47.754 68.395, 40.805 75.586, 33.857 77.255, 32.244 " />
<path d=" M 30.709, 77.219 37.900, 70.270 45.092, 63.322 50.000, 58.579 50.000, 60.306 " />
<path d=" M 22.745, 32.244 29.937, 39.193 37.128, 46.142 38.797, 47.754 " />
</g>
<g id="frame2">
<path d=" M 38.862, 47.999 38.070, 48.714 30.643, 55.410 23.215, 62.106 19.758, 65.223 26.516, 72.594 30.832, 77.300 31.832, 77.959 39.004, 70.990 46.176, 64.022 50.000, 60.306 57.172, 67.275 64.344, 74.243 68.168, 77.959 69.168, 77.300 75.926, 69.930 80.242, 65.223 72.815, 58.527 65.388, 51.831 61.930, 48.714 61.138, 47.999 "/>
<path d=" M 61.930, 48.714 69.102, 41.745 75.875, 35.164 77.104, 32.562 69.354, 26.243 66.014, 23.519 58.587, 30.216 51.160, 36.912 50.000, 37.957 42.573, 31.261 35.146, 24.565 33.986, 23.519 26.236, 29.839 22.896, 32.562 24.125, 35.164 31.297, 42.133 38.070, 48.714 "/>
<path d=" M 50.000, 58.768 57.189, 65.719 64.379, 72.670 69.168, 77.300 " fill="none" />
<path d=" M 61.138, 47.999 68.327, 41.048 75.517, 34.098 77.104, 32.562 " fill="none" />
<path d=" M 30.832, 77.300 38.022, 70.349 45.211, 63.398 50.000, 58.768 50.000, 60.306 " />
<path d=" M 22.896, 32.562 30.085, 39.513 37.274, 46.464 38.862, 47.999 " fill="none" />
</g>
<g id="frame3">
<path d=" M 39.014, 48.573 38.450, 49.083 31.031, 55.788 23.612, 62.493 20.195, 65.581 26.955, 72.950 31.120, 77.490 31.832, 77.959 39.004, 70.990 46.176, 64.022 50.000, 60.306 57.172, 67.275 64.344, 74.243 68.168, 77.959 68.880, 77.490 75.640, 70.121 79.805, 65.581 72.386, 58.876 64.967, 52.171 61.550, 49.083 60.986, 48.573 "/>
<path d=" M 61.550, 49.083 68.722, 42.114 75.875, 35.164 76.753, 33.307 69.014, 26.974 65.813, 24.354 58.394, 31.059 50.975, 37.764 50.000, 38.645 42.581, 31.940 35.162, 25.235 34.187, 24.354 26.448, 30.687 23.247, 33.307 24.125, 35.164 31.297, 42.133 38.450, 49.083 "/>
<path d=" M 50.000, 59.209 57.184, 66.165 64.369, 73.121 68.880, 77.490 " />
<path d=" M 60.986, 48.573 68.170, 41.617 75.354, 34.661 76.753, 33.307 " />
<path d=" M 31.120, 77.490 38.304, 70.534 45.488, 63.578 50.000, 59.209 50.000, 60.306 " />
<path d=" M 23.247, 33.307 30.432, 40.263 37.616, 47.219 39.014, 48.573 " />
</g>
<g id="frame4">
<path d=" M 39.191, 49.237 38.889, 49.510 31.480, 56.225 24.070, 62.941 20.701, 65.994 27.462, 73.361 31.452, 77.709 31.832, 77.959 39.004, 70.990 46.176, 64.022 50.000, 60.306 57.172, 67.275 64.344, 74.243 68.168, 77.959 68.548, 77.709 75.310, 70.341 79.299, 65.994 71.890, 59.279 64.480, 52.563 61.111, 49.510 60.809, 49.237 "/>
<path d=" M 61.111, 49.510 68.283, 42.542 75.454, 35.573 75.875, 35.164 76.345, 34.170 68.619, 27.821 65.579, 25.323 58.169, 32.038 50.759, 38.753 50.000, 39.441 42.590, 32.726 35.180, 26.011 34.421, 25.323 26.695, 31.672 23.655, 34.170 24.125, 35.164 31.297, 42.133 38.469, 49.101 38.889, 49.510 "/>
<path d=" M 50.000, 59.720 57.179, 66.682 64.357, 73.644 68.548, 77.709 " />
<path d=" M 60.809, 49.237 67.988, 42.275 75.166, 35.313 76.345, 34.170 " />
<path d=" M 31.452, 77.709 38.631, 70.747 45.809, 63.785 50.000, 59.720 50.000, 60.306 " />
<path d=" M 23.655, 34.170 30.834, 41.132 38.012, 48.094 39.191, 49.237 " />
</g>
<g id="frame5">
<path d=" M 39.334, 49.778 39.247, 49.857 31.844, 56.581 24.442, 63.304 21.111, 66.329 27.874, 73.696 31.721, 77.886 31.832, 77.959 39.004, 70.990 46.176, 64.022 50.000, 60.306 57.172, 67.275 64.344, 74.243 68.168, 77.959 68.279, 77.886 75.042, 70.520 78.889, 66.329 71.486, 59.606 64.084, 52.882 60.753, 49.857 60.666, 49.778 "/>
<path d=" M 60.753, 49.857 67.925, 42.889 75.097, 35.920 75.875, 35.164 76.012, 34.874 68.297, 28.512 65.389, 26.113 57.986, 32.837 50.584, 39.560 50.000, 40.090 42.598, 33.367 35.195, 26.643 34.611, 26.113 26.896, 32.475 23.988, 34.874 24.125, 35.164 31.297, 42.133 38.469, 49.101 39.247, 49.857 "/>
<path d=" M 50.000, 60.135 57.174, 67.102 64.348, 74.069 68.279, 77.886 " />
<path d=" M 60.666, 49.778 67.840, 42.811 75.013, 35.844 76.012, 34.874 " />
<path d=" M 31.721, 77.886 38.895, 70.919 46.069, 63.953 50.000, 60.135 50.000, 60.306 " />
<path d=" M 23.988, 34.874 31.162, 41.841 38.335, 48.808 39.334, 49.778 " />
</g>
<g id="frame6">
<path d=" M 78.720, 66.467 71.957, 73.833 68.168, 77.959 60.996, 70.990 53.824, 64.022 50.000, 60.306 42.828, 67.275 35.656, 74.243 31.832, 77.959 25.069, 70.593 21.280, 66.467 28.679, 59.740 36.079, 53.014 39.393, 50.000 32.221, 43.031 25.049, 36.063 24.125, 35.164 31.835, 28.796 34.690, 26.439 42.089, 33.166 49.489, 39.892 50.000, 40.357 57.399, 33.631 64.799, 26.904 65.310, 26.439 73.021, 32.806 75.875, 35.164 68.703, 42.133 61.531, 49.101 60.607, 50.000 68.006, 56.727 75.405, 63.454 78.720, 66.467 "/>
</g>
</svg>

How to change react-lottie and SVG sizes using CSS media queries

I have a react project where I display Lottie-react animations and SVG's, and I am trying to ensure the illustrations are responsive like my website.
The components are is a .js file where I add them to my project like so
import React from 'react'
import MobileAnimation from '../../images/illustrations/mobileanimation.js';
import Icon from '../../images/illustrations/Icon.js';
const Section = () => {
return (
<section className="section-four">
<MobileAnimation fill="#49c" width={100} name="phone" className="pagefouranimation" />
// No effect to size
<Icon fill="#49c" name="phone" width="800" height="800"/>
</section>
)
}
export default Section
I have tried giving the 'MobileAnimation' a className and changing the width and height like so
.pagefouranimation {
padding: 0;
width: 100px;
height: 50px;
margin-left: -124px;
}
.illustration-comp {
width: 200px;
height: 200px;
}
SVG
import React from "react";
import styled from "styled-components";
export default class Icon extends React.Component {
render() {
return (
<svg className="illustration-comp" class="illustration" viewBox="0 0 1155 700" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="359.562" y="82" width="254.804" height="537.533" rx="24.4333" fill="#F6F0F9"/>
<rect x="385.74" y="157.045" width="78.5356" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="478.238" y="157.045" width="78.5356" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="385.74" y="301.9" width="214.664" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="401.448" y="326.334" width="48.8666" height="48.8666" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="459.04" y="326.334" width="123.912" height="8.72618" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="460.785" y="342.041" width="80.2809" height="8.72618" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="383.995" y="443.264" width="143.109" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="541.066" y="443.264" width="59.338" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="553.283" y="455.48" width="34.9047" height="34.9047" rx="7.18627" fill="black" fill-opacity="0.06"/>
<rect x="553.283" y="497.365" width="34.9047" height="34.9047" rx="7.18627" fill="black" fill-opacity="0.06"/>
<path d="M385.883 547.76C408.673 560.367 376.388 602.713 357.397 622.31H322.849C298.302 611.097 253.026 586.792 268.3 579.277C287.392 569.882 257.693 559.275 249.207 535.334C240.722 511.393 274.361 512 298.605 512C322.849 512 303.756 480.482 329.213 473.209C354.669 465.936 345.881 494.12 345.881 512C345.881 529.88 357.397 532.001 385.883 547.76Z" fill="#FF9E80"/>
<path d="M321.247 515.288C327.676 526.002 332.101 585.573 340.99 621.131H330.99C332.505 616.283 301.594 600.524 291.593 594.16C281.592 587.796 292.805 576.885 296.745 575.067C300.685 573.249 263.712 556.278 269.47 534.459C273.742 518.272 296.097 553.559 302.2 537.489C306.073 527.291 316.701 507.712 321.247 515.288Z" fill="white" fill-opacity="0.13"/>
<path d="M343.415 621.742C341.552 616.593 339.251 609.58 336.9 601.438M333.717 492.645C326.747 502.645 333.113 507.755 329.174 525.937C324.744 546.379 328.035 567.67 333.717 589.77M333.717 589.77C320.787 572.345 304.321 556.283 277.653 539.919M333.717 589.77C334.765 593.845 335.838 597.757 336.9 601.438M336.9 601.438C344.224 591.033 361.84 568.951 373.72 563.859" stroke="#FBFBFB" stroke-width="1.36342" stroke-linecap="round"/>
<path d="M306.048 533.4C278.768 548.491 317.414 599.18 340.147 622.639H381.502C410.885 609.217 465.082 580.123 446.799 571.127C423.945 559.881 459.495 547.185 469.652 518.527C479.81 489.869 439.543 490.594 410.523 490.594C381.502 490.594 404.356 452.867 373.884 444.161C343.412 435.455 353.932 469.192 353.932 490.594C353.932 511.997 340.147 514.537 306.048 533.4Z" fill="#17A0B3"/>
<path d="M383.42 494.533C375.725 507.359 370.428 578.667 359.787 621.231H371.758C369.944 615.427 406.946 596.563 418.917 588.945C430.888 581.327 399.958 580.189 399.958 570.443C399.958 555.261 452.291 543.6 445.398 517.481C440.285 498.106 413.526 540.345 406.22 521.108C401.584 508.902 388.862 485.464 383.42 494.533Z" fill="white" fill-opacity="0.13"/>
<path d="M356.883 621.955C359.113 615.791 361.867 607.396 364.681 597.65M368.492 467.422C376.835 479.393 369.215 485.509 373.93 507.274C379.232 531.743 375.293 557.23 368.492 583.684M368.492 583.684C383.969 562.825 403.679 543.599 435.602 524.01M368.492 583.684C367.238 588.561 365.953 593.244 364.681 597.65M364.681 597.65C355.915 585.195 334.828 558.762 320.607 552.668" stroke="#FBFBFB" stroke-width="1.63205" stroke-linecap="round"/>
<path d="M714.918 600.656C713.755 598.912 712.738 578.857 712.738 568.684C708.378 570.864 698.931 571.832 693.845 571.59C695.54 580.552 699.949 599.203 701.111 599.203C702.274 599.203 708.62 600.172 714.918 600.656Z" fill="#F7B3A4"/>
<path d="M705.471 599.204L701.838 576.677C699.658 574.74 695.298 572.463 695.298 575.951C695.298 579.439 698.931 592.664 701.111 599.204H705.471Z" fill="black" fill-opacity="0.07"/>
<path d="M700.385 622.458C697.479 615.482 699.174 603.565 700.385 598.479H718.551C718.551 598.479 743.077 615.192 757.791 615.192C762.151 615.192 759.244 622.458 759.244 622.458H700.385Z" fill="#FA5C5C"/>
<path d="M730.425 610.301H737.406M735.661 612.919H745.26M726.935 606.811H732.17" stroke="white" stroke-width="1.74524" stroke-linecap="round"/>
<path d="M632.807 559.239L647.34 537.439L660.419 551.246L643.706 568.686L632.807 559.239Z" fill="#F7B3A4"/>
<path d="M655.333 540.344L635.713 561.417H632.08L649.52 535.258L655.333 540.344Z" fill="black" fill-opacity="0.08"/>
<path d="M620.453 573.768L633.533 557.055L646.613 570.861C646.613 570.861 650.522 581.432 653.879 589.754C657.535 598.817 668.412 607.194 664.779 615.187C663.671 617.624 658.966 618.82 658.966 618.82L620.453 573.768Z" fill="#FA5C5C"/>
<path d="M647.526 579.758L651.889 583.248M646.653 584.121L654.507 589.357M647.526 589.357L656.252 595.465" stroke="white" stroke-width="1.74524" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M644.706 218.146C644.147 218.712 643.574 219.293 642.979 219.889C641.83 221.037 640.682 222.015 639.595 222.941C635.18 226.701 631.783 229.596 633.532 239.508C633.255 240.248 632.666 241.082 632 242.024C630.924 243.548 629.647 245.355 629.172 247.501C628.617 250.009 629.381 251.944 630.161 253.919C630.869 255.711 631.591 257.537 631.352 259.854C631.053 262.763 629.197 265.159 627.519 267.326C625.773 269.58 624.219 271.586 624.812 273.661C625.294 275.347 625.137 277.75 624.976 280.211C624.653 285.176 624.314 290.374 629.172 290.374C632.352 290.374 633.027 291.766 633.816 293.392C634.83 295.481 636.031 297.958 642.979 298.367C649.284 298.738 655.401 297.973 660.554 297.328C665.497 296.71 669.555 296.202 672.045 296.914C673.813 297.419 675.616 298.508 677.479 299.633C680.975 301.744 684.68 303.982 688.758 302.727C698.204 299.82 707.651 288.921 704.017 284.561C702.383 282.6 701.337 282.403 700.945 281.788C700.465 281.036 700.964 279.659 702.564 273.661C705.471 262.761 701.111 260.581 697.477 259.854C693.844 259.128 691.664 248.228 693.844 243.141C696.024 238.055 691.664 231.515 688.758 229.335C687.824 228.635 687.715 226.284 687.588 223.537C687.319 217.732 686.969 210.156 678.584 212.622C675.354 213.572 673.559 211.536 671.664 209.387C669.406 206.828 667.007 204.107 661.871 206.082C653.393 209.343 649.598 213.189 644.706 218.146ZM716.37 471.311C722.183 455.325 696.024 396.466 693.844 392.833C682.217 406.785 637.165 401.311 616.819 396.466L615.365 405.913C612.459 424.515 645.158 481.969 661.871 508.371L640.798 539.617L659.691 559.236C663.715 553.54 672.478 541.093 677.961 533.077L692.39 578.129C701.212 580.335 713.127 573.128 718.466 569.899C718.756 569.723 719.027 569.559 719.277 569.41L695.955 506.191C705.833 491.026 714.187 477.315 716.37 471.311Z" fill="
#fe5b39"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M664.181 258.811C668.531 254.624 671.739 246.861 672.046 233.695V226.428C672.046 226.428 667.686 221.342 660.419 221.342C650.904 221.342 648.793 223.823 648.793 223.823C640.726 234.409 636.124 251.017 646.239 259.769L645.159 270.03L644.433 275.843L655.333 287.469L669.139 279.476C668.897 278.628 668.352 277.538 667.776 276.388C667.201 275.237 666.596 274.026 666.232 272.936C665.773 271.558 664.612 263.914 664.181 258.811Z" fill="#F7AF9F"/>
<path d="M661.145 267.847C661.145 267.847 663.567 261.065 664.052 259.854C664.778 266.393 665.505 274.387 667.685 275.84C666.958 278.746 656.785 280.926 657.512 280.2C658.093 279.618 661.145 267.847 661.145 267.847Z" fill="black" fill-opacity="0.08"/>
<path d="M672.046 233.695C671.464 258.692 660.419 264.214 650.973 262.761C634.982 255.451 639.674 235.79 648.793 223.823C648.793 223.823 650.904 221.342 660.419 221.342C667.686 221.342 672.046 226.428 672.046 226.428V233.695Z" fill="white" fill-opacity="0.05"/>
<path d="M761.724 303.408L747.565 325.935C746.956 326.902 747.652 328.161 748.795 328.161H761.27C761.812 328.161 762.308 327.86 762.559 327.38L770.871 311.448L774.18 304.832C774.663 303.865 773.96 302.729 772.88 302.729H762.954C762.455 302.729 761.99 302.985 761.724 303.408Z" fill="#2A2626"/>
<path d="M749.069 327.434L721.456 341.24C720.293 344.728 722.909 354.32 724.362 358.68L757.062 333.974C767.235 326.707 772.321 311.447 770.141 311.447C768.398 311.447 755.366 322.105 749.069 327.434Z" fill="#F7B3A4"/>
<path d="M727.807 345.023L725.189 339.787L748.75 327.57L727.807 345.023Z" fill="white" fill-opacity="0.06"/>
<path d="M645.158 534.531L680.038 482.212L661.871 429.893" stroke="black" stroke-opacity="0.07" stroke-width="1.45331" stroke-linecap="round"/>
<path d="M680.765 482.21L661.872 507.643C653.153 493.691 627.72 449.511 620.453 427.711C620.453 427.711 645.055 426.455 657.512 434.251C675.156 445.294 680.765 482.21 680.765 482.21Z" fill="black" fill-opacity="0.04"/>
<path d="M633.532 399.371C635.276 433.669 655.089 482.936 664.778 503.282L661.871 507.642L657.512 501.829C609.552 417.537 614.155 412.451 616.819 399.371H633.532Z" fill="black" fill-opacity="0.07"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M644.432 272.205L624.086 275.838C624.085 275.839 624.085 275.839 624.084 275.84C615.848 281.17 597.49 303.599 589.933 350.684C596.23 365.944 611.151 399.515 620.452 411.723L634.258 401.55L634.196 401.386L634.985 400.823C671.609 407.217 689.969 398.158 694.571 392.829C692.671 390.296 691.115 381.031 689.976 371.008L690.211 371.029L725.09 361.583C732.357 347.776 728.723 337.603 722.91 336.15L694.571 339.783C691.364 315.198 686.307 294.678 679.342 282.766C675.114 274.853 670.396 270.972 666.723 274.339C656.441 286.905 649.052 277.861 644.662 272.487L644.432 272.205Z" fill="
#002578"/>
<path d="M618.273 400.825C615.948 400.243 598.411 366.672 589.934 349.959C591.096 358.097 609.553 395.738 620.453 411.724L624.813 408.091C623.602 405.911 620.598 401.406 618.273 400.825Z" fill="#070707" fill-opacity="0.06"/>
<path d="M624.086 275.84C615.851 281.169 597.491 303.598 589.934 350.685C596.231 365.945 611.152 399.516 620.453 411.724L634.259 401.551L613.913 347.778L629.899 304.906" stroke="black" stroke-opacity="0.06" stroke-width="1.45331"/>
<path d="M622.633 416.812L621.906 410.272L632.806 402.279L638.619 410.272C638.038 414.342 632.079 421.657 629.173 424.806L622.633 416.812Z" fill="#F7B3A4"/>
<path d="M628.446 413.903L621.906 410.996L622.633 416.809L629.173 424.802L631.353 421.169L628.446 413.903Z" fill="black" fill-opacity="0.06"/>
<path d="M626.992 428.44C630.383 425.049 637.747 416.523 640.072 409.547" stroke="white" stroke-opacity="0.13" stroke-width="0.726653" stroke-linecap="round"/>
<path d="M690.211 371.031C688.516 344.629 688.032 318.712 677.858 294.006" stroke="black" stroke-opacity="0.03" stroke-width="1.45331"/>
<path d="M663.325 554.149L659.691 549.789C659.691 549.789 698.405 504.685 710.557 465.497C714.388 453.144 685.124 397.919 685.124 397.919C691.664 396.465 689 397.192 694.571 393.559C702.322 415.116 717.824 460.265 717.824 468.404C717.824 476.542 681.491 528.958 663.325 554.149Z" fill="white" fill-opacity="0.03"/>
<path d="M672.772 491.659L663.325 437.16L679.312 481.486L672.772 491.659Z" fill="black" fill-opacity="0.04"/>
<path d="M706.198 567.228L690.938 513.456L696.025 506.916L718.551 562.868L706.198 567.228Z" fill="black" fill-opacity="0.06"/>
<path d="M688.032 346.329C686.288 359.699 691.181 382.904 693.845 392.834C683.963 401.554 660.419 402.523 650.246 401.554C650.246 401.554 661.146 395.014 666.232 389.928C671.319 384.841 680.766 378.301 682.945 353.595C684.061 340.948 680.766 307.574 679.312 294.736C682.945 305.636 689.776 332.958 688.032 346.329Z" fill="black" fill-opacity="0.03"/>
<path d="M199 620.768H788.017" stroke="black" stroke-width="3.49047"/>
<path d="M919.783 272.687H825.13H778.095C776.837 272.687 775.676 273.364 775.057 274.46L770.347 282.792C769.109 284.981 766.034 285.183 764.521 283.176L757.663 274.077C757.003 273.202 755.971 272.687 754.875 272.687H729.552C727.624 272.687 726.062 271.124 726.062 269.197V153.045C726.062 151.117 727.624 149.555 729.552 149.555H919.783C921.71 149.555 923.273 151.117 923.273 153.045V269.197C923.273 271.124 921.71 272.687 919.783 272.687Z" fill="#F3F3F3"/>
<rect x="734.787" y="165.262" width="47.1214" height="89.007" fill="white" fill-opacity="0.97"/>
<rect x="741.769" y="236.816" width="33.1595" height="10.4714" rx="1.74524" fill="#1999AB"/>
<rect x="741.769" y="201.912" width="33.1595" height="29.669" fill="#DFF8F9"/>
<rect x="741.769" y="173.988" width="33.1595" height="22.6881" fill="#DFF8F9"/>
<circle cx="758.349" cy="216.746" r="7.85356" fill="#FF9E80"/>
<rect x="787.145" y="165.262" width="106.459" height="43.6309" rx="1.74524" fill="white"/>
<rect x="787.145" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
<rect x="823.794" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
<rect x="860.444" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
</svg> );
}
}
But this doesn't work. How do you change the size of Lottie illustrations and animations for different devices ? The only way I have worked out to change the size is directly in the .js file. I also have

In my opinion, you have 2 ways
In your component
<Icon fill="#49c" name="phone" width="800" height='800'/>
one of them is
in your Icon.js
export default class Icon extends React.Component {render() {
return (
<svg className='illustration-comp' viewBox="0 0 1155 700" >
<rect x="359.562" y="82" width="254.804" height="537.533" rx="24.4333" fill="#F6F0F9"/>
<rect x="385.74" y="157.045" width="78.5356" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="478.238" y="157.045" width="78.5356" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="385.74" y="301.9" width="214.664" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="401.448" y="326.334" width="48.8666" height="48.8666" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="459.04" y="326.334" width="123.912" height="8.72618" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="460.785" y="342.041" width="80.2809" height="8.72618" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="383.995" y="443.264" width="143.109" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="541.066" y="443.264" width="59.338" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="553.283" y="455.48" width="34.9047" height="34.9047" rx="7.18627" fill="black" fill-opacity="0.06"/>
<rect x="553.283" y="497.365" width="34.9047" height="34.9047" rx="7.18627" fill="black" fill-opacity="0.06"/>
<path d="M385.883 547.76C408.673 560.367 376.388 602.713 357.397 622.31H322.849C298.302 611.097 253.026 586.792 268.3 579.277C287.392 569.882 257.693 559.275 249.207 535.334C240.722 511.393 274.361 512 298.605 512C322.849 512 303.756 480.482 329.213 473.209C354.669 465.936 345.881 494.12 345.881 512C345.881 529.88 357.397 532.001 385.883 547.76Z" fill="#FF9E80"/>
<path d="M321.247 515.288C327.676 526.002 332.101 585.573 340.99 621.131H330.99C332.505 616.283 301.594 600.524 291.593 594.16C281.592 587.796 292.805 576.885 296.745 575.067C300.685 573.249 263.712 556.278 269.47 534.459C273.742 518.272 296.097 553.559 302.2 537.489C306.073 527.291 316.701 507.712 321.247 515.288Z" fill="white" fill-opacity="0.13"/>
<path d="M343.415 621.742C341.552 616.593 339.251 609.58 336.9 601.438M333.717 492.645C326.747 502.645 333.113 507.755 329.174 525.937C324.744 546.379 328.035 567.67 333.717 589.77M333.717 589.77C320.787 572.345 304.321 556.283 277.653 539.919M333.717 589.77C334.765 593.845 335.838 597.757 336.9 601.438M336.9 601.438C344.224 591.033 361.84 568.951 373.72 563.859" stroke="#FBFBFB" stroke-width="1.36342" stroke-linecap="round"/>
<path d="M306.048 533.4C278.768 548.491 317.414 599.18 340.147 622.639H381.502C410.885 609.217 465.082 580.123 446.799 571.127C423.945 559.881 459.495 547.185 469.652 518.527C479.81 489.869 439.543 490.594 410.523 490.594C381.502 490.594 404.356 452.867 373.884 444.161C343.412 435.455 353.932 469.192 353.932 490.594C353.932 511.997 340.147 514.537 306.048 533.4Z" fill="#17A0B3"/>
<path d="M383.42 494.533C375.725 507.359 370.428 578.667 359.787 621.231H371.758C369.944 615.427 406.946 596.563 418.917 588.945C430.888 581.327 399.958 580.189 399.958 570.443C399.958 555.261 452.291 543.6 445.398 517.481C440.285 498.106 413.526 540.345 406.22 521.108C401.584 508.902 388.862 485.464 383.42 494.533Z" fill="white" fill-opacity="0.13"/>
<path d="M356.883 621.955C359.113 615.791 361.867 607.396 364.681 597.65M368.492 467.422C376.835 479.393 369.215 485.509 373.93 507.274C379.232 531.743 375.293 557.23 368.492 583.684M368.492 583.684C383.969 562.825 403.679 543.599 435.602 524.01M368.492 583.684C367.238 588.561 365.953 593.244 364.681 597.65M364.681 597.65C355.915 585.195 334.828 558.762 320.607 552.668" stroke="#FBFBFB" stroke-width="1.63205" stroke-linecap="round"/>
<path d="M714.918 600.656C713.755 598.912 712.738 578.857 712.738 568.684C708.378 570.864 698.931 571.832 693.845 571.59C695.54 580.552 699.949 599.203 701.111 599.203C702.274 599.203 708.62 600.172 714.918 600.656Z" fill="#F7B3A4"/>
<path d="M705.471 599.204L701.838 576.677C699.658 574.74 695.298 572.463 695.298 575.951C695.298 579.439 698.931 592.664 701.111 599.204H705.471Z" fill="black" fill-opacity="0.07"/>
<path d="M700.385 622.458C697.479 615.482 699.174 603.565 700.385 598.479H718.551C718.551 598.479 743.077 615.192 757.791 615.192C762.151 615.192 759.244 622.458 759.244 622.458H700.385Z" fill="#FA5C5C"/>
<path d="M730.425 610.301H737.406M735.661 612.919H745.26M726.935 606.811H732.17" stroke="white" stroke-width="1.74524" stroke-linecap="round"/>
<path d="M632.807 559.239L647.34 537.439L660.419 551.246L643.706 568.686L632.807 559.239Z" fill="#F7B3A4"/>
<path d="M655.333 540.344L635.713 561.417H632.08L649.52 535.258L655.333 540.344Z" fill="black" fill-opacity="0.08"/>
<path d="M620.453 573.768L633.533 557.055L646.613 570.861C646.613 570.861 650.522 581.432 653.879 589.754C657.535 598.817 668.412 607.194 664.779 615.187C663.671 617.624 658.966 618.82 658.966 618.82L620.453 573.768Z" fill="#FA5C5C"/>
<path d="M647.526 579.758L651.889 583.248M646.653 584.121L654.507 589.357M647.526 589.357L656.252 595.465" stroke="white" stroke-width="1.74524" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M644.706 218.146C644.147 218.712 643.574 219.293 642.979 219.889C641.83 221.037 640.682 222.015 639.595 222.941C635.18 226.701 631.783 229.596 633.532 239.508C633.255 240.248 632.666 241.082 632 242.024C630.924 243.548 629.647 245.355 629.172 247.501C628.617 250.009 629.381 251.944 630.161 253.919C630.869 255.711 631.591 257.537 631.352 259.854C631.053 262.763 629.197 265.159 627.519 267.326C625.773 269.58 624.219 271.586 624.812 273.661C625.294 275.347 625.137 277.75 624.976 280.211C624.653 285.176 624.314 290.374 629.172 290.374C632.352 290.374 633.027 291.766 633.816 293.392C634.83 295.481 636.031 297.958 642.979 298.367C649.284 298.738 655.401 297.973 660.554 297.328C665.497 296.71 669.555 296.202 672.045 296.914C673.813 297.419 675.616 298.508 677.479 299.633C680.975 301.744 684.68 303.982 688.758 302.727C698.204 299.82 707.651 288.921 704.017 284.561C702.383 282.6 701.337 282.403 700.945 281.788C700.465 281.036 700.964 279.659 702.564 273.661C705.471 262.761 701.111 260.581 697.477 259.854C693.844 259.128 691.664 248.228 693.844 243.141C696.024 238.055 691.664 231.515 688.758 229.335C687.824 228.635 687.715 226.284 687.588 223.537C687.319 217.732 686.969 210.156 678.584 212.622C675.354 213.572 673.559 211.536 671.664 209.387C669.406 206.828 667.007 204.107 661.871 206.082C653.393 209.343 649.598 213.189 644.706 218.146ZM716.37 471.311C722.183 455.325 696.024 396.466 693.844 392.833C682.217 406.785 637.165 401.311 616.819 396.466L615.365 405.913C612.459 424.515 645.158 481.969 661.871 508.371L640.798 539.617L659.691 559.236C663.715 553.54 672.478 541.093 677.961 533.077L692.39 578.129C701.212 580.335 713.127 573.128 718.466 569.899C718.756 569.723 719.027 569.559 719.277 569.41L695.955 506.191C705.833 491.026 714.187 477.315 716.37 471.311Z" fill="
#fe5b39"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M664.181 258.811C668.531 254.624 671.739 246.861 672.046 233.695V226.428C672.046 226.428 667.686 221.342 660.419 221.342C650.904 221.342 648.793 223.823 648.793 223.823C640.726 234.409 636.124 251.017 646.239 259.769L645.159 270.03L644.433 275.843L655.333 287.469L669.139 279.476C668.897 278.628 668.352 277.538 667.776 276.388C667.201 275.237 666.596 274.026 666.232 272.936C665.773 271.558 664.612 263.914 664.181 258.811Z" fill="#F7AF9F"/>
<path d="M661.145 267.847C661.145 267.847 663.567 261.065 664.052 259.854C664.778 266.393 665.505 274.387 667.685 275.84C666.958 278.746 656.785 280.926 657.512 280.2C658.093 279.618 661.145 267.847 661.145 267.847Z" fill="black" fill-opacity="0.08"/>
<path d="M672.046 233.695C671.464 258.692 660.419 264.214 650.973 262.761C634.982 255.451 639.674 235.79 648.793 223.823C648.793 223.823 650.904 221.342 660.419 221.342C667.686 221.342 672.046 226.428 672.046 226.428V233.695Z" fill="white" fill-opacity="0.05"/>
<path d="M761.724 303.408L747.565 325.935C746.956 326.902 747.652 328.161 748.795 328.161H761.27C761.812 328.161 762.308 327.86 762.559 327.38L770.871 311.448L774.18 304.832C774.663 303.865 773.96 302.729 772.88 302.729H762.954C762.455 302.729 761.99 302.985 761.724 303.408Z" fill="#2A2626"/>
<path d="M749.069 327.434L721.456 341.24C720.293 344.728 722.909 354.32 724.362 358.68L757.062 333.974C767.235 326.707 772.321 311.447 770.141 311.447C768.398 311.447 755.366 322.105 749.069 327.434Z" fill="#F7B3A4"/>
<path d="M727.807 345.023L725.189 339.787L748.75 327.57L727.807 345.023Z" fill="white" fill-opacity="0.06"/>
<path d="M645.158 534.531L680.038 482.212L661.871 429.893" stroke="black" stroke-opacity="0.07" stroke-width="1.45331" stroke-linecap="round"/>
<path d="M680.765 482.21L661.872 507.643C653.153 493.691 627.72 449.511 620.453 427.711C620.453 427.711 645.055 426.455 657.512 434.251C675.156 445.294 680.765 482.21 680.765 482.21Z" fill="black" fill-opacity="0.04"/>
<path d="M633.532 399.371C635.276 433.669 655.089 482.936 664.778 503.282L661.871 507.642L657.512 501.829C609.552 417.537 614.155 412.451 616.819 399.371H633.532Z" fill="black" fill-opacity="0.07"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M644.432 272.205L624.086 275.838C624.085 275.839 624.085 275.839 624.084 275.84C615.848 281.17 597.49 303.599 589.933 350.684C596.23 365.944 611.151 399.515 620.452 411.723L634.258 401.55L634.196 401.386L634.985 400.823C671.609 407.217 689.969 398.158 694.571 392.829C692.671 390.296 691.115 381.031 689.976 371.008L690.211 371.029L725.09 361.583C732.357 347.776 728.723 337.603 722.91 336.15L694.571 339.783C691.364 315.198 686.307 294.678 679.342 282.766C675.114 274.853 670.396 270.972 666.723 274.339C656.441 286.905 649.052 277.861 644.662 272.487L644.432 272.205Z" fill="
#002578"/>
<path d="M618.273 400.825C615.948 400.243 598.411 366.672 589.934 349.959C591.096 358.097 609.553 395.738 620.453 411.724L624.813 408.091C623.602 405.911 620.598 401.406 618.273 400.825Z" fill="#070707" fill-opacity="0.06"/>
<path d="M624.086 275.84C615.851 281.169 597.491 303.598 589.934 350.685C596.231 365.945 611.152 399.516 620.453 411.724L634.259 401.551L613.913 347.778L629.899 304.906" stroke="black" stroke-opacity="0.06" stroke-width="1.45331"/>
<path d="M622.633 416.812L621.906 410.272L632.806 402.279L638.619 410.272C638.038 414.342 632.079 421.657 629.173 424.806L622.633 416.812Z" fill="#F7B3A4"/>
<path d="M628.446 413.903L621.906 410.996L622.633 416.809L629.173 424.802L631.353 421.169L628.446 413.903Z" fill="black" fill-opacity="0.06"/>
<path d="M626.992 428.44C630.383 425.049 637.747 416.523 640.072 409.547" stroke="white" stroke-opacity="0.13" stroke-width="0.726653" stroke-linecap="round"/>
<path d="M690.211 371.031C688.516 344.629 688.032 318.712 677.858 294.006" stroke="black" stroke-opacity="0.03" stroke-width="1.45331"/>
<path d="M663.325 554.149L659.691 549.789C659.691 549.789 698.405 504.685 710.557 465.497C714.388 453.144 685.124 397.919 685.124 397.919C691.664 396.465 689 397.192 694.571 393.559C702.322 415.116 717.824 460.265 717.824 468.404C717.824 476.542 681.491 528.958 663.325 554.149Z" fill="white" fill-opacity="0.03"/>
<path d="M672.772 491.659L663.325 437.16L679.312 481.486L672.772 491.659Z" fill="black" fill-opacity="0.04"/>
<path d="M706.198 567.228L690.938 513.456L696.025 506.916L718.551 562.868L706.198 567.228Z" fill="black" fill-opacity="0.06"/>
<path d="M688.032 346.329C686.288 359.699 691.181 382.904 693.845 392.834C683.963 401.554 660.419 402.523 650.246 401.554C650.246 401.554 661.146 395.014 666.232 389.928C671.319 384.841 680.766 378.301 682.945 353.595C684.061 340.948 680.766 307.574 679.312 294.736C682.945 305.636 689.776 332.958 688.032 346.329Z" fill="black" fill-opacity="0.03"/>
<path d="M199 620.768H788.017" stroke="black" stroke-width="3.49047"/>
<path d="M919.783 272.687H825.13H778.095C776.837 272.687 775.676 273.364 775.057 274.46L770.347 282.792C769.109 284.981 766.034 285.183 764.521 283.176L757.663 274.077C757.003 273.202 755.971 272.687 754.875 272.687H729.552C727.624 272.687 726.062 271.124 726.062 269.197V153.045C726.062 151.117 727.624 149.555 729.552 149.555H919.783C921.71 149.555 923.273 151.117 923.273 153.045V269.197C923.273 271.124 921.71 272.687 919.783 272.687Z" fill="#F3F3F3"/>
<rect x="734.787" y="165.262" width="47.1214" height="89.007" fill="white" fill-opacity="0.97"/>
<rect x="741.769" y="236.816" width="33.1595" height="10.4714" rx="1.74524" fill="#1999AB"/>
<rect x="741.769" y="201.912" width="33.1595" height="29.669" fill="#DFF8F9"/>
<rect x="741.769" y="173.988" width="33.1595" height="22.6881" fill="#DFF8F9"/>
<circle cx="758.349" cy="216.746" r="7.85356" fill="#FF9E80"/>
<rect x="787.145" y="165.262" width="106.459" height="43.6309" rx="1.74524" fill="white"/>
<rect x="787.145" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
<rect x="823.794" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
<rect x="860.444" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
</svg> );
}
}
your second way is
you use style inline
<svg style={{width:this.props.width,height:this.props.height}} viewBox="0 0 1155 700" >

You can just change the attribute width of the svg that will doo the trick
So you can do it with css media queries like so :
#media only screen and (max-width: 600px) {
.illustration-comp {width: 150px(for exemple);}
}
Or you can change exactly the size as required by changing the width attribute with react state and props like so :
<svg width={{this.props.width}} viewBox="0 0 1155 700" >
To get more information about media queries see this article css-media-query-breakpoints
.illustration{ width:150px; }
<svg className="illustration-comp" class="illustration" viewBox="0 0 1155 700" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="359.562" y="82" width="254.804" height="537.533" rx="24.4333" fill="#F6F0F9"/>
<rect x="385.74" y="157.045" width="78.5356" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="478.238" y="157.045" width="78.5356" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="385.74" y="301.9" width="214.664" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="401.448" y="326.334" width="48.8666" height="48.8666" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="459.04" y="326.334" width="123.912" height="8.72618" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="460.785" y="342.041" width="80.2809" height="8.72618" rx="2.74211" fill="black" fill-opacity="0.06"/>
<rect x="383.995" y="443.264" width="143.109" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="541.066" y="443.264" width="59.338" height="129.147" rx="12.2167" fill="black" fill-opacity="0.06"/>
<rect x="553.283" y="455.48" width="34.9047" height="34.9047" rx="7.18627" fill="black" fill-opacity="0.06"/>
<rect x="553.283" y="497.365" width="34.9047" height="34.9047" rx="7.18627" fill="black" fill-opacity="0.06"/>
<path d="M385.883 547.76C408.673 560.367 376.388 602.713 357.397 622.31H322.849C298.302 611.097 253.026 586.792 268.3 579.277C287.392 569.882 257.693 559.275 249.207 535.334C240.722 511.393 274.361 512 298.605 512C322.849 512 303.756 480.482 329.213 473.209C354.669 465.936 345.881 494.12 345.881 512C345.881 529.88 357.397 532.001 385.883 547.76Z" fill="#FF9E80"/>
<path d="M321.247 515.288C327.676 526.002 332.101 585.573 340.99 621.131H330.99C332.505 616.283 301.594 600.524 291.593 594.16C281.592 587.796 292.805 576.885 296.745 575.067C300.685 573.249 263.712 556.278 269.47 534.459C273.742 518.272 296.097 553.559 302.2 537.489C306.073 527.291 316.701 507.712 321.247 515.288Z" fill="white" fill-opacity="0.13"/>
<path d="M343.415 621.742C341.552 616.593 339.251 609.58 336.9 601.438M333.717 492.645C326.747 502.645 333.113 507.755 329.174 525.937C324.744 546.379 328.035 567.67 333.717 589.77M333.717 589.77C320.787 572.345 304.321 556.283 277.653 539.919M333.717 589.77C334.765 593.845 335.838 597.757 336.9 601.438M336.9 601.438C344.224 591.033 361.84 568.951 373.72 563.859" stroke="#FBFBFB" stroke-width="1.36342" stroke-linecap="round"/>
<path d="M306.048 533.4C278.768 548.491 317.414 599.18 340.147 622.639H381.502C410.885 609.217 465.082 580.123 446.799 571.127C423.945 559.881 459.495 547.185 469.652 518.527C479.81 489.869 439.543 490.594 410.523 490.594C381.502 490.594 404.356 452.867 373.884 444.161C343.412 435.455 353.932 469.192 353.932 490.594C353.932 511.997 340.147 514.537 306.048 533.4Z" fill="#17A0B3"/>
<path d="M383.42 494.533C375.725 507.359 370.428 578.667 359.787 621.231H371.758C369.944 615.427 406.946 596.563 418.917 588.945C430.888 581.327 399.958 580.189 399.958 570.443C399.958 555.261 452.291 543.6 445.398 517.481C440.285 498.106 413.526 540.345 406.22 521.108C401.584 508.902 388.862 485.464 383.42 494.533Z" fill="white" fill-opacity="0.13"/>
<path d="M356.883 621.955C359.113 615.791 361.867 607.396 364.681 597.65M368.492 467.422C376.835 479.393 369.215 485.509 373.93 507.274C379.232 531.743 375.293 557.23 368.492 583.684M368.492 583.684C383.969 562.825 403.679 543.599 435.602 524.01M368.492 583.684C367.238 588.561 365.953 593.244 364.681 597.65M364.681 597.65C355.915 585.195 334.828 558.762 320.607 552.668" stroke="#FBFBFB" stroke-width="1.63205" stroke-linecap="round"/>
<path d="M714.918 600.656C713.755 598.912 712.738 578.857 712.738 568.684C708.378 570.864 698.931 571.832 693.845 571.59C695.54 580.552 699.949 599.203 701.111 599.203C702.274 599.203 708.62 600.172 714.918 600.656Z" fill="#F7B3A4"/>
<path d="M705.471 599.204L701.838 576.677C699.658 574.74 695.298 572.463 695.298 575.951C695.298 579.439 698.931 592.664 701.111 599.204H705.471Z" fill="black" fill-opacity="0.07"/>
<path d="M700.385 622.458C697.479 615.482 699.174 603.565 700.385 598.479H718.551C718.551 598.479 743.077 615.192 757.791 615.192C762.151 615.192 759.244 622.458 759.244 622.458H700.385Z" fill="#FA5C5C"/>
<path d="M730.425 610.301H737.406M735.661 612.919H745.26M726.935 606.811H732.17" stroke="white" stroke-width="1.74524" stroke-linecap="round"/>
<path d="M632.807 559.239L647.34 537.439L660.419 551.246L643.706 568.686L632.807 559.239Z" fill="#F7B3A4"/>
<path d="M655.333 540.344L635.713 561.417H632.08L649.52 535.258L655.333 540.344Z" fill="black" fill-opacity="0.08"/>
<path d="M620.453 573.768L633.533 557.055L646.613 570.861C646.613 570.861 650.522 581.432 653.879 589.754C657.535 598.817 668.412 607.194 664.779 615.187C663.671 617.624 658.966 618.82 658.966 618.82L620.453 573.768Z" fill="#FA5C5C"/>
<path d="M647.526 579.758L651.889 583.248M646.653 584.121L654.507 589.357M647.526 589.357L656.252 595.465" stroke="white" stroke-width="1.74524" stroke-linecap="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M644.706 218.146C644.147 218.712 643.574 219.293 642.979 219.889C641.83 221.037 640.682 222.015 639.595 222.941C635.18 226.701 631.783 229.596 633.532 239.508C633.255 240.248 632.666 241.082 632 242.024C630.924 243.548 629.647 245.355 629.172 247.501C628.617 250.009 629.381 251.944 630.161 253.919C630.869 255.711 631.591 257.537 631.352 259.854C631.053 262.763 629.197 265.159 627.519 267.326C625.773 269.58 624.219 271.586 624.812 273.661C625.294 275.347 625.137 277.75 624.976 280.211C624.653 285.176 624.314 290.374 629.172 290.374C632.352 290.374 633.027 291.766 633.816 293.392C634.83 295.481 636.031 297.958 642.979 298.367C649.284 298.738 655.401 297.973 660.554 297.328C665.497 296.71 669.555 296.202 672.045 296.914C673.813 297.419 675.616 298.508 677.479 299.633C680.975 301.744 684.68 303.982 688.758 302.727C698.204 299.82 707.651 288.921 704.017 284.561C702.383 282.6 701.337 282.403 700.945 281.788C700.465 281.036 700.964 279.659 702.564 273.661C705.471 262.761 701.111 260.581 697.477 259.854C693.844 259.128 691.664 248.228 693.844 243.141C696.024 238.055 691.664 231.515 688.758 229.335C687.824 228.635 687.715 226.284 687.588 223.537C687.319 217.732 686.969 210.156 678.584 212.622C675.354 213.572 673.559 211.536 671.664 209.387C669.406 206.828 667.007 204.107 661.871 206.082C653.393 209.343 649.598 213.189 644.706 218.146ZM716.37 471.311C722.183 455.325 696.024 396.466 693.844 392.833C682.217 406.785 637.165 401.311 616.819 396.466L615.365 405.913C612.459 424.515 645.158 481.969 661.871 508.371L640.798 539.617L659.691 559.236C663.715 553.54 672.478 541.093 677.961 533.077L692.39 578.129C701.212 580.335 713.127 573.128 718.466 569.899C718.756 569.723 719.027 569.559 719.277 569.41L695.955 506.191C705.833 491.026 714.187 477.315 716.37 471.311Z" fill="
#fe5b39"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M664.181 258.811C668.531 254.624 671.739 246.861 672.046 233.695V226.428C672.046 226.428 667.686 221.342 660.419 221.342C650.904 221.342 648.793 223.823 648.793 223.823C640.726 234.409 636.124 251.017 646.239 259.769L645.159 270.03L644.433 275.843L655.333 287.469L669.139 279.476C668.897 278.628 668.352 277.538 667.776 276.388C667.201 275.237 666.596 274.026 666.232 272.936C665.773 271.558 664.612 263.914 664.181 258.811Z" fill="#F7AF9F"/>
<path d="M661.145 267.847C661.145 267.847 663.567 261.065 664.052 259.854C664.778 266.393 665.505 274.387 667.685 275.84C666.958 278.746 656.785 280.926 657.512 280.2C658.093 279.618 661.145 267.847 661.145 267.847Z" fill="black" fill-opacity="0.08"/>
<path d="M672.046 233.695C671.464 258.692 660.419 264.214 650.973 262.761C634.982 255.451 639.674 235.79 648.793 223.823C648.793 223.823 650.904 221.342 660.419 221.342C667.686 221.342 672.046 226.428 672.046 226.428V233.695Z" fill="white" fill-opacity="0.05"/>
<path d="M761.724 303.408L747.565 325.935C746.956 326.902 747.652 328.161 748.795 328.161H761.27C761.812 328.161 762.308 327.86 762.559 327.38L770.871 311.448L774.18 304.832C774.663 303.865 773.96 302.729 772.88 302.729H762.954C762.455 302.729 761.99 302.985 761.724 303.408Z" fill="#2A2626"/>
<path d="M749.069 327.434L721.456 341.24C720.293 344.728 722.909 354.32 724.362 358.68L757.062 333.974C767.235 326.707 772.321 311.447 770.141 311.447C768.398 311.447 755.366 322.105 749.069 327.434Z" fill="#F7B3A4"/>
<path d="M727.807 345.023L725.189 339.787L748.75 327.57L727.807 345.023Z" fill="white" fill-opacity="0.06"/>
<path d="M645.158 534.531L680.038 482.212L661.871 429.893" stroke="black" stroke-opacity="0.07" stroke-width="1.45331" stroke-linecap="round"/>
<path d="M680.765 482.21L661.872 507.643C653.153 493.691 627.72 449.511 620.453 427.711C620.453 427.711 645.055 426.455 657.512 434.251C675.156 445.294 680.765 482.21 680.765 482.21Z" fill="black" fill-opacity="0.04"/>
<path d="M633.532 399.371C635.276 433.669 655.089 482.936 664.778 503.282L661.871 507.642L657.512 501.829C609.552 417.537 614.155 412.451 616.819 399.371H633.532Z" fill="black" fill-opacity="0.07"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M644.432 272.205L624.086 275.838C624.085 275.839 624.085 275.839 624.084 275.84C615.848 281.17 597.49 303.599 589.933 350.684C596.23 365.944 611.151 399.515 620.452 411.723L634.258 401.55L634.196 401.386L634.985 400.823C671.609 407.217 689.969 398.158 694.571 392.829C692.671 390.296 691.115 381.031 689.976 371.008L690.211 371.029L725.09 361.583C732.357 347.776 728.723 337.603 722.91 336.15L694.571 339.783C691.364 315.198 686.307 294.678 679.342 282.766C675.114 274.853 670.396 270.972 666.723 274.339C656.441 286.905 649.052 277.861 644.662 272.487L644.432 272.205Z" fill="
#002578"/>
<path d="M618.273 400.825C615.948 400.243 598.411 366.672 589.934 349.959C591.096 358.097 609.553 395.738 620.453 411.724L624.813 408.091C623.602 405.911 620.598 401.406 618.273 400.825Z" fill="#070707" fill-opacity="0.06"/>
<path d="M624.086 275.84C615.851 281.169 597.491 303.598 589.934 350.685C596.231 365.945 611.152 399.516 620.453 411.724L634.259 401.551L613.913 347.778L629.899 304.906" stroke="black" stroke-opacity="0.06" stroke-width="1.45331"/>
<path d="M622.633 416.812L621.906 410.272L632.806 402.279L638.619 410.272C638.038 414.342 632.079 421.657 629.173 424.806L622.633 416.812Z" fill="#F7B3A4"/>
<path d="M628.446 413.903L621.906 410.996L622.633 416.809L629.173 424.802L631.353 421.169L628.446 413.903Z" fill="black" fill-opacity="0.06"/>
<path d="M626.992 428.44C630.383 425.049 637.747 416.523 640.072 409.547" stroke="white" stroke-opacity="0.13" stroke-width="0.726653" stroke-linecap="round"/>
<path d="M690.211 371.031C688.516 344.629 688.032 318.712 677.858 294.006" stroke="black" stroke-opacity="0.03" stroke-width="1.45331"/>
<path d="M663.325 554.149L659.691 549.789C659.691 549.789 698.405 504.685 710.557 465.497C714.388 453.144 685.124 397.919 685.124 397.919C691.664 396.465 689 397.192 694.571 393.559C702.322 415.116 717.824 460.265 717.824 468.404C717.824 476.542 681.491 528.958 663.325 554.149Z" fill="white" fill-opacity="0.03"/>
<path d="M672.772 491.659L663.325 437.16L679.312 481.486L672.772 491.659Z" fill="black" fill-opacity="0.04"/>
<path d="M706.198 567.228L690.938 513.456L696.025 506.916L718.551 562.868L706.198 567.228Z" fill="black" fill-opacity="0.06"/>
<path d="M688.032 346.329C686.288 359.699 691.181 382.904 693.845 392.834C683.963 401.554 660.419 402.523 650.246 401.554C650.246 401.554 661.146 395.014 666.232 389.928C671.319 384.841 680.766 378.301 682.945 353.595C684.061 340.948 680.766 307.574 679.312 294.736C682.945 305.636 689.776 332.958 688.032 346.329Z" fill="black" fill-opacity="0.03"/>
<path d="M199 620.768H788.017" stroke="black" stroke-width="3.49047"/>
<path d="M919.783 272.687H825.13H778.095C776.837 272.687 775.676 273.364 775.057 274.46L770.347 282.792C769.109 284.981 766.034 285.183 764.521 283.176L757.663 274.077C757.003 273.202 755.971 272.687 754.875 272.687H729.552C727.624 272.687 726.062 271.124 726.062 269.197V153.045C726.062 151.117 727.624 149.555 729.552 149.555H919.783C921.71 149.555 923.273 151.117 923.273 153.045V269.197C923.273 271.124 921.71 272.687 919.783 272.687Z" fill="#F3F3F3"/>
<rect x="734.787" y="165.262" width="47.1214" height="89.007" fill="white" fill-opacity="0.97"/>
<rect x="741.769" y="236.816" width="33.1595" height="10.4714" rx="1.74524" fill="#1999AB"/>
<rect x="741.769" y="201.912" width="33.1595" height="29.669" fill="#DFF8F9"/>
<rect x="741.769" y="173.988" width="33.1595" height="22.6881" fill="#DFF8F9"/>
<circle cx="758.349" cy="216.746" r="7.85356" fill="#FF9E80"/>
<rect x="787.145" y="165.262" width="106.459" height="43.6309" rx="1.74524" fill="white"/>
<rect x="787.145" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
<rect x="823.794" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
<rect x="860.444" y="212.385" width="33.1595" height="41.8857" rx="1.74524" fill="white"/>
</svg>

SVG polygon fill is hiding my text labels

For some reason when I add a white fill to the polygon, the text elements dont show. I tried using z-index to bring the text labels above but still. The text elements are black. If I set the polygon fills to none, the text labels show.
My fiddle (with original issue):
https://jsfiddle.net/omarel/qznxd4vo/1/
UPDATE: Based on the right answer below, this is the updated working fiddle: https://jsfiddle.net/omarel/qznxd4vo/5/
<style type="text/css">
.st0{fill:red;}
.st3 {fill:#fff;stroke:#58595B;stroke-miterlimit:10;}
.st3:hover {
fill:red;cursor:pointer;
}
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="619px"
height="587px" viewBox="0 0 619 587" style="enable-background:new 0 0 619 587;" xml:space="preserve">
<g id="labels">
<g>
<text transform="matrix(1 0 0 1 459.8574 312.0654)" class="st0">pool</text>
</g>
<g>
<text transform="matrix(1 0 0 1 456.687 178.0654)" class="st0">201</text>
</g>
<g>
<text transform="matrix(1 0 0 1 324.7412 178.0654)" class="st0">202</text>
</g>
<g>
<text transform="matrix(1 0 0 1 241.1572 178.0654)" class="st0">203</text>
</g>
<g>
<text transform="matrix(1 0 0 1 181.8091 178.0654)" class="st0">204</text>
</g>
<g>
<text transform="matrix(1 0 0 1 117.1631 178.0654)" class="st0">205</text>
</g>
<g>
<text transform="matrix(1 0 0 1 459.9531 65.0654)" class="st0 ">206</text>
</g>
<g>
<text transform="matrix(1 0 0 1 343.7593 65.0654)" class="st0">207</text>
</g>
<g>
<text transform="matrix(1 0 0 1 229.0552 65.0654)" class="st0">208</text>
</g>
<g>
<text transform="matrix(1 0 0 1 117.9531 65.0654)" class="st0">209</text>
</g>
<g>
<text transform="matrix(1 0 0 1 31.687 65.0654)" class="st0">210</text>
</g>
<g>
<text transform="matrix(1 0 0 1 69.3291 270.0654)" class="st0">211</text>
</g>
<g>
<text transform="matrix(1 0 0 1 67.8833 345.0654)" class="st0 st1 st2">212</text>
</g>
<g>
<text transform="matrix(1 0 0 1 127.2993 440.5654)" class="st0 st1 st2">213</text>
</g>
<g>
<text transform="matrix(1 0 0 1 198.4512 440.5654)" class="st0 st1 st2">214</text>
</g>
<g>
<text transform="matrix(1 0 0 1 302.3052 440.5654)" class="st0 st1 st2">215</text>
</g>
<g>
<text transform="matrix(1 0 0 1 401.0952 440.5654)" class="st0 st1 st2">216</text>
</g>
<g>
<text transform="matrix(1 0 0 1 522.4014 440.5654)" class="st0 st1 st2">217</text>
</g>
<g>
<text transform="matrix(1 0 0 1 21.6973 444.0654)" class="st0 st1 st2">218</text>
</g>
<g>
<text transform="matrix(1 0 0 1 66.5952 548.5654)" class="st0 st1 st2">219</text>
</g>
<g>
<text transform="matrix(1 0 0 1 204.7412 548.5654)" class="st0 st1 st2">220</text>
</g>
<g>
<text transform="matrix(1 0 0 1 325.3833 548.5654)" class="st0 st1 st2">221</text>
</g>
<g>
<text transform="matrix(1 0 0 1 420.437 548.5654)" class="st0 st1 st2">222</text>
</g>
<g>
<text transform="matrix(1 0 0 1 522.853 548.5654)" class="st0 st1 st2">223</text>
</g>
</g>
<g id="units">
<a href="#" class="link"><polygon class="st3" points="404.75,274 404.75,342 436.75,342 436.75,357 465.75,357 465.75,342.75 564.25,334.75 580.5,281.5
465.5,272.75 465.75,259.25 436.5,259.25 436.75,274 "/></a>
<polygon class="st3" points="593.333,203.333 523,9.333 219.667,20 219.667,31 14.333,31 14.333,201 28.667,201 14.333,399
14.333,578 606.333,578 606.333,399.667 432.667,399.667 432.667,392.5 418.75,388.25 399.75,399.5 313.25,399.5 313.25,392.75
293.5,388.5 288,399.75 131,399.75 131,200.75 289.25,200.75 289.25,213.5 "/>
<polygon class="st3" points="570.747,141.031 512.167,141.031 512.167,139.333 493,139.333 493,120 478.333,120 478.333,122.667
461.667,122.667 461.667,143.5 412.667,143.5 412.667,120 386,120 386,210.32 593.333,203.333 "/>
<polygon class="st3" points="570.747,141.031 512.167,141.031 512.167,139.333 493,139.333 493,104.167 461.667,104.167
461.667,95.5 446.833,95.5 446.833,106.5 415.167,106.5 415.167,13.09 523,9.333 "/>
<path class="st3" d="M415.167,106.5"/>
<polygon class="st3" points="415.167,13.09 415.167,106.5 344.667,106.5 344.667,104.333 331,104.333 331,106.5 310.333,106.5
310.333,95.5 294.333,95.5 294.333,17.375 "/>
<polyline class="st3" points="294.333,17.375 294.333,106.5 233.167,106.5 233.167,104.167 219.667,104.167 219.667,106.5
201.167,106.5 201.167,95.333 184.667,95.333 184.667,31 219.667,31 "/>
<polygon class="st3" points="184.667,95.333 168.083,95.333 168.083,106.5 160.333,106.5 160.333,104.083 146.917,104.083
146.917,106.5 78.75,106.5 78.75,80.083 75.917,80.083 75.917,31 184.667,31 "/>
<polygon class="st3" points="386,135 368.333,135 368.333,120 322,120 322,122.25 308.5,122.25 308.5,120 303.25,120
303.25,130.667 286.417,130.667 286.417,164.5 289.25,164.5 289.25,213.5 386,210.32 "/>
<polygon class="st3" points="286.417,130.667 270.25,130.667 270.25,120 258.75,120 258.75,122.25 245.25,122.25 245.25,120
218.667,120 218.667,200.75 289.25,200.75 289.25,164.5 286.417,164.5 "/>
<polygon class="st3" points="218.667,200.75 154.917,200.75 154.917,171.333 163.583,171.333 163.583,120 181.583,120
181.583,122.333 195,122.333 195,120 202.167,120 202.167,131.333 218.667,131.333 "/>
<polygon class="st3" points="154.917,200.75 154.917,171.333 163.583,171.333 163.583,131 146.667,131 146.667,122.417
131.667,122.417 131.667,146.333 112.5,146.333 112.5,172.833 88.667,172.833 88.667,242.167 131,242.167 131,200.75 "/>
<polygon class="st3" points="75.917,31 14.333,31 14.333,201 71.167,201 71.167,172.667 48.417,172.667 48.417,103.75
71.667,103.75 71.667,106.5 78.75,106.5 78.75,80.083 75.917,80.083 "/>
<polygon class="st3" points="71.167,201 28.667,201 21.513,299.826 59.333,299.826 59.333,297.831 89.917,297.831 89.917,307.914
131,307.914 131,242.167 88.667,242.167 88.667,186.331 71.167,186.331 "/>
<polyline class="st3" points="88.667,172.667 71.167,172.667 71.167,169.915 69.417,169.915 69.417,124.915 71.917,124.915
71.917,119.331 58.25,119.331 58.25,103.75 71.667,103.75 71.667,106.5 146.917,106.5 146.917,104.083 160.333,104.083
160.333,106.5 219.667,106.5 219.667,104.167 233.167,104.167 233.167,106.5 331,106.5 331,104.333 344.667,104.333 344.667,106.5
461.833,106.5 461.833,104.167 478.25,104.167 478.25,122.667 461.667,122.667 461.667,120 322,120 322,122.25 308.5,122.25
308.5,120 258.75,120 258.75,122.25 245.25,122.25 245.25,120 195,120 195,122.333 181.583,122.333 181.583,120 146.75,120
146.75,122.417 131.667,122.417 131.667,119.331 88.667,119.331 88.667,172.667 "/>
<line class="st3" x1="71.917" y1="122.831" x2="88.667" y2="122.831"/>
<line class="st3" x1="112.5" y1="146.333" x2="112.5" y2="119.331"/>
<polygon class="st3" points="131,375.625 86,375.625 86,393.125 89.25,393.125 89.25,409 67.625,409 67.625,375.625
29.375,375.625 29.375,372.875 16.26,372.875 21.513,299.826 59.333,299.826 59.333,297.831 89.917,297.831 89.917,307.914
131,307.914 "/>
<polygon class="st3" points="131,375.625 86,375.625 86,393.125 89.25,393.125 89.25,409 84.5,409 84.5,424.5 108.5,424.5
108.5,465.75 126.75,465.75 126.75,475 133.875,475 133.875,472.125 147,472.125 147,475 162.625,475 162.625,399.75 131,399.75
"/>
<polygon class="st3" points="61,475 45.125,475 45.125,425.312 65.75,425.312 65.75,409 67.625,409 67.625,375.625 29.375,375.625
29.375,372.875 16.26,372.875 14.333,399 14.333,500.75 52.875,500.75 52.875,487.875 61.001,487.875 "/>
<polygon class="st3" points="52.875,500.75 52.875,505.125 87.125,505.125 87.125,515 108.625,515 108.625,487.75 139.875,487.75
139.875,499.5 145.75,499.5 145.75,515 142.875,515 142.875,531.5 149,531.5 149,578 14.333,578 14.333,500.75 "/>
<polygon class="st3" points="139.875,487.75 202.375,487.75 202.375,499.625 219.25,499.625 219.25,490.5 232.5,490.5
232.5,487.75 280,487.75 280,500.75 282.875,500.75 282.875,578 149,578 149,531.5 142.875,531.5 142.875,515 145.75,515
145.75,499.5 139.875,499.5 "/>
<polygon class="st3" points="162.625,475 219.5,475 219.5,472 232.25,472 232.25,475 242,475 242,464.125 257.375,464.125
257.375,399.75 162.625,399.75 "/>
<polygon class="st3" points="257.375,464.125 274.875,464.125 274.875,475 285,475 285,472.5 298.125,472.5 298.125,475
366.625,475 366.625,399.5 313.25,399.5 313.25,392.75 293.5,388.5 288,399.75 257.375,399.75 "/>
<polygon class="st3" points="282.875,500.75 301.875,500.75 301.875,487.75 310.333,487.75 310.333,490.875 323.5,490.875
323.5,487.75 366.625,487.75 366.625,527.75 392.25,527.75 392.25,578 282.875,578 "/>
<polygon class="st3" points="392.25,527.75 392.25,578 465.5,578 465.5,557 468.375,557 468.375,500.75 451.875,500.75
451.875,487.75 439.25,487.75 439.25,490.75 426.125,490.75 426.125,487.75 415,487.75 415,527.75 "/>
<path class="st3" d="M392.25,578"/>
<polygon class="st3" points="465.5,578 465.5,557 468.375,557 468.375,487.75 505.875,487.75 505.875,490.75 528.25,490.75
528.25,475 606.333,475 606.333,578 "/>
<polygon class="st3" points="366.625,475 418.375,475 418.375,472.625 431.875,472.625 431.875,475 441.75,475 441.75,464.25
458.75,464.25 458.75,399.667 432.667,399.667 432.667,392.5 418.75,388.25 399.75,399.5 366.625,399.5 "/>
<polygon class="st3" points="458.75,399.667 606.333,399.667 606.333,475 519.125,475 519.125,472.375 505.75,472.375 505.75,464
490.5,464 490.5,475 458.75,475 "/>
<polygon class="st3" points="519.125,472.375 519.125,490.75 505.875,490.75 505.875,487.75 439.25,487.75 439.25,490.75
426.125,490.75 426.125,487.75 323.5,487.75 323.5,490.875 310.333,490.875 310.333,487.75 232.5,487.75 232.5,490.5 219.25,490.5
219.25,487.75 78.375,487.75 78.375,505.125 62.875,505.125 62.875,487.75 61.001,487.75 61.001,475 133.875,475 133.875,472.125
147,472.125 147,475 219.5,475 219.5,472 232.25,472 232.25,475 285,475 285,472.5 298.125,472.5 298.125,475 418.375,475
418.375,472.625 431.875,472.625 431.875,475 505.875,475 505.875,472.375 "/>
<line class="st3" x1="384.339" y1="487.75" x2="384.339" y2="500.625"/>
<polyline class="st3" points="366.625,500.625 401.625,500.625 401.625,504 415,504 "/>
<line class="st3" x1="401.625" y1="500.625" x2="401.625" y2="487.75"/>
<polyline class="st3" points="67.625,475 67.625,472.75 66,472.75 66,425.312 84.5,425.312 84.5,475 "/>
<line class="st3" x1="111.875" y1="465.75" x2="111.875" y2="475"/>
</g>
</svg>

Simply move your text elements above the polygons by reversing the order of the "units" and "labels" groups:
https://jsfiddle.net/mh946reL/
You may want to change the color of your texts so that they don't disappear in the background when a room is highlighted.

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

Marker with custom image and text (HERE Maps) - here-api

This logic can also be implemented with bubble info, however if the location needs to be modified then path value needs to be modified. please refer : developer.here.com/api-explorer/maps-js/infobubbles/open-infobubble

Related

Why doesn't the group animation work for me?

restart svg animation on hover (mouseover) svg or css solutions only

How do I control animation-play-start on nested animate element?

How to change react-lottie and SVG sizes using CSS media queries

SVG polygon fill is hiding my text labels

Categories

Resources