Related
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>
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>
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
I'm using some SVG icons from Entypo as <img> elements in my HTML.
<img src="svg/Entypo+ Social Extension/twitter-with-circle.svg"></img>
Is it possible to change colors of this icon using CSS? Or do I need to edit the SVG itself?
You will need to inline using the <svg> element, and then change the color of the particular path with:
svg path.myPath {
fill: red !important;
}
Here is an example:
svg path {
fill: red !important;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg role="img" aria-label="Code The Web logo" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg2" viewBox="0 0 622.72601 266.69141" height="266.69141" width="622.72601" inkscape:version="0.91 r13725"
sodipodi:docname="codetheweb-transparent-clipped.svg">
<title>Code The Web logo</title>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1366"
inkscape:window-height="672"
id="namedview17"
showgrid="false"
inkscape:zoom="0.44000089"
inkscape:cx="311.36301"
inkscape:cy="133.3457"
inkscape:window-x="0"
inkscape:window-y="1"
inkscape:window-maximized="1"
inkscape:current-layer="svg2" />
<defs>
<linearGradient xmlns="http://www.w3.org/2000/svg" x1="100%" y1="100%" x2="38.1041974%" y2="38.1041974%" id="pink-theme">
<stop stop-color="#FFC83E" offset="0%"/>
<stop stop-color="#FA709A" offset="100%"/>
</linearGradient>
</defs>
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(-188.63727,-419.01646)"
id="layer1">
<g
transform="matrix(0.48045801,0,0,0.48045801,191.67458,286.97533)"
id="g4184">
<g
style="font-style:normal;font-weight:normal;font-size:184.62117004px;line-height:100%;font-family:sans-serif;text-align:start;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="text4138">
<path
d="m 392.37834,367.00251 q 0,-12.00037 4.43091,-23.63151 4.61552,-11.63113 13.29272,-20.86219 8.67719,-9.23106 21.04681,-14.95431 12.36962,-5.72326 28.24704,-5.72326 19.01598,0 32.86257,7.93871 14.03121,7.75409 20.86219,20.67757 l -27.50855,19.56985 q -1.84621,-4.80015 -4.98477,-7.93871 -2.95394,-3.13856 -6.64637,-4.98478 -3.69242,-1.84621 -7.75408,-2.58469 -3.87705,-0.73849 -7.56947,-0.73849 -7.75409,0 -13.47735,3.13856 -5.53863,2.95394 -9.23106,7.93871 -3.5078,4.80015 -5.35401,11.07727 -1.66159,6.0925 -1.66159,12.185 0,6.83098 2.03083,13.1081 2.03083,6.27712 5.90788,11.07727 3.87704,4.80016 9.41568,7.75409 5.72325,2.76932 12.73886,2.76932 3.69242,0 7.56947,-0.73848 3.87704,-0.92311 7.38484,-2.76932 3.69243,-2.03083 6.46175,-4.98477 2.95393,-3.13856 4.61552,-7.56947 l 29.35477,17.53901 q -2.95394,7.20023 -9.04644,12.92348 -5.90787,5.72326 -13.66196,9.6003 -7.56947,3.87705 -16.43129,5.90788 -8.67719,2.03083 -16.98515,2.03083 -14.58507,0 -26.77006,-5.72325 -12.00038,-5.90788 -20.8622,-15.50818 -8.67719,-9.6003 -13.47734,-21.7853 -4.80015,-12.185 -4.80015,-24.73924 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4146" />
<path
d="m 583.78145,434.75848 q -14.95431,0 -27.13931,-5.72325 -12.185,-5.72326 -20.86219,-14.95432 -8.6772,-9.41568 -13.47735,-21.41605 -4.80015,-12.00038 -4.80015,-24.73924 0,-12.92348 4.98477,-24.92386 4.98478,-12.00037 13.84659,-21.04681 9.04644,-9.23106 21.23144,-14.58507 12.36961,-5.53864 26.95469,-5.53864 14.95431,0 27.13931,5.72326 12.185,5.72325 20.86219,15.13893 8.6772,9.41568 13.29273,21.41606 4.80015,12.00038 4.80015,24.55461 0,12.92349 -4.98478,24.92386 -4.98477,11.81576 -13.84658,21.04682 -8.86182,9.04643 -21.23144,14.58507 -12.185,5.53863 -26.77007,5.53863 z m -29.72401,-66.46362 q 0,6.64636 1.84622,12.92348 1.84621,6.0925 5.53863,10.89265 3.69242,4.80015 9.23106,7.75409 5.72326,2.95394 13.47734,2.95394 7.75409,0 13.47735,-2.95394 5.72326,-3.13856 9.23106,-7.93871 3.69242,-4.98477 5.35401,-11.26189 1.84621,-6.27712 1.84621,-12.73886 0,-6.64636 -1.84621,-12.73886 -1.84621,-6.27712 -5.72325,-10.89265 -3.69243,-4.80015 -9.41568,-7.56947 -5.53864,-2.95394 -13.10811,-2.95394 -7.75409,0 -13.47734,2.95394 -5.53864,2.95394 -9.23106,7.93871 -3.69242,4.80015 -5.53864,11.07727 -1.66159,6.0925 -1.66159,12.55424 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4148" />
<path
d="m 665.69267,433.65076 0,-131.08103 50.40158,0 q 16.24666,0 28.61628,5.16939 12.36962,5.16939 20.67757,14.03121 8.30795,8.86181 12.55424,20.86219 4.24629,11.81575 4.24629,25.2931 0,14.95432 -4.80015,27.13931 -4.61553,12.00038 -13.29273,20.67757 -8.67719,8.49258 -20.86219,13.29273 -12.185,4.61553 -27.13931,4.61553 l -50.40158,0 z m 79.94096,-65.72514 q 0,-7.56947 -2.03083,-13.84659 -2.03083,-6.27712 -5.90788,-10.70803 -3.69242,-4.4309 -9.23105,-6.83098 -5.53864,-2.58469 -12.36962,-2.58469 l -14.40045,0 0,68.30983 14.40045,0 q 7.0156,0 12.55424,-2.5847 5.53863,-2.58469 9.23106,-7.20022 3.87704,-4.61553 5.72325,-10.89265 2.03083,-6.27712 2.03083,-13.66197 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4150" />
<path
d="m 891.08629,402.26516 0,31.3856 -93.41831,0 0,-131.08103 91.75672,0 0,31.3856 -55.75559,0 0,18.46211 47.63226,0 0,29.17015 -47.63226,0 0,20.67757 57.41718,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4152" />
<path
d="m 573.97201,518.57648 -37.66272,0 0,99.69543 -36.00113,0 0,-99.69543 -37.84734,0 0,-31.3856 111.51119,0 0,31.3856 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4154" />
<path
d="m 702.84624,487.19088 0,131.08103 -36.00113,0 0,-51.32468 -43.93984,0 0,51.32468 -36.00113,0 0,-131.08103 36.00113,0 0,48.37075 43.93984,0 0,-48.37075 36.00113,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4157" />
<path
d="m 818.78834,586.88631 0,31.3856 -93.41831,0 0,-131.08103 91.75672,0 0,31.3856 -55.75559,0 0,18.46212 47.63226,0 0,29.17014 -47.63226,0 0,20.67757 57.41718,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4160" />
<path
d="m 479.16471,671.81204 33.04719,0 11.44651,40.43203 11.63114,-40.43203 33.04719,0 -21.60068,62.58657 9.41568,27.32394 28.24704,-89.91051 39.13969,0 -51.32469,131.08103 -29.90863,0 -18.64674,-46.89378 -18.46211,46.89378 -29.90863,0 -51.32469,-131.08103 38.95507,0 28.43166,89.91051 9.04644,-27.32394 -21.23144,-62.58657 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4162" />
<path
d="m 725.93687,771.50747 0,31.3856 -93.41831,0 0,-131.08103 91.75672,0 0,31.38559 -55.75559,0 0,18.46212 47.63226,0 0,29.17015 -47.63226,0 0,20.67757 57.41718,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4164" />
<path
d="m 854.00916,769.29201 q 0,8.86182 -3.69242,15.32356 -3.69243,6.27712 -10.15417,10.33879 -6.46174,4.06166 -15.13893,6.09249 -8.49258,1.84622 -18.09288,1.84622 l -64.43279,0 0,-131.08103 76.06393,0 q 6.83098,0 12.36961,2.95393 5.53864,2.95394 9.41568,7.75409 3.87705,4.61553 5.90788,10.70803 2.21546,5.90788 2.21546,12.185 0,9.23106 -4.80016,17.72363 -4.61552,8.30795 -14.0312,12.55424 11.26189,3.32318 17.72363,11.63113 6.64636,8.12334 6.64636,21.96992 z m -36.55499,-7.38484 q 0,-4.80015 -2.5847,-7.93871 -2.58469,-3.32318 -6.64636,-3.32318 l -29.72401,0 0,21.96991 28.43166,0 q 4.43091,0 7.38485,-2.76931 3.13856,-2.76932 3.13856,-7.93871 z m -38.95507,-59.44802 0,20.12371 24.55462,0 q 3.69242,0 6.64636,-2.03084 3.13856,-2.03083 3.13856,-8.12333 0,-5.35401 -2.5847,-7.56946 -2.58469,-2.40008 -6.0925,-2.40008 l -25.66234,0 z"
style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;line-height:100%;font-family:Raleway;-inkscape-font-specification:'Raleway Heavy';text-align:center;text-anchor:middle;fill:#41b3d3;fill-opacity:1"
id="path4166" />
</g>
<g
id="text4174"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:746.07092285px;line-height:125%;font-family:Raleway;-inkscape-font-specification:'Raleway Medium';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#444444;fill-opacity:1;stroke:#444444;stroke-width:12.68645859;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
<path
id="path4159"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Blackout;-inkscape-font-specification:Blackout;text-align:end;text-anchor:end;fill:#444444;fill-opacity:1;stroke:none;stroke-width:20.81347275;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 365.22161,274.82381 -223.82127,270.07767 223.82127,284.99909 -147.72204,0 L -6.321707,546.39362 217.49957,274.82381 l 147.72204,0 0,0 z" />
</g>
<g
id="text4194"
style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:746.07092285px;line-height:125%;font-family:Raleway;-inkscape-font-specification:'Raleway Medium';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#444444;fill-opacity:1;stroke:#444444;stroke-width:12.68645859;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
<path
id="path4156"
transform="matrix(2.0813473,0,0,2.0813473,-398.94138,-488.31149)"
d="m 632.85156,366.6543 107.53711,136.92968 -107.53711,129.76172 70.97461,0 107.53711,-130.47851 -107.53711,-136.21289 -70.97461,0 z M 747,519.79297 c 0.80996,-0.0316 1.61242,0.039 2.4082,0.21094 l -0.32812,7.29687 c -1.21787,-0.29127 -2.44312,-0.2221 -3.67383,0.20703 -1.25114,0.41197 -2.28005,1.09675 -3.08594,2.05664 -0.60012,0.71482 -1.00546,1.48995 -1.21679,2.32227 -0.21131,0.83233 -0.24033,1.67566 -0.0898,2.5332 0.15055,0.85756 0.47925,1.7095 0.98828,2.55469 0.48866,0.82807 1.15094,1.59387 1.98828,2.29687 0.85778,0.72014 1.73852,1.24999 2.63868,1.5879 0.90015,0.33788 1.78559,0.50607 2.65625,0.50585 0.86738,-0.0378 1.69968,-0.24257 2.5,-0.61523 0.77988,-0.3898 1.48861,-0.96309 2.12304,-1.71875 1.45746,-1.73598 2.02804,-3.86871 1.71289,-6.39648 l -3.16406,3.76953 -4.28906,-3.60157 7.50976,-8.94531 11.58008,9.72266 -4.14062,4.93164 -1.80664,-1.51758 c 0.004,2.64953 -0.84366,4.9859 -2.54102,7.00781 -1.18311,1.40921 -2.56047,2.55063 -4.13086,3.42578 -1.59079,0.85802 -3.26742,1.36356 -5.0332,1.51758 -1.76578,0.15401 -3.58424,-0.0661 -5.45313,-0.66015 -1.86888,-0.59412 -3.69192,-1.63717 -5.46875,-3.12891 -1.53173,-1.28597 -2.71011,-2.76241 -3.53711,-4.43164 -0.84743,-1.68637 -1.33147,-3.43363 -1.45117,-5.24023 -0.14016,-1.82378 0.0799,-3.64028 0.66016,-5.45118 0.57696,-1.84846 1.52544,-3.56021 2.8457,-5.13281 0.82303,-0.98032 1.72402,-1.82514 2.70313,-2.53516 0.95867,-0.72715 1.96988,-1.288 3.0332,-1.68359 1.06002,-0.43315 2.14335,-0.70681 3.25,-0.82226 0.27156,-0.0332 0.54251,-0.0559 0.8125,-0.0664 z m -19.3125,23.53125 c 1.84746,-0.0854 3.65008,0.17341 5.40625,0.77734 1.77331,0.58351 3.35338,1.45904 4.74219,2.625 1.42962,1.20026 2.57684,2.63288 3.4414,4.29883 0.84414,1.64879 1.36632,3.39283 1.56446,5.23047 0.17773,1.82051 -9.9e-4,3.67194 -0.53711,5.55469 -0.51896,1.86232 -1.45598,3.59945 -2.81055,5.21289 -1.38888,1.65428 -2.96568,2.89063 -4.73047,3.70703 -1.76478,0.81639 -3.56162,1.27438 -5.38867,1.37695 -1.84746,0.0854 -3.65833,-0.16258 -5.43164,-0.74609 -1.77334,-0.58351 -3.36425,-1.46729 -4.77344,-2.65039 -1.42965,-1.20026 -2.57684,-2.63288 -3.4414,-4.29883 -0.86457,-1.66594 -1.3848,-3.40999 -1.5625,-5.23047 -0.18098,-1.85807 -0.002,-3.70949 0.5371,-5.55469 0.53613,-1.88275 1.48137,-3.6307 2.83594,-5.24414 1.38885,-1.65428 2.96568,-2.88868 4.73047,-3.70508 1.76479,-0.81641 3.57048,-1.26809 5.41797,-1.35351 z m -0.041,7.32812 c -0.87395,-0.0373 -1.73047,0.13189 -2.56836,0.50782 -0.84114,0.33834 -1.6134,0.92631 -2.3164,1.76367 -0.72014,0.85778 -1.18195,1.74097 -1.38672,2.64844 -0.18763,0.88703 -0.1772,1.76724 0.0312,2.63867 0.18808,0.85427 0.54351,1.67373 1.06641,2.46094 0.51966,0.74963 1.13673,1.42526 1.85156,2.02539 0.73523,0.61726 1.53646,1.11538 2.40234,1.49414 0.84542,0.36158 1.70421,0.56031 2.57813,0.59765 0.87395,0.0373 1.73111,-0.11282 2.57226,-0.45117 0.85833,-0.35877 1.64705,-0.96644 2.36719,-1.82422 0.72018,-0.85778 1.18393,-1.74096 1.38867,-2.64844 0.18434,-0.9246 0.17391,-1.80482 -0.0312,-2.63867 -0.20848,-0.87143 -0.58298,-1.69025 -1.12304,-2.45703 -0.52293,-0.7872 -1.1426,-1.47995 -1.85743,-2.08008 -0.73526,-0.61728 -1.52568,-1.10716 -2.37109,-1.46875 -0.86585,-0.37875 -1.73286,-0.5686 -2.60352,-0.56836 z m -28.07031,19.37696 16.54102,13.88867 8.2832,-9.86524 5.20703,4.37305 -13.29687,15.83789 -21.75,-18.25976 5.01562,-5.97461 z m -7.33984,12.34961 c 0.87065,-2.2e-4 1.73706,0.17057 2.59961,0.51171 0.85934,0.30363 1.63572,0.74711 2.33008,1.33008 1.02119,0.85733 1.77783,1.94588 2.27148,3.26563 0.49039,1.28216 0.53364,2.64218 0.12891,4.07812 1.41354,-0.93718 2.88121,-1.37903 4.40039,-1.32226 1.51591,0.0192 3.03855,0.673 4.57031,1.95898 0.98029,0.82301 1.65742,1.7375 2.0293,2.7461 0.3515,0.99145 0.45161,2.03493 0.30078,3.12695 -0.1508,1.09204 -0.51643,2.21087 -1.09766,3.35937 -0.58449,1.11095 -1.32321,2.19776 -2.21484,3.25977 l -8.97657,10.69141 -21.75,-18.25977 10.59571,-12.62305 c 0.63439,-0.75566 1.3717,-1.30227 2.21289,-1.64062 0.84115,-0.33837 1.70852,-0.49934 2.59961,-0.48242 z m -0.11133,8.09961 c -0.12798,-0.016 -0.25372,-0.0142 -0.375,0.006 -0.50554,0.063 -0.92031,0.28969 -1.24609,0.67773 l -3.57618,4.25781 3.33985,2.80274 3.41992,-4.07422 c 0.34292,-0.40847 0.54016,-0.86938 0.58984,-1.38477 0.0669,-0.53581 -0.2362,-1.08653 -0.91015,-1.65234 -0.44423,-0.37294 -0.85824,-0.58467 -1.24219,-0.63281 z m 8.41797,6.08203 c -0.60765,-0.0227 -1.10129,0.19131 -1.47852,0.64062 l -4.14062,4.93164 3.64648,3.06055 3.95899,-4.7168 c 0.41153,-0.49016 0.60231,-1.02736 0.57031,-1.61133 -0.0147,-0.60439 -0.30886,-1.14685 -0.88086,-1.62695 -0.531,-0.44581 -1.08853,-0.67218 -1.67578,-0.67773 z"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Blackout;-inkscape-font-specification:Blackout;text-align:start;text-anchor:start;fill:#444444;fill-opacity:1;stroke:none;stroke-width:20.81347275;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
</g>
<text
id="text4216"
y="936.22046"
x="133.85828"
style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;text-align:start;letter-spacing:0px;word-spacing:0px;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
xml:space="preserve"><tspan
y="936.22046"
x="133.85828"
id="tspan4218" /></text>
</g>
</svg>
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.