SVG use in React Native project - svg
I want to use SVG icons in my React Native project. I'm requiring it like:
var svg = require('../images/Upvote.svg');
But i'm getting this error:
Unable to resolve module ../images/Upvote.svg from
/path/to/my/project/js/Component.js: Invalid directory
/path/to/my/project/images/Upvote.svg
Am i suppose to add/change something in Xcode project settings?
BTW, everything is fine if i'm using PNG image, no errors..
SVGs are not supported in React Native at this point. There are a few libraries out there they played with the idea but I don't know that any of them are "production ready"
https://github.com/brentvatne/react-native-svg
https://github.com/aksonov/react-native-svg-elements
I use react native SVG and a small my own component for showing SVG.
If the files SVG are too much I think solution with icoMoon is more complex but better.
Solution here:
Which is the best approach to insert an vector (svg) graph into a react native application
This is my own component that usually use when I use few SVG files in my app.
import React from 'react';
import Svg,{
Circle,
Ellipse,
G,
LinearGradient,
RadialGradient,
Line,
Path,
Polygon,
Polyline,
Rect,
Symbol,
Text,
Use,
Defs,
Stop
} from 'react-native-svg';
const CarParkSensor = (width, height) => <Svg height={height} width={width} fill="none" viewBox="0 0 193 163">
<Rect height="163" width="193" fill="black" fillOpacity="0"/>
<Rect height="34.2896" width="22.357" fill="black" fillOpacity="0" transform="translate(149.607 15.691)"/>
<Rect height="34.2896" width="22.357" fill="black" fillOpacity="0" transform="translate(149.607 15.691)"/>
<Path d="M161.324 15.691H151.904C150.498 15.691 149.607 16.5825 149.607 17.5675H149.607V48.0573C149.607 49.3238 151.107 49.9806 152.653 49.9806C154.153 49.9806 155.7 49.3242 155.7 48.0573V37.1749H160.95C167.136 37.1749 171.964 34.2194 171.964 26.5267V26.2456C171.964 18.5525 167.277 15.691 161.324 15.691ZM165.87 26.996C165.87 30.6547 163.996 32.3905 160.949 32.3905H155.7V21.0387H160.949C163.996 21.0387 165.87 22.7745 165.87 26.4331V26.996Z" fill="black"/>
<Rect height="18.5061" width="68.2308" fill="black" fillOpacity="0" transform="translate(43.0472 13.8017)"/>
<Rect height="18.5061" width="68.2308" fill="black" fillOpacity="0" transform="translate(43.0472 13.8017)"/>
<Path d="M110.473 27.6106C101.575 18.7057 89.7458 13.8017 77.1628 13.8017C64.5798 13.8017 52.7503 18.7057 43.8527 27.6106C42.7788 28.685 42.7788 30.4272 43.8527 31.502C44.9263 32.5765 46.667 32.5765 47.7406 31.502C55.5996 23.6369 66.0484 19.3052 77.1624 19.3052C88.2764 19.3052 98.7255 23.6369 106.584 31.502C107.121 32.0392 107.825 32.3078 108.529 32.3078C109.232 32.3078 109.936 32.0392 110.473 31.502C111.546 30.4276 111.546 28.685 110.473 27.6106Z" fill="black"/>
<Rect height="13.7894" width="45.5451" fill="black" fillOpacity="0" transform="translate(54.3901 29.8706)"/>
<Rect height="13.7894" width="45.5451" fill="black" fillOpacity="0" transform="translate(54.3901 29.8706)"/>
<Path d="M99.1301 38.9627C87.0171 26.8398 67.3082 26.8398 55.1956 38.9627C54.1217 40.0372 54.1217 41.7797 55.1956 42.8542C56.2691 43.9286 58.0103 43.9286 59.0838 42.8542C69.0527 32.8775 85.2729 32.8775 95.2418 42.8542C95.7786 43.3914 96.482 43.66 97.1857 43.66C97.8891 43.66 98.5929 43.3914 99.1301 42.8542C100.204 41.7797 100.204 40.0372 99.1301 38.9627Z" fill="black"/>
<Rect height="9.16908" width="23.2189" fill="black" fillOpacity="0" transform="translate(65.5531 45.6633)"/>
<Rect height="9.16908" width="23.2189" fill="black" fillOpacity="0" transform="translate(65.5531 45.6633)"/>
<Path d="M87.9666 50.1349C82.0092 44.1727 72.3159 44.1727 66.3586 50.1349C65.2846 51.2094 65.2846 52.9516 66.3586 54.0264C67.4321 55.1012 69.1733 55.1008 70.2468 54.0264C74.0604 50.21 80.2651 50.21 84.0787 54.0264C84.6154 54.564 85.3192 54.8322 86.0226 54.8322C86.726 54.8322 87.4298 54.5636 87.9666 54.0264C89.0405 52.9516 89.0405 51.2097 87.9666 50.1349Z" fill="black"/>
<Rect height="31.2176" width="116.085" fill="black" fillOpacity="0" transform="translate(23.3662 83.5942)"/>
<Rect height="31.2176" width="116.085" fill="black" fillOpacity="0" transform="translate(23.3662 83.5942)"/>
<Path d="M135.296 103.727C134.107 103.072 132.933 102.355 131.808 101.594L113.622 89.2984C108.103 85.5665 101.664 83.5942 95.0036 83.5942H61.6242C52.7639 83.5942 44.4273 87.0412 38.1495 93.3C34.9228 96.5176 31.2468 99.209 27.2236 101.3C24.8442 102.536 23.3662 104.97 23.3662 107.651C23.3662 111.6 26.5756 114.812 30.5208 114.812H41.9009C43.4193 114.812 44.6504 113.58 44.6504 112.06C44.6504 110.54 43.4193 109.308 41.9009 109.308H30.5208C29.6078 109.308 28.8648 108.565 28.8648 107.651C28.8648 107.032 29.2067 106.47 29.7574 106.184C34.2775 103.835 38.407 100.812 42.0302 97.1986C47.2698 91.9743 54.2284 89.0973 61.6238 89.0973H69.0969V109.308H59.9626C58.4442 109.308 57.2131 110.54 57.2131 112.06C57.2131 113.58 58.4442 114.812 59.9626 114.812H135.352C137.612 114.812 139.451 112.971 139.451 110.709C139.451 107.813 137.859 105.137 135.296 103.727ZM74.5966 109.309V89.0977H95.004C100.564 89.0977 105.937 90.744 110.544 93.8587L128.73 106.154C129.993 107.008 131.31 107.814 132.647 108.55C132.993 108.74 133.283 109.002 133.501 109.309H74.5966Z" fill="black"/>
<Rect height="5.50348" width="13.9917" fill="black" fillOpacity="0" transform="translate(70.1666 118.995)"/>
<Rect height="5.50348" width="13.9917" fill="black" fillOpacity="0" transform="translate(70.1666 118.995)"/>
<Path d="M81.4088 118.995H72.9161C71.3978 118.995 70.1666 120.227 70.1666 121.747C70.1666 123.266 71.3978 124.498 72.9161 124.498H81.4088C82.9272 124.498 84.1583 123.266 84.1583 121.747C84.1583 120.227 82.9272 118.995 81.4088 118.995Z" fill="black"/>
<Rect height="163" width="193" fill="black" fillOpacity="0"/>
<Rect height="163" width="193" fill="black" fillOpacity="0"/>
<Path d="M190.628 116.685L189.759 115.243C186.486 109.807 181.042 105.979 174.823 104.741L167.724 103.328V67.3195H186.094C189.876 67.3195 192.953 64.2399 192.953 60.4549V6.86463C192.953 3.0792 189.876 0 186.094 0H132.548C128.765 0 125.688 3.07958 125.688 6.86463V27.1933C125.688 28.7129 126.919 29.9451 128.438 29.9451C129.957 29.9451 131.187 28.7129 131.187 27.1933V6.86463C131.187 6.11389 131.798 5.5031 132.548 5.5031H186.095C186.845 5.5031 187.455 6.11389 187.455 6.86463V60.4553C187.455 61.206 186.845 61.8168 186.095 61.8168H132.548C131.797 61.8168 131.187 61.206 131.187 60.4553V45.0823C131.187 43.5627 129.956 42.3305 128.438 42.3305C126.919 42.3305 125.688 43.5627 125.688 45.0823V60.4553C125.688 64.2407 128.765 67.3199 132.547 67.3199H153.378V100.473L149.729 99.747C144.693 98.7446 139.783 95.7027 136.528 93.5014L118.342 81.2061C111.423 76.5285 103.353 74.0559 95.0035 74.0559H61.6244C50.5176 74.0559 40.0673 78.3767 32.1992 86.2218C27.2204 91.1862 20.9532 94.5721 14.075 96.014L10.1276 96.8413C4.25918 98.0712 0 103.32 0 109.32V135.97C0 139.149 1.87533 142.038 4.77824 143.328L15.7294 148.2C16.3917 151.666 18.0601 154.975 20.7357 157.653C24.2915 161.212 28.9623 162.991 33.6335 162.991C38.3047 162.991 42.9751 161.212 46.5313 157.653C48.8183 155.364 50.3653 152.613 51.1814 149.698H142.493C143.309 152.613 144.856 155.364 147.143 157.653C150.588 161.101 155.168 163 160.041 163C164.913 163 169.494 161.101 172.939 157.653C175.226 155.364 176.773 152.613 177.589 149.698H182.805C188.426 149.698 193 145.12 193 139.494V125.222C192.999 122.214 192.179 119.262 190.628 116.685ZM158.877 67.3195H162.226V102.233L158.877 101.567V67.3195ZM42.6427 153.762C40.2362 156.17 37.0366 157.497 33.6331 157.497C30.2296 157.497 27.0301 156.17 24.6236 153.762C20.7632 149.898 19.9046 144.153 22.0434 139.45C22.0607 139.413 22.0773 139.374 22.0946 139.337C22.1599 139.197 22.2288 139.059 22.2993 138.922C22.3325 138.857 22.3657 138.792 22.4004 138.728C22.4641 138.609 22.5304 138.49 22.5983 138.373C22.645 138.292 22.6929 138.211 22.7415 138.131C22.8044 138.028 22.8681 137.924 22.9345 137.822C22.9944 137.73 23.0562 137.638 23.1188 137.547C23.1806 137.457 23.2421 137.367 23.3062 137.278C23.3797 137.176 23.4562 137.077 23.5331 136.977C23.593 136.9 23.6515 136.821 23.7133 136.745C23.8037 136.632 23.8984 136.523 23.9926 136.414C24.0465 136.351 24.0981 136.288 24.1532 136.226C24.2934 136.07 24.4378 135.918 24.5863 135.768C24.5991 135.755 24.6108 135.741 24.6236 135.729C24.6519 135.7 24.6817 135.674 24.7103 135.646C24.8362 135.522 24.9629 135.4 25.0922 135.283C25.1257 135.252 25.1611 135.224 25.1951 135.194C25.324 135.079 25.4537 134.966 25.5863 134.857C25.5988 134.847 25.612 134.838 25.6244 134.828C30.2847 131.053 37.0061 131.058 41.6607 134.843C41.666 134.847 41.6716 134.851 41.6773 134.856C41.8194 134.971 41.9585 135.093 42.0968 135.216C42.1217 135.238 42.1473 135.259 42.1718 135.281C42.3317 135.425 42.4885 135.574 42.6423 135.728C42.8081 135.894 42.968 136.065 43.1233 136.238C43.1915 136.314 43.256 136.393 43.3219 136.47C43.4026 136.564 43.4836 136.659 43.5613 136.755C43.6484 136.863 43.7324 136.974 43.8153 137.084C43.8621 137.145 43.9085 137.207 43.9537 137.269C44.0543 137.408 44.1523 137.548 44.247 137.691C44.2632 137.715 44.279 137.739 44.2948 137.764C47.5291 142.708 46.9787 149.422 42.6427 153.762ZM169.05 153.762C166.643 156.17 163.444 157.497 160.04 157.497C156.637 157.497 153.437 156.17 151.031 153.762C146.694 149.422 146.144 142.706 149.378 137.763C149.394 137.739 149.409 137.715 149.425 137.692C149.52 137.549 149.618 137.409 149.719 137.269C149.764 137.207 149.81 137.146 149.856 137.085C149.94 136.974 150.024 136.864 150.112 136.755C150.189 136.659 150.269 136.566 150.349 136.472C150.416 136.394 150.481 136.315 150.55 136.238C150.706 136.065 150.865 135.895 151.031 135.729C153.438 133.32 156.637 131.994 160.04 131.994C163.444 131.994 166.644 133.32 169.05 135.729C169.216 135.895 169.376 136.065 169.531 136.239C169.6 136.315 169.664 136.393 169.73 136.471C169.811 136.565 169.892 136.659 169.969 136.755C170.056 136.864 170.141 136.974 170.224 137.084C170.27 137.146 170.317 137.207 170.362 137.27C170.462 137.409 170.561 137.549 170.655 137.691C170.671 137.715 170.687 137.739 170.703 137.764C173.936 142.707 173.386 149.422 169.05 153.762ZM187.501 139.494H187.501C187.501 142.086 185.394 144.195 182.804 144.195H178.278C178.17 140.204 176.762 136.396 174.229 133.274C174.212 133.253 174.196 133.231 174.179 133.21C174.022 133.019 173.86 132.831 173.694 132.645C173.652 132.597 173.612 132.548 173.57 132.501C173.395 132.308 173.214 132.119 173.03 131.933C172.999 131.901 172.97 131.868 172.938 131.836C170.569 129.466 167.664 127.828 164.497 127.035C163.057 126.675 161.563 126.49 160.04 126.49C158.822 126.49 157.622 126.609 156.454 126.84C152.949 127.536 149.726 129.251 147.142 131.836C147.111 131.867 147.083 131.9 147.053 131.931C146.868 132.119 146.686 132.308 146.511 132.501C146.469 132.547 146.431 132.595 146.39 132.641C146.224 132.829 146.059 133.018 145.901 133.211C145.886 133.23 145.871 133.25 145.855 133.27C143.32 136.392 141.911 140.202 141.803 144.195H51.8704C51.7622 140.197 50.3502 136.383 47.8088 133.258C47.7971 133.243 47.7858 133.228 47.7741 133.214C47.6082 133.011 47.436 132.812 47.2607 132.615C47.2283 132.579 47.1981 132.541 47.1653 132.505C46.9599 132.279 46.7488 132.055 46.5305 131.837C45.6417 130.947 44.6827 130.169 43.6721 129.501C40.6392 127.499 37.1361 126.499 33.6331 126.499C28.9623 126.499 24.2911 128.278 20.7354 131.837C20.5322 132.04 20.3358 132.249 20.1435 132.46C20.0866 132.523 20.032 132.586 19.9758 132.649C19.8401 132.803 19.7067 132.958 19.5766 133.115C19.5189 133.185 19.4613 133.255 19.4047 133.326C19.2701 133.494 19.139 133.663 19.0108 133.835C18.9708 133.889 18.9298 133.941 18.8909 133.995C18.5464 134.467 18.2267 134.954 17.9312 135.453C17.9229 135.467 17.915 135.481 17.9067 135.495C17.7623 135.741 17.624 135.99 17.4917 136.241C17.4879 136.248 17.4841 136.256 17.48 136.263C16.5214 138.089 15.8768 140.063 15.5813 142.111L7.01205 138.3C6.09305 137.891 5.49935 136.976 5.49935 135.97V109.32C5.49935 105.91 7.92051 102.927 11.2562 102.227L15.2036 101.4C23.1271 99.7387 30.3465 95.8382 36.0814 90.12C42.9118 83.3093 51.9835 79.5586 61.6256 79.5586H95.0046C102.253 79.5586 109.259 81.7052 115.265 85.7657L133.451 98.061C137.1 100.529 142.647 103.947 148.657 105.144L173.751 110.138C178.456 111.075 182.574 113.97 185.05 118.083L185.919 119.525C186.954 121.244 187.501 123.214 187.501 125.222V139.494Z" fill="black"/>
<Rect height="16.7081" width="16.6909" fill="black" fillOpacity="0" transform="translate(25.286 136.391)"/>
<Rect height="16.7081" width="16.6909" fill="black" fillOpacity="0" transform="translate(25.286 136.391)"/>
<Path d="M39.5359 138.838C37.9587 137.26 35.8629 136.391 33.6332 136.391C31.4036 136.391 29.3073 137.26 27.7309 138.838C26.1545 140.416 25.286 142.514 25.286 144.745C25.286 146.977 26.1545 149.075 27.7309 150.652C29.3073 152.23 31.4036 153.099 33.6336 153.099C35.8633 153.099 37.9595 152.23 39.5359 150.652C42.7905 147.395 42.7905 142.095 39.5359 138.838ZM35.6473 146.761C35.1094 147.299 34.3939 147.596 33.6332 147.596C32.8722 147.596 32.1571 147.299 31.6192 146.76C31.0813 146.222 30.7846 145.506 30.7846 144.745C30.7846 143.983 31.0809 143.267 31.6192 142.729C32.1571 142.191 32.8722 141.894 33.6332 141.894C34.3939 141.894 35.1094 142.19 35.6473 142.729C36.7578 143.841 36.7578 145.649 35.6473 146.761Z" fill="black"/>
<Rect height="16.7081" width="16.6906" fill="black" fillOpacity="0" transform="translate(151.697 136.391)"/>
<Rect height="16.7081" width="16.6906" fill="black" fillOpacity="0" transform="translate(151.697 136.391)"/>
<Path d="M165.943 138.838C164.366 137.26 162.27 136.391 160.04 136.391C157.81 136.391 155.714 137.26 154.137 138.838C150.883 142.095 150.883 147.395 154.137 150.652C155.714 152.23 157.81 153.099 160.04 153.099C162.27 153.099 164.366 152.23 165.942 150.653C167.519 149.075 168.387 146.977 168.387 144.745C168.387 142.514 167.519 140.416 165.943 138.838ZM162.054 146.761C161.516 147.3 160.801 147.596 160.04 147.596C159.279 147.596 158.564 147.3 158.026 146.761C156.915 145.65 156.915 143.841 158.026 142.73C158.564 142.191 159.279 141.895 160.04 141.895C160.801 141.895 161.516 142.191 162.054 142.73C162.592 143.268 162.889 143.984 162.889 144.745C162.889 145.506 162.593 146.222 162.054 146.761Z" fill="black"/>
</Svg>;
const SvgAssets = function(props){
const {icon, width = 80, height = 80} = props;
const lib = {
'car-park-sensor': CarParkSensor
};
const Element = lib[icon];
if(!Element){
throw new Error(`SvgAssets doesn't have any icon with name ${icon}. Please insert a valid icon`);
}
return Element(width, height);
};
export {SvgAssets}
Then you can use it in this way
<SvgAssets icon="car-park-sensor" width="190" height="190" style={{alignSelf:'center'}} />
github.com/react-native-community/react-native-svg - this is an active repo for SVG
It is one of the best ways to show tiny images in your react-native projects.
first import svgxml from react-native-svg:
import { SvgXml } from "react-native-svg";*
then store the SVG code which is extracted from the image inside render and return section inside backtick character:
const newImage= <svg ... .... ... ... /svg>
finally use it inside your code block:
<SvgXml
xml={newImage}
height={22}
width={18}
/>
Related
D3 and React Hooks: Move element along an arc
I am creating a gauge with a small marker which is a triangle, I already have it working here: https://codesandbox.io/s/blazing-sun-teo9oe?file=/src/Gauge.tsx Except for the marker transition, I need it to move along the gauge arc, so when the component prop changes from 40 to 80 for example, the marker will move from 40 to 80, right now it always starts at 50 or the middle of the arc and then moves to the final value. Feel free to change the Gauge prop value in the index.tsx file to see the problem. Transition duration is 10 seconds to see the problem easier.
D3 and React = 300 kB (minified!)
You can do it in native JavaScript:
customElements.define("svg-gauge", class extends HTMLElement {
connectedCallback() {
let arc = "m20 45a35 35 0 1170 0";
let col = this.getAttribute("color")||"green";
this.innerHTML =
`<input type="range" min="0" max="100" step="5" value="0"`+ // delete 2 lines
` oninput="this.parentNode.percent=this.value" /><br>`+ // just for demo
`<svg viewbox="0 0 100 100">
<path d="${arc}" stroke="grey" stroke-width="6" fill="none"
stroke-linecap="round"></path>
<path id="P" d="${arc}" stroke="${col}" stroke-width="8" pathLength="100"
fill="none" stroke-linecap="round" stroke-dasharray="75 35"></path>
<circle cx="0" cy="0" fill="#fff" r="4" stroke="${col}" stroke-width="3">
<animateMotion dur="0.5s" keyPoints="0;0.75"
fill="freeze" keyTimes="0;1" calcMode="linear" path="${arc}">
</animateMotion></circle>
<text x="55%" y="40%" text-anchor="middle"/>
</svg>`;
this.style.display='inline-block';
this.percent = this.getAttribute("value") || "50";
}
set percent(val = 0) {
this.setAttribute("value", val);
let dash = val + " " + (105 - val);
this.querySelector("#P").setAttribute('stroke-dasharray', dash);
this.querySelector("animateMotion").setAttribute('keyPoints', '0;'+val/100);
this.querySelector("text").innerHTML =`${val} %`;
this.querySelector("animateMotion").beginElement();
this.querySelector("input").value = val;
}
})
svg-gauge { width:180px }
<h3>Drag sliders:</h3>
<svg-gauge value="35" color="red"></svg-gauge>
<svg-gauge value="50" color="hotpink"></svg-gauge>
<svg-gauge value="75" color="blue"></svg-gauge>
How to ensure that every path or group in an illustrator SVG has its own class name?
I am trying to create the floor plans of an apartment building as a SVG using Illustrator. The end goal is to use it on a website with a table next to it, where each row has some details about the individual apartments and when hovering over the row, the respective apartment in the SVG graphic highlights with changing its fill to a specific color. (an example would be this: https://the-jay.ch/wohnungen when you scroll down to 'wohnungsangebot') I am fine with the coding part about the animation but one thing I struggle in illustrator, is to assign my own classes to the paths or groups of the floor plans I am designing. From my own research it is not possible in Illustrator to add my own classes. The issue I have is that all apartments will have the same styling in terms of fill and stroke. Because of that reason, they all get assigned the same class. This is an issue for the jquery part later, because I will need to select each apartment individually to create the hover animation. Of course I could add my own classes later on when I exported the SVG but that would also mean that I would have to re-add these classes every time when I need to make a change to the SVG graphic. So my question is: is there a way to determine that each group or path in illustrator gets their own individual classes? I know that by naming the layers, I can assign IDs but this doesn't help much because the styling is stored in the class that illustrator assigns and additionally, some of my 'apartments' are built out of multiple paths that would all get their own ID as an ID needs to be unique. But I need to target with my jquery the entire apartment not just one part of the apartment
To some extend you might define class names by using named graphic styles.
But this might not be extremely feasible.
As a workaround you could write some helperfunction in js, that will add classnames according to your AI object IDS.
Example of a naming scheme for AI layers:
In the above example I'm using double hyphens to seperate multiple id substrings.
Auto Class name function:
function setAutoClassNames(svg){
const elements = svg.querySelectorAll('[id]');
if(elements.length){
elements.forEach(function(el,i){
let id = el.id;
let idArr = id.split('--');
let firstID = idArr[0];
let idPrefix = firstID.replace(/[0-9]/g, '');
//optional: add classnames for certain types
if(idPrefix==='a'){
idArr.push('appartment');
}
//add classname prefix for elements of same type e.g floors, appartments
el.classList.add(idPrefix);
el.classList.add(firstID);
if(idArr.length>1){
let newClassNames = idArr.join(' ');
el.classList.add(...idArr);
}
})
}
}
<g id="floor2--floor-special">
will become
<g id="floor2--floor-special" class="floor floor2 floor-special">
All floor layers will both have a generic .floor and a unique .floorX class. (Same principle for appartments).
Example usage
const svg = document.querySelector('svg');
setAutoClassNames(svg);
function setAutoClassNames(svg) {
const elements = svg.querySelectorAll('[id]');
if (elements.length) {
elements.forEach(function(el, i) {
let id = el.id;
let idArr = id.split('--');
let firstID = idArr[0];
let idPrefix = firstID.replace(/[0-9]/g, '');
//optional: add classnames for certain types
if (idPrefix === 'a') {
idArr.push('appartment');
}
//add classname prefix for elements of same type e.g floors, appartments
el.classList.add(idPrefix);
el.classList.add(firstID);
if (idArr.length > 1) {
let newClassNames = idArr.join(' ');
el.classList.add(...idArr);
}
})
}
}
/**
* usage example
*/
// remove svg stylesheet to use own rules
const svgCss = svg.querySelector('style');
svgCss.remove();
//example show current selection
const pInfo = document.querySelector('.p-info');
let appartments = svg.querySelectorAll('.a');
appartments.forEach(function(appartment, i) {
appartment.addEventListener('click', function(e) {
let currentA = e.currentTarget;
let floor = currentA.closest('.floor');
// get floor/appartment number by id
let appNum = appartment.id.replaceAll('a', '');
let floorNum = floor.id.replaceAll('floor', '');
currentA.classList.toggle('a-active');
pInfo.innerHTML = `<span class="span-app">Appartment: ${appNum}</span>; <span class="span-floor">Floor: ${floorNum}</span>`;
});
});
.st0 {
fill: #FFFFFF;
stroke: #000000;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st1 {
fill: #FFFFFF;
}
.a-active {
fill: red!important;
}
.h-active {
fill: green!important;
}
.open {
fill: green;
}
<svg version="1.1" id="SvgjsSvg1006" xmlns:svgjs="http://svgjs.com/svgjs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="404.5px" height="125.9px" viewBox="219.7 278.3 404.5 125.9" style="enable-background:new 219.7 278.3 404.5 125.9;"
xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#FFFFFF;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;}
]]>
</style>
<g id="floor2--floor-special" transform="matrix(1,0,0,1,0,0)">
<polygon id="open21" class="st1" points="575.8,326.6 552,318.4 546.5,325.4 495.4,307.9 494.4,309.1 493,308.7 492.9,308.6
492.1,308.4 491.4,308.1 490.6,307.9 489.8,307.7 489,307.4 488.2,307.2 487.5,307 486.6,306.8 485.8,306.6 485,306.4 484.2,306.2
483.4,306 482.6,305.8 481.8,305.7 481,305.5 480.1,305.3 479.3,305.1 478.5,305 477.7,304.8 476.8,304.7 476,304.6 475.7,304.5
474.9,304.4 473.2,304.1 471.5,303.9 469.8,303.7 468.1,303.5 466.8,303.4 466.7,298 465.8,298 464,297.9 462.3,297.8 460.5,297.7
458.7,297.7 456.9,297.7 455.1,297.7 453.4,297.7 451.6,297.8 449.8,297.8 448,297.9 446.2,298 444.8,298.2 444.8,302.6 444,302.7
442.2,302.9 440.6,303.1 438.8,303.4 437.2,303.6 435.5,303.9 433.8,304.2 432.1,304.6 430.5,304.9 428.9,305.2 427.4,305.6
425.7,306 424.1,306.5 422.6,306.9 421,307.4 419.5,307.9 417.9,308.4 416.7,308.9 415.4,309.3 413.8,307.4 313.1,343.6
308.8,338.3 271.1,351.8 275.5,357.2 251.1,366 230.6,373.4 230.6,382.4 234.3,387 234.3,377.9 254.9,370.5 254.9,370.5
285.3,359.6 287,361.5 287.5,361.3 306.3,354.6 304.7,352.6 316.9,348.2 316.9,348.2 326.6,344.7 326.6,344.7 417.6,311.9
430.9,328.4 431.6,329.2 432.6,330.4 432.6,336.8 432.8,336.7 434,336.3 435.2,335.9 436.4,335.5 437.6,335.2 438.9,334.9
440.2,334.6 441.5,334.3 442.8,334 444.1,333.8 445.4,333.6 446.7,333.4 448,333.3 449.4,333.1 450.7,333 452.1,332.9 453.4,332.9
454.7,332.8 456.1,332.8 457.4,332.8 458.8,332.8 460.2,332.9 461.5,332.9 462.8,333 464.2,333.2 465.5,333.3 466.8,333.5
468.2,333.7 469.4,333.9 470.7,334.1 472,334.4 473.3,334.7 474.6,335 475.3,335.2 475.3,333.8 475.9,333.1 477.1,331.5
478.4,329.9 479.5,328.3 480.1,327.5 491.9,312.5 546.7,331.3 546.3,331.9 559.2,336.3 565.9,327.7 565.9,327.7 570,329.1
573.8,330.4 573.8,330.4 577.6,331.8 580.4,328.2 "/>
<polygon id="a201" class="st1" points="417.6,311.9 394.4,320.3 409.4,338.7 409.4,347.8 432.6,339.5 432.6,330.4 "/>
<polygon id="a202" class="st1" points="394.4,320.3 378.9,325.9 393.9,344.3 393.9,353.4 409.4,347.8 409.4,338.7 "/>
<polygon id="a203" class="st1" points="378.9,325.9 363.4,331.5 378.4,349.9 378.4,359 393.9,353.4 393.9,344.3 "/>
<polygon id="a204" class="st1" points="363.4,331.5 347.9,337 362.9,355.5 362.9,364.6 378.4,359 378.4,349.9 "/>
<polygon id="a205" class="st1" points="347.9,337 332.3,342.6 347.3,361.1 347.3,370.2 362.9,364.6 362.9,355.5 "/>
<polygon id="a206" class="st1" points="332.3,342.6 326.6,344.7 326.6,344.7 316.9,348.2 331.9,366.7 331.9,375.7 347.3,370.2
347.3,361.1 "/>
<polygon id="a207" class="st1" points="316.9,348.2 304.7,352.6 306.3,354.6 287.5,361.3 300.8,377.8 300.8,386.9 331.9,375.7
331.9,366.7 "/>
<polygon id="a208" class="st1" points="290.3,364.7 287.5,361.3 287,361.5 285.3,359.6 270.3,364.9 285.3,383.4 285.3,392.5
300.8,386.9 300.8,377.8 "/>
<polygon id="a209" class="st1" points="270.3,364.9 254.9,370.5 269.9,389 269.9,398 285.3,392.5 285.3,383.4 "/>
<polygon id="a210" class="st1" points="254.9,370.5 234.3,377.9 234.3,387 239,392.8 243.7,391.1 254,403.8 269.9,398 269.9,389
"/>
<polygon id="a211" class="st1" points="236.1,347.6 220.3,353.3 220.3,362.3 225.9,369.2 225.9,376.6 230.6,382.4 230.6,373.4
251.1,366 "/>
<polyline id="a212" class="st1" points="236.1,347.6 251.7,342 266.6,360.4 251.1,366 236.1,347.6 "/>
<polyline id="a213" class="st1" points="251.7,342 298.2,325.2 308.8,338.3 271.1,351.8 275.5,357.2 266.6,360.4 251.7,342 "/>
<polyline id="a214" class="st1" points="313.7,319.6 328.7,338.1 313.1,343.6 308.8,338.3 298.2,325.2 313.7,319.6 "/>
<polyline id="a215" class="st1" points="329.2,314 344.2,332.5 328.7,338.1 313.7,319.6 329.2,314 "/>
<polyline id="a216" class="st1" points="329.2,314 344.7,308.5 359.6,326.9 344.2,332.5 329.2,314 "/>
<polyline id="a217" class="st1" points="344.7,308.5 360.2,302.9 375.2,321.3 359.6,326.9 344.7,308.5 "/>
<polyline id="a218" class="st1" points="375.7,297.3 390.7,315.7 375.2,321.3 360.2,302.9 375.7,297.3 "/>
<polyline id="a219" class="st1" points="375.7,297.3 398.9,288.9 413.8,307.4 390.7,315.7 375.7,297.3 "/>
<polyline id="a220" class="st1" points="398.9,288.9 399.2,288.8 401.1,288.2 402.9,287.5 404.7,286.9 406.6,286.3 408.4,285.8
410.4,285.2 412.2,284.7 414.1,284.2 416.1,283.7 418,283.2 420,282.8 421.9,282.4 423.9,282 425.9,281.7 427.9,281.3 429.9,281
431.9,280.7 433.9,280.4 435.9,280.2 438,279.9 440,279.7 441,279.7 445.2,298.1 444.8,298.2 444.8,302.6 444,302.7 442.3,302.9
440.6,303.1 438.9,303.4 437.2,303.6 435.5,303.9 433.9,304.2 432.2,304.5 430.6,304.9 428.9,305.2 427.4,305.6 425.7,306
424.1,306.5 422.6,306.9 421,307.4 419.5,307.9 417.9,308.4 416.7,308.9 415.4,309.3 413.8,307.4 398.9,288.9 "/>
<polyline id="a221" class="st1" points="441,279.7 442.3,279.6 444.3,279.4 446.4,279.3 448.4,279.2 450.5,279.1 452.5,279
454.6,279 456.6,279 458.7,279 460.7,279 462.8,279.1 464.8,279.2 466.9,279.3 468.9,279.4 471,279.6 473,279.7 475,279.9
477.1,280.2 479.1,280.4 481.1,280.7 483.1,280.9 484.1,281.1 475.7,304.5 474.9,304.4 473.2,304.1 471.5,303.9 469.8,303.7
468.1,303.5 466.8,303.4 466.7,298 465.8,298 464,297.9 462.3,297.8 460.5,297.7 458.7,297.7 456.9,297.7 455.1,297.7 455.1,297.7
453.4,297.7 451.6,297.8 449.8,297.8 448,297.9 446.2,298 445.2,298.1 441,279.7 "/>
<polyline id="a222" class="st1" points="475.7,304.5 484.1,281.1 485.2,281.3 487.2,281.7 489.2,282 491.1,282.4 493.1,282.8
495,283.2 497,283.7 498.9,284.2 500.8,284.7 502.7,285.2 504.6,285.7 506.5,286.3 508.3,286.9 510.1,287.5 511.1,287.8
519.4,290.7 503.8,310.7 495.4,307.9 494.4,309.1 493.7,308.9 492.1,308.4 490.6,307.9 489,307.4 487.4,307 485.8,306.6
484.2,306.2 482.6,305.8 480.9,305.5 479.3,305.1 477.6,304.8 476,304.6 475.7,304.5 "/>
<polyline id="a223" class="st1" points="519.4,290.7 535,296.1 519.5,316.1 503.8,310.7 519.4,290.7 "/>
<polyline id="a224" class="st1" points="535,296.1 550.8,301.4 535.2,321.5 519.5,316.1 535,296.1 "/>
<polyline id="a225" class="st1" points="550.8,301.4 586,313.6 575.8,326.6 552,318.4 546.5,325.4 535.2,321.5 550.8,301.4 "/>
<polygon id="a226" class="st1" points="586,313.6 575.8,326.6 580.4,328.2 577.6,331.8 583,333.6 589.5,341.5 589.5,350.6
601.5,346.3 601.5,343.6 623.7,335.6 623.7,326.5 "/>
<polygon id="a227" class="st1" points="583,333.6 573.8,330.4 573.8,330.4 570,329.1 565.9,327.7 559.2,336.3 556.2,335.3
554.5,334.7 547.7,343.4 549,352.8 549,361.8 549.7,361.8 551.1,361.6 552.5,361.5 553.9,361.3 555.3,361.2 556.6,361 558,360.8
559.3,360.5 560.7,360.2 562,359.9 563.4,359.6 564.6,359.3 565.9,358.9 567.2,358.5 568.5,358.1 569.8,357.7 570.1,357.6
578.2,354.6 589.5,350.6 589.5,341.5 "/>
<polygon id="a228" class="st1" points="554.5,334.7 546.3,331.9 546.7,331.3 531.6,326.1 515,347.5 515,356.6 518.9,357.9
519.5,358.1 520.8,358.5 522,358.9 523.3,359.2 524.6,359.6 525.9,359.9 527.2,360.2 528.5,360.5 529.9,360.7 531.2,361
532.6,361.2 533.9,361.3 535.3,361.5 536.7,361.6 538.1,361.8 539.4,361.8 540.8,361.9 542.2,362 543.6,362 545,362 546.4,361.9
547.7,361.9 549,361.8 549,352.8 547.7,343.4 "/>
<polygon id="a229" class="st1" points="515.9,320.7 499.3,342.1 499.3,351.1 515,356.6 515,347.5 531.6,326.1 "/>
<polygon id="a230--specialClass" class="st1" points="491.9,312.5 475.3,333.8 475.3,342.9 499.3,351.1 499.3,342.1 515.9,320.7
"/>
<path id="OG2" class="st0" d="M623.8,326.5L623.8,326.5L623.8,326.5C623.8,326.5,623.7,326.5,623.8,326.5
C623.7,326.5,623.7,326.5,623.8,326.5C623.7,326.5,623.7,326.5,623.8,326.5C623.7,326.5,623.7,326.5,623.8,326.5L623.8,326.5
l-37.8-13l-35.2-12.1l-15.7-5.4l-15.7-5.4l-8.3-2.9l-0.9-0.3l0,0l0,0l-1.8-0.6l0,0l0,0l-1.9-0.6l0,0l0,0l-1.9-0.6l0,0l0,0l-1.9-0.5
l0,0l0,0l-1.9-0.5l0,0l0,0l-1.9-0.5l0,0l0,0l-1.9-0.5l0,0l0,0l-1.9-0.4l0,0l0,0l-2-0.4l0,0l0,0l-2-0.4l0,0l0,0l-2-0.4l0,0l0,0
l-2-0.4l0,0l0,0l-2-0.3l0,0l0,0l-1.1-0.2l-1-0.1l0,0l0,0l-2-0.3l0,0l0,0l-2-0.3l0,0l0,0l-2-0.2l0,0l0,0l-2-0.2l0,0l0,0l-2-0.2l0,0
l0,0l-2.1-0.2l0,0l0,0l-2.1-0.1l0,0l0,0l-2.1-0.1l0,0l0,0l-2.1-0.1l0,0l0,0l-2.1-0.1l0,0l0,0l-2.1,0l0,0l0,0l-2.1,0l0,0h-2.1l0,0
l0,0h-2.1l0,0l-2.1,0l0,0l-2.1,0l0,0l0,0l-2.1,0.1l0,0l0,0l-2.1,0.1l0,0l0,0l-2.1,0.1l0,0l0,0l-2.1,0.1l0,0l0,0l-1.2,0.1l-1,0.1
l0,0l0,0l-2,0.2l0,0l0,0l-2,0.2l0,0l0,0l-2,0.2l0,0l0,0l-2,0.3l0,0l0,0l-2,0.3l0,0l0,0l-2,0.3l0,0l0,0l-2,0.3l0,0l0,0l-2,0.4l0,0
l0,0l-2,0.4l0,0l0,0l-2,0.4l0,0l0,0l-2,0.4l0,0l0,0l-2,0.5l0,0l0,0l-1.9,0.5l0,0l0,0l-1.9,0.5l0,0l0,0l-1.9,0.5l0,0l0,0l-1.9,0.5
l0,0l0,0l-1.9,0.6l0,0l0,0l-1.9,0.6l0,0l0,0l-1.8,0.6l0,0l0,0l-1.8,0.6l0,0l0,0l-1.8,0.7l0,0l0,0l-0.4,0.1l0,0l-23.2,8.3l-15.5,5.6
l-15.5,5.6l-15.5,5.6l-15.5,5.6l-15.5,5.6L251.6,342l-15.5,5.6l-15.9,5.7l0,0l0,0l0,0l0,0l0,0l0,0l0,0v9.1l0,0l0,0l5.6,6.9v7.4l0,0
l0,0l4.7,5.8l0,0l3.7,4.5l0,0l4.7,5.8l0,0h0l0,0l4.6-1.7l10.2,12.6l0,0h0l0,0l15.9-5.7l15.5-5.6l15.5-5.6l31-11.2l15.5-5.6
l15.5-5.6l15.5-5.6l15.5-5.6l15.5-5.6l23.2-8.3l0,0l0,0l0,0l0,0v-2.6l0.1,0l0,0l1.2-0.4l0,0l1.2-0.4l0,0l1.2-0.4l0,0l1.2-0.3l0,0
l1.2-0.3l0,0l1.3-0.3l0,0l1.3-0.3l1.3-0.2l0,0l1.3-0.2l0,0l1.3-0.2l0,0l1.3-0.2l0,0l1.3-0.1l0,0l1.3-0.1l0,0l1.3-0.1l0,0l1.3-0.1
l0,0l1.3,0l0,0l1.3,0l0,0h1.3h1.3l0,0l1.3,0l0,0l1.3,0l0,0l1.3,0.1l0,0l1.3,0.1l0,0l1.3,0.1l0,0l1.3,0.1l0,0l1.3,0.1l0,0l1.3,0.2
l0,0l1.3,0.2l0,0l1.3,0.2l0,0l1.3,0.2l0,0l1.3,0.3l0,0l1.2,0.3l0.6,0.1v7.7l0,0l0,0l0,0l0,0l24,8.3l15.7,5.4l3.9,1.3l0,0l0.6,0.2
l0,0l0,0l1.2,0.4l0,0l0,0l1.2,0.4l0,0l0,0l1.3,0.4l0,0l0,0l1.3,0.3l0,0l0,0l1.3,0.3l0,0l0,0l1.3,0.3l0,0l0,0l1.3,0.3l0,0l0,0
l1.3,0.2l0,0l1.3,0.2l0,0l0,0l1.3,0.2l0,0l0,0l1.3,0.2l0,0l1.4,0.1l0,0l0,0l1.4,0.1l0,0l1.4,0.1l0,0l1.4,0.1l0,0l0,0l1.4,0l0,0
l1.4,0l0,0h1.4l0,0l0,0h1.4l0,0l1.4,0l0,0l1.4,0l0,0l1.2,0l0,0l0.7,0l0,0l0,0l1.4-0.1l0,0l1.4-0.1l0,0l0,0l1.4-0.1l0,0l1.4-0.2l0,0
l0,0l1.4-0.2l0,0l1.3-0.2l0,0l0,0l1.3-0.2l0,0l0,0l1.3-0.3l0,0l0,0l1.3-0.3l0,0l0,0l1.3-0.3l0,0l0,0l1.3-0.3l0,0l0,0l1.3-0.4l0,0
l0,0l1.3-0.4l0,0l0,0l1.2-0.4l0,0l0,0l1.2-0.4l0,0l0,0l0.3-0.1l0,0l8.1-2.9l11.3-4.1l12-4.3l0,0l0,0l0,0l0,0v-2.6l22.2-8l0,0l0,0
l0,0l0,0L623.8,326.5L623.8,326.5z M599.7,335.1L599.7,335.1L599.7,335.1L599.7,335.1L599.7,335.1
C599.7,335.2,599.7,335.2,599.7,335.1L599.7,335.1L599.7,335.1L599.7,335.1l1.6,2.1l-11.9,4.3l-6.4-7.9l0,0l0,0l-5.3-1.8l2.7-3.5
l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l-4.5-1.5l10.1-13l37.5,12.9L599.7,335.1z M578.2,354.6l-8.1,2.9l0,0l0,0l-0.3,0.1l0,0l-1.2,0.4
l0,0l-1.2,0.4l0,0l-1.3,0.4l0,0l-1.3,0.4l0,0l-1.3,0.3l-1.3,0.3l0,0l-1.3,0.3l0,0l-1.3,0.3l-1.3,0.2l0,0l-1.3,0.2l0,0l-1.4,0.2l0,0
l-1.4,0.2l0,0l-1.4,0.1l0,0l-1.4,0.1l0,0l-1.4,0.1l0,0l-0.6,0v-9l0.6,0l0,0l0,0l1.4-0.1l0,0l1.4-0.1l0,0l0,0l1.4-0.1l0,0l1.4-0.2
l0,0l0,0l1.4-0.2l0,0l0,0l1.3-0.2l0,0l0,0l1.3-0.2l0,0l0,0l1.3-0.3l0,0l0,0l1.3-0.3l0,0l0,0l1.3-0.3l0,0l0,0l1.3-0.3l0,0l0,0
l1.3-0.4l0,0l0,0l1.3-0.4l0,0l0,0l1.2-0.4l0,0l0,0l1.2-0.4l0,0l0,0l0.3-0.1l0,0l8.1-2.9l11.2-4v9L578.2,354.6z M547.7,361.8
L547.7,361.8l-1.4,0l0,0l-1.4,0l0,0h-1.4h-1.4l0,0l-1.4,0l0,0l-1.4,0l0,0l-1.4-0.1l0,0l-1.4-0.1l0,0l-1.4-0.1l0,0l-1.3-0.1l0,0
l-1.3-0.2l0,0l-1.3-0.2l0,0l-1.3-0.2l0,0l-1.3-0.2l-1.3-0.3l0,0l-1.3-0.3l0,0l-1.3-0.3l-1.3-0.3l0,0l-1.3-0.4l0,0l-1.2-0.4l0,0
l-1.2-0.4l0,0l-0.6-0.2l0,0l0,0l-3.9-1.3v-9l3.8,1.3l0.6,0.2l0,0l0,0l1.2,0.4l0,0l0,0l1.2,0.4l0,0l0,0l1.3,0.4l0,0l0,0l1.3,0.3l0,0
l0,0l1.3,0.3l0,0l0,0l1.3,0.3l0,0l0,0l1.3,0.3l0,0l0,0l1.3,0.2l0,0l1.3,0.2l0,0l0,0l1.3,0.2l0,0l0,0l1.3,0.2l0,0l1.4,0.1l0,0l0,0
l1.4,0.1l0,0l1.4,0.1l0,0l1.4,0.1l0,0l0,0l1.4,0l0,0l1.4,0l0,0h1.4l0,0l0,0h1.4l0,0l1.4,0l0,0l1.4,0l0,0l1.2,0v9L547.7,361.8z
M479.5,327.3L479.5,327.3L479.5,327.3l-1.2-0.4l0,0l0,0l-1.2-0.4l0,0l0,0l-1.2-0.3l0,0l0,0l-1.2-0.3l0,0l0,0l-1.3-0.3l0,0l0,0
l-1.3-0.3l0,0l0,0l-1.3-0.2l0,0l0,0l-1.3-0.2l0,0l0,0l-1.3-0.2l0,0l0,0l-1.3-0.2l0,0l0,0l-1.3-0.1l0,0l0,0l-1.3-0.1l0,0l0,0
l-1.3-0.1l0,0l0,0l-1.3-0.1l0,0l0,0l-1.3-0.1l0,0l0,0l-1.3,0l0,0l-1.3,0l0,0l0,0h-1.3l0,0l0,0h-1.3l0,0l0,0l-1.3,0l0,0l0,0l-1.3,0
l0,0l0,0l-1.3,0.1l0,0l0,0l-1.3,0.1l0,0l0,0l-1.3,0.1l0,0l0,0l-1.3,0.1l0,0l0,0l-1.3,0.2l0,0l0,0l-1.3,0.2l0,0l0,0l-1.3,0.2l0,0
l0,0l-1.3,0.2l0,0l0,0l-1.3,0.3l0,0l0,0l-1.3,0.3l0,0l0,0l-1.2,0.3l0,0l0,0l-1.2,0.3l0,0l0,0l-1.2,0.4l0,0l0,0l-1.2,0.4l0,0l0,0
l-1.2,0.4l0,0l0,0l-1.2,0.4l0,0l0,0l-0.7,0.2l-13.3-16.3l0,0l0,0l0,0l0,0l-23.2,8.3l-15.5,5.6l-15.5,5.6l-15.5,5.6l-15.5,5.6
l-15.5,5.6l-12.2,4.4l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l1.6,1.9l-18.8,6.8l-0.5,0.2l-1.6-2l0,0l0,0l0,0l0,0l-15,5.4l-15.5,5.6l0,0
l-20.5,7.4l-3.6-4.5l20.4-7.4l15.5-5.6l8.8-3.2l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l-4.3-5.3l37.6-13.6l4.4,5.4h0l0,0l15.5-5.6
l85.1-30.6l1.5,1.9h0l0,0l1.3-0.5l0,0l1.1-0.4l0,0l1.5-0.5l0,0l1.5-0.5l0,0l1.6-0.5l0,0l1.6-0.5l0,0l1.6-0.4l0,0l1.6-0.4l1.6-0.4
l0,0l1.6-0.4l0,0l1.6-0.3l0,0h0.1l0,0l1.6-0.3l0,0l1.7-0.3l0,0l1.7-0.3l0,0l1.7-0.2l0,0l1.7-0.2l0,0l1.7-0.2l0,0l0,0l0,0l1.7-0.2
l0,0l0,0l0.9-0.1l0,0l0,0l0,0l0,0l0,0l0,0l0-4.4l0.3,0l1.1-0.1l0,0l0,0l1.8-0.1l0,0l0,0l0,0l1.8-0.1l0,0l1.8-0.1l0,0l1.8,0l0,0
l1.8,0l0,0h1.8h1.8l0,0l0,0l1.8,0l0,0l1.8,0l0,0l1.8,0.1l0,0l1.8,0.1l0,0l0,0l0,0l0.8,0l0.1,5.3l0,0l0,0l0,0l0,0l1.2,0.1l0,0
l1.7,0.2l0,0l1.7,0.2l0,0l1.7,0.2l0,0l1.7,0.2l0,0l0.9,0.1l0,0l0.2,0l0,0h0l0,0l1.6,0.3l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l1.6,0.3
l0,0l0.9,0.2l0.7,0.1l0,0h0l0,0l0,0h0l0,0l1.6,0.3l0,0l0,0l0,0l0,0l0.8,0.2l0.8,0.2l0,0l0,0h0h0l0,0l1.6,0.4l1.6,0.4l0,0l1.6,0.4
l0,0l1.6,0.5l0,0h0h0l0,0l1.5,0.5l0,0l0,0l0,0l0,0l0.8,0.3l1.5,0.5l0,0h0l1-1.3l8.4,2.9l42.7,14.7l0,0h0l5.4-7l23.8,8.2l4.5,1.5
l-2.7,3.4l-3.8-1.3l0,0L570,329l-4.1-1.4l0,0l0,0l0,0l0,0l-6.7,8.6l-3-1l-1.7-0.6l-8.1-2.8l0.4-0.5l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l0,0l-15.1-5.2l-15.7-5.4l-24-8.3l0,0l0,0l0,0l0,0l-11.7,15.1L479.5,327.3z M230.6,365.9L230.6,365.9L230.6,365.9
C230.6,365.9,230.6,365.9,230.6,365.9C230.6,365.9,230.6,365.9,230.6,365.9C230.6,365.9,230.6,365.9,230.6,365.9L230.6,365.9
L230.6,365.9L230.6,365.9l-10.2-12.6l15.8-5.7l14.9,18.3l-20.4,7.4l-4.6-5.7L230.6,365.9z M399.2,288.8L399.2,288.8l1.8-0.7l0,0
l1.8-0.6l1.8-0.6l0,0l1.9-0.6l0,0l1.9-0.6l0,0l1.9-0.5l0,0l1.9-0.5l0,0l1.9-0.5l0,0l1.9-0.5l0,0l1.9-0.5l0,0l2-0.4l0,0l2-0.4l0,0
l2-0.4l0,0l2-0.4l0,0l2-0.3l0,0l2-0.3l0,0l2-0.3l0,0l2-0.3l0,0l2-0.2l0,0l2-0.2l0,0l2-0.2l0,0l1-0.1L445,298l-0.3,0l0,0l0,0l0,0
l0,0l0,0l0,4.4l-0.8,0.1l0,0l0,0l-1.7,0.2l0,0l0,0l-1.7,0.2l0,0l0,0l-1.7,0.2l0,0l0,0l-1.7,0.2l0,0l0,0l-1.7,0.3l0,0l0,0l-1.7,0.3
l0,0l0,0l-1.7,0.3l0,0l0,0l-1.6,0.3l0,0l0,0h0l0,0h0l0,0l0,0l-1.6,0.4l0,0l0,0l-1.6,0.4l0,0l0,0l-1.6,0.4l0,0l0,0l-1.6,0.4l0,0l0,0
l-1.6,0.5l0,0l0,0l-1.6,0.5l0,0l0,0l-1.6,0.5l0,0l0,0l-1.5,0.5l0,0l0,0l-1.5,0.5l0,0l0,0l-0.7,0.3l-1.5-1.9l0,0l-14.9-18.4
L399.2,288.8z M442.3,279.6L442.3,279.6l2.1-0.1l0,0l2.1-0.1l0,0l2.1-0.1l0,0l2.1-0.1l0,0l2.1,0l0,0l2.1,0l0,0h2.1h2.1l0,0l2.1,0
l0,0l2.1,0l0,0l2.1,0.1l0,0l2.1,0.1l0,0l2.1,0.1l0,0l2.1,0.1l0,0l2.1,0.2l0,0l2,0.2l0,0l2,0.2l0,0l2,0.2l0,0l2,0.3l0,0l2,0.3l0,0
l0.9,0.1l-8.3,23.3l-0.8-0.1l0,0l0,0l-1.7-0.2l0,0l0,0l-1.7-0.2l0,0l0,0l-1.7-0.2l0,0l0,0l-1.7-0.2l0,0l0,0l-1.2-0.1l-0.1-5.3l0,0
l0,0l0,0l0,0l-0.9,0l0,0l0,0l-1.8-0.1l0,0l0,0l0,0l0,0l-1.8-0.1l0,0l0,0l-1.8,0l0,0l0,0l-1.8,0l0,0h-1.8l0,0l0,0h-1.8l0,0l0,0l0,0
l-1.8,0l0,0l0,0l-1.8,0l0,0l0,0l0,0l0,0l-1.8,0.1l0,0l0,0l-1.8,0.1l0,0l0,0l-1.8,0.1l0,0l0,0l0,0l0,0l0,0l-1,0.1l-4.1-18.4
L442.3,279.6z M485.2,281.4L485.2,281.4l2,0.3l0,0l2,0.4l0,0l2,0.4l0,0l2,0.4l0,0l2,0.4l0,0l1.9,0.4l0,0l1.9,0.5l0,0l1.9,0.5l0,0
l1.9,0.5l0,0l1.9,0.5l0,0l1.9,0.6l0,0l1.9,0.6l0,0l1.8,0.6l0.9,0.3l8.2,2.8l-15.5,20l-8.4-2.9l0,0l0,0l0,0l0,0l-1,1.3l-0.7-0.2l0,0
l0,0l-0.7-0.2h0l0,0l0,0l-0.8-0.2l0,0l0,0h0l0,0h0l0,0l0,0l-1.5-0.5l0,0l0,0l0,0l0,0l0,0l-1.5-0.4l0,0h0l0,0l0,0h0l0,0l-1.5-0.4
l0,0l0,0h0h0l0,0l0,0l0,0l-1.5-0.4l0,0l0,0l0,0h0l0,0l0,0l-1.6-0.4l0,0l0,0l-0.7-0.2l-0.8-0.2l0,0l0,0h0l0,0l0,0h0l0,0l-1.6-0.3
l0,0l0,0l-0.7-0.1l-0.9-0.2l0,0l0,0h0l0,0l0,0l0,0l0,0l0,0l0,0l-1.6-0.3l0,0l0,0l0,0h0l0,0l0,0l-1.6-0.3l0,0l0,0l0,0l0,0h0l0,0l0,0
l-0.2,0l8.3-23.3L485.2,281.4z M552,318.3L552,318.3L552,318.3C551.9,318.3,551.9,318.3,552,318.3L552,318.3l-5.5,7l-11.2-3.9
l15.5-20l35.1,12.1l-10.1,13L552,318.3z M535.1,321.5l-15.6-5.4l15.5-20l15.6,5.4L535.1,321.5z M519.5,316l-15.6-5.4l15.5-20
l15.6,5.4L519.5,316z M398.9,289l14.9,18.3l-23.1,8.3l-14.9-18.3L398.9,289z M375.7,297.4l14.9,18.3l-15.4,5.6l-14.9-18.3
L375.7,297.4z M360.2,302.9l14.9,18.3l-15.4,5.6l-14.9-18.3L360.2,302.9z M344.7,308.5l14.9,18.3l-15.4,5.6l-14.9-18.3L344.7,308.5
z M329.1,314.1l14.9,18.3l-15.4,5.6l-14.9-18.3L329.1,314.1z M313.7,319.7l14.9,18.3l-15.4,5.6l-4.4-5.4l-10.5-13L313.7,319.7z
M298.2,325.3l10.5,12.9l-37.6,13.6l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l4.3,5.3l-8.7,3.1l-14.9-18.3L298.2,325.3z M251.7,342
l14.9,18.3l-15.4,5.6l-14.9-18.3L251.7,342z M225.9,367.8l4.6,5.7v8.9l-4.6-5.7V367.8z M230.7,373.6l3.6,4.4v8.9l-3.6-4.4V373.6z
M331.9,366.6L317,348.2l15.4-5.6l14.9,18.3L331.9,366.6z M347.4,361l-14.9-18.3l15.4-5.6l14.9,18.3L347.4,361z M362.9,355.4
L348,337.1l15.4-5.6l14.9,18.3L362.9,355.4z M378.4,349.9l-14.9-18.3l15.4-5.6l14.9,18.3L378.4,349.9z M393.9,344.2L379,325.9
l15.4-5.6l14.9,18.3L393.9,344.2z M316.8,348.3l14.9,18.3l-30.9,11.1l-10.6-13l-2.7-3.4l18.8-6.8l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0
l-1.6-1.9L316.8,348.3z M286.9,361.6C286.9,361.6,286.9,361.6,286.9,361.6C287,361.6,287,361.6,286.9,361.6l0.5-0.2l2.7,3.4
l10.5,13l-15.4,5.6l-14.9-18.3l14.8-5.4L286.9,361.6z M254,394.6L243.8,382l0,0l0,0l0,0l0,0l0,0l0,0l0,0l-4.6,1.7l-4.6-5.7
l20.4-7.3l14.9,18.3L254,394.6z M269.9,388.9L255,370.6l15.4-5.6l14.9,18.3L269.9,388.9z M234.4,378.1l4.6,5.7v8.9l-4.6-5.7V378.1z
M239.1,383.8l4.5-1.6v9l-4.5,1.6V383.8z M243.8,382.2l10.2,12.5v8.9l-10.2-12.5V382.2z M254.1,394.7l15.8-5.7v8.9l-15.8,5.7V394.7
z M269.9,389l15.4-5.6v9l-15.4,5.6V389z M285.4,383.4l15.4-5.6v9l-15.4,5.6V383.4z M300.9,377.9l30.9-11.1v9l-30.9,11.1V377.9z
M331.9,366.7l15.4-5.6v9l-15.4,5.6V366.7L331.9,366.7z M347.4,361.1l15.4-5.6v9l-15.4,5.6V361.1L347.4,361.1z M362.9,355.6
l15.4-5.6v9l-15.4,5.6V355.6z M378.4,349.9l15.4-5.6v9l-15.4,5.6V349.9L378.4,349.9z M393.9,344.3l15.4-5.6v9l-15.4,5.6V344.3z
M409.4,338.8l23.1-8.3v9l-23.1,8.3V338.8z M409.4,338.6l-14.9-18.3l23.1-8.3l13.3,16.3l1.6,2L409.4,338.6z M583,333.6l6.4,7.9
l-11.2,4l-8.1,2.9l0,0l-0.3,0.1l0,0l-1.2,0.4l0,0l-1.2,0.4l0,0l-1.3,0.4l0,0l-1.3,0.4l0,0l-1.3,0.3l-1.3,0.3l0,0l-1.3,0.3l0,0
l-1.3,0.3l-1.3,0.2l0,0l-1.3,0.2l0,0l-1.4,0.2l0,0l-1.4,0.2l0,0l-1.4,0.1l0,0l-1.4,0.1l0,0l-1.4,0.1l0,0l-0.6,0l-1.2-9.2l6.7-8.7
l1.7,0.6l3,1.1l0,0h0l6.7-8.6l7.8,2.7l0,0l3.9,1.3L583,333.6z M547.7,352.8L547.7,352.8l-1.4,0l0,0l-1.4,0l0,0h-1.4h-1.4l0,0
l-1.4,0l0,0l-1.4,0l0,0l-1.4-0.1l0,0l-1.4-0.1l0,0l-1.4-0.1l0,0l-1.3-0.1l0,0l-1.3-0.2l0,0l-1.3-0.2l0,0l-1.3-0.2l0,0l-1.3-0.2
l-1.3-0.3l0,0l-1.3-0.3l0,0l-1.3-0.3l-1.3-0.3l0,0l-1.3-0.4l0,0l-1.2-0.4l0,0l-1.2-0.4l0,0l-0.6-0.2l-3.8-1.3l16.5-21.3l15,5.2
l-0.4,0.5l0,0l0,0l0,0l0,0l0,0l0,0l0,0l0,0l8.1,2.8l-6.7,8.7l0,0l0,0l0,0l0,0l1.2,9.2L547.7,352.8z M531.5,326.1l-16.5,21.3
l-15.6-5.4l16.5-21.3L531.5,326.1z M480.2,327.6l11.7-15.1l23.9,8.2L499.3,342l-23.9-8.2L480.2,327.6z M475.3,333.9l23.9,8.2v9
l-23.9-8.2V333.9z M499.4,342.2l15.6,5.4v9l-15.6-5.4V342.2z M589.5,341.6l11.9-4.3v9l-11.9,4.3V341.6z M220.3,362.3v-8.9
l10.1,12.5l-4.6,1.7l0,0l0,0l0,0l0,0l0,0l0,0l0,0v1.4L220.3,362.3z M474.6,334.9L474.6,334.9L474.6,334.9l-1.3-0.3l0,0l0,0
l-1.3-0.3l0,0l0,0l-1.3-0.2l0,0l0,0l-1.3-0.2l0,0l0,0l-1.3-0.2l0,0l0,0l-1.3-0.2l0,0l0,0l-1.3-0.1l0,0l0,0l-1.3-0.1l0,0l0,0
l-1.3-0.1l0,0l-1.3-0.1l0,0l0,0l-1.3-0.1l0,0l0,0l-1.3,0l0,0l-1.3,0l0,0h-1.3l0,0l0,0h-1.3l0,0l0,0l-1.3,0l0,0l0,0l-1.3,0l0,0l0,0
l-1.3,0.1l0,0l0,0l-1.3,0.1l0,0l0,0l-1.3,0.1l0,0l0,0l-1.3,0.1l0,0l0,0l-1.3,0.2l0,0l0,0l-1.3,0.2l0,0l0,0l-1.3,0.2l0,0l0,0
l-1.3,0.2l0,0l0,0l-1.3,0.3l0,0l0,0l-1.3,0.3l0,0l0,0l-1.2,0.3l0,0l0,0l-1.2,0.3l0,0l0,0l-1.2,0.4l0,0l0,0l-1.2,0.4l0,0l0,0
l-1.2,0.4l0,0l0,0l-0.1,0v-6.3l0,0l0,0l0,0l0,0l-1.6-2l0.6-0.2l0,0l1.2-0.4l0,0l1.2-0.4l0,0l1.2-0.4l0,0l1.2-0.4l0,0l1.2-0.3l0,0
l1.2-0.3l0,0l1.3-0.3l0,0l1.3-0.3l1.3-0.2l0,0l1.3-0.2l0,0l1.3-0.2l0,0l1.3-0.2l0,0l1.3-0.1l0,0l1.3-0.1l0,0l1.3-0.1l0,0l1.3-0.1
l0,0l1.3,0l0,0l1.3,0l0,0h1.3h1.3l0,0l1.3,0l0,0l1.3,0l0,0l1.3,0.1l0,0l1.3,0.1l0,0l1.3,0.1l0,0l1.3,0.1l0,0l1.3,0.1l0,0l1.3,0.2
l0,0l1.3,0.2l0,0l1.3,0.2l0,0l1.3,0.2l0,0l1.3,0.3l0,0l1.2,0.3l1.2,0.3l0,0l1.2,0.3l0,0l1.2,0.4l0,0l1.2,0.4l0,0l0.5,0.2l-4.8,6.2
l0,0l0,0l0,0l0,0v1.2L474.6,334.9z M601.5,337.2L601.5,337.2L601.5,337.2C601.5,337.2,601.5,337.2,601.5,337.2l-1.6-2l23.8-8.6v9
l-22.1,7.9V337.2L601.5,337.2z"/>
</g>
</svg>
Since AI won't strip ids when resaving the svg you can retain all class names.
However, you need to find a proper naming scheme to get the desired selectors.
Endless SVG drawing animation
i have created sample animation, but there is some kind of issue with the moving road. When animation is finished, it starts from the begining, which i understand, but i want it to look like it's endless drawing, loop this effect. Can't figure this out, can anyone help?
.loader {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;
position: relative;
width: 300px;
}
#small-cloud {
transform: translate(0px, 0px);
animation: cloud 10s linear infinite;
}
#road {
transform: translate(39px, 0px);
animation: road 1s linear infinite;
}
#keyframes road {
0% {
-webkit-transform: translateX(39px);
}
100% {
-webkit-transform: translateX(0px);
}
}
#keyframes cloud {
0% {
-webkit-transform: translateX(0px);
}
50% {
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0px);
}
}
<div class="loader">
<svg width="245" height="176" viewBox="0 0 245 176" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="small-cloud">
<path d="M112.222 85.9652C111.448 85.9582 110.679 86.1049 109.962 86.3965C109.244 86.6882 108.591 87.1192 108.041 87.6646C107.49 88.21 107.054 88.8589 106.756 89.574C106.457 90.2891 106.304 91.056 106.304 91.8307C106.304 92.6054 106.457 93.3727 106.756 94.0878C107.054 94.8029 107.49 95.4518 108.041 95.9971C108.591 96.5425 109.244 96.9733 109.962 97.2649C110.679 97.5566 111.448 97.7032 112.222 97.6962C113.315 97.6962 115.73 97.7541 118.203 97.8115C121.136 97.869 124.185 97.9268 125.852 97.9268C131.488 97.9268 136.088 93.3839 136.088 87.7476C136.089 85.1929 135.134 82.7302 133.412 80.8436C131.689 78.9571 129.323 77.783 126.779 77.5524C124.234 77.3218 121.696 78.0513 119.662 79.5974C117.628 81.1435 116.246 83.3944 115.788 85.9077C115.767 86.0272 115.72 86.1404 115.65 86.2397C115.581 86.3391 115.49 86.4222 115.385 86.4829C115.279 86.5395 115.161 86.569 115.04 86.569C114.92 86.569 114.802 86.5395 114.696 86.4829C113.916 86.1413 113.074 85.9649 112.222 85.9652ZM125.851 99.537C124.183 99.537 121.136 99.4795 118.203 99.4224C115.673 99.3646 113.315 99.3071 112.222 99.3071C110.254 99.285 108.374 98.4875 106.99 97.0879C105.606 95.6883 104.83 93.7993 104.83 91.831C104.83 89.8627 105.606 87.9741 106.99 86.5745C108.374 85.1749 110.254 84.3774 112.222 84.3553C112.983 84.3572 113.739 84.4735 114.465 84.7002C115.034 82.5744 116.186 80.6501 117.792 79.1455C119.398 77.6408 121.393 76.6156 123.551 76.186C125.709 75.7563 127.945 75.9395 130.004 76.7144C132.064 77.4893 133.865 78.8252 135.205 80.571C136.545 82.3167 137.369 84.4026 137.585 86.5926C137.801 88.7826 137.399 90.9893 136.426 92.9629C135.452 94.9365 133.946 96.5983 132.077 97.7602C130.208 98.9221 128.052 99.5377 125.851 99.5374L125.851 99.537Z" fill="#7099B7"/>
</g>
<path d="M201.456 175.516H90.2948C90.1928 175.512 90.0925 175.488 89.9997 175.446C89.9069 175.403 89.8232 175.343 89.7538 175.268C89.6843 175.193 89.6305 175.106 89.5951 175.01C89.5597 174.914 89.5434 174.812 89.5475 174.71C89.5475 174.308 89.8923 173.905 90.2948 173.905H201.456C201.664 173.92 201.861 174.009 202.009 174.157C202.157 174.305 202.246 174.502 202.261 174.71C202.256 174.923 202.17 175.125 202.02 175.275C201.87 175.425 201.668 175.511 201.456 175.516Z" fill="#7099B7"/>
<path d="M109.215 140.494C104.868 140.494 100.7 142.221 97.6261 145.294C94.5525 148.368 92.8255 152.537 92.8255 156.883C92.8255 161.23 94.5525 165.399 97.6261 168.472C100.7 171.546 104.868 173.273 109.215 173.273C118.243 173.273 125.547 165.912 125.547 156.883C125.547 147.855 118.243 140.494 109.215 140.494ZM109.215 174.825C105.667 174.825 102.198 173.773 99.2471 171.801C96.2966 169.83 93.9969 167.028 92.6389 163.749C91.2809 160.471 90.9254 156.863 91.6176 153.383C92.3099 149.903 94.0188 146.706 96.528 144.196C99.0373 141.687 102.234 139.978 105.715 139.286C109.195 138.594 112.803 138.949 116.081 140.307C119.36 141.665 122.162 143.965 124.133 146.915C126.105 149.866 127.157 153.335 127.157 156.883C127.151 161.64 125.259 166.2 121.895 169.563C118.532 172.927 113.972 174.819 109.215 174.825Z" fill="#7099B7"/>
<path d="M164.709 140.494C161.467 140.494 158.299 141.455 155.603 143.256C152.908 145.057 150.808 147.617 149.567 150.612C148.327 153.606 148.002 156.902 148.635 160.081C149.267 163.26 150.828 166.181 153.12 168.473C155.413 170.765 158.333 172.325 161.512 172.958C164.691 173.59 167.987 173.266 170.981 172.025C173.976 170.785 176.536 168.684 178.337 165.989C180.137 163.293 181.099 160.125 181.099 156.883C181.091 152.539 179.362 148.375 176.29 145.303C173.217 142.231 169.053 140.501 164.709 140.494ZM164.709 174.825C161.16 174.825 157.691 173.773 154.741 171.801C151.79 169.83 149.491 167.028 148.133 163.749C146.775 160.471 146.42 156.863 147.112 153.383C147.804 149.902 149.513 146.705 152.022 144.196C154.532 141.687 157.728 139.978 161.209 139.286C164.689 138.594 168.297 138.949 171.575 140.307C174.854 141.665 177.656 143.965 179.627 146.915C181.599 149.866 182.651 153.335 182.651 156.883C182.645 161.64 180.753 166.2 177.389 169.564C174.026 172.927 169.466 174.819 164.709 174.825Z" fill="#7099B7"/>
<path d="M165.112 157.516C164.958 157.51 164.809 157.464 164.678 157.384C164.547 157.303 164.439 157.19 164.364 157.056L147.515 120.654C147.473 120.56 147.451 120.458 147.448 120.355C147.446 120.252 147.464 120.149 147.502 120.053C147.539 119.957 147.595 119.869 147.666 119.795C147.737 119.72 147.823 119.661 147.917 119.619C148.012 119.578 148.113 119.555 148.216 119.553C148.319 119.55 148.422 119.569 148.518 119.606C148.614 119.643 148.702 119.699 148.776 119.77C148.851 119.842 148.911 119.927 148.952 120.021L165.802 156.366C165.975 156.769 165.802 157.286 165.457 157.458C165.348 157.505 165.23 157.525 165.112 157.516Z" fill="#7099B7"/>
<path d="M126.409 121.171H110.537C110.325 121.167 110.123 121.081 109.973 120.931C109.823 120.78 109.737 120.578 109.732 120.366C109.73 120.26 109.749 120.154 109.788 120.055C109.828 119.956 109.887 119.866 109.962 119.791C110.037 119.716 110.127 119.657 110.226 119.617C110.325 119.578 110.431 119.559 110.537 119.561H126.409C126.621 119.566 126.824 119.652 126.974 119.802C127.124 119.952 127.21 120.154 127.214 120.366C127.2 120.575 127.111 120.772 126.963 120.92C126.815 121.068 126.618 121.157 126.409 121.171Z" fill="#7099B7"/>
<path d="M148.032 121.114H140.441V119.561H148.032V121.114Z" fill="#7099B7"/>
<path d="M137.393 156.653C137.255 156.645 137.12 156.605 137 156.535C136.88 156.465 136.778 156.367 136.703 156.251L116.173 121.114C116.09 120.926 116.073 120.716 116.125 120.517C116.177 120.318 116.295 120.143 116.461 120.021C116.648 119.934 116.86 119.915 117.059 119.968C117.259 120.02 117.433 120.141 117.553 120.309L138.083 155.445C138.313 155.79 138.141 156.308 137.795 156.538C137.67 156.603 137.534 156.642 137.393 156.653Z" fill="#7099B7"/>
<path d="M110.192 155.215H137.565L151.08 130.2H123.189L110.192 155.215ZM138.026 156.768H108.869C108.728 156.773 108.588 156.737 108.466 156.666C108.344 156.595 108.245 156.49 108.179 156.365C108.123 156.249 108.093 156.121 108.093 155.992C108.093 155.862 108.123 155.734 108.179 155.618L121.981 129.049C122.154 128.762 122.384 128.589 122.671 128.589H152.402C152.533 128.598 152.66 128.639 152.77 128.709C152.881 128.78 152.972 128.877 153.035 128.992C153.114 129.109 153.161 129.245 153.171 129.387C153.181 129.528 153.154 129.669 153.092 129.797L138.716 156.365C138.646 156.487 138.546 156.589 138.425 156.659C138.303 156.73 138.166 156.768 138.026 156.768Z" fill="#7099B7"/>
<g id="road">
<path id="third" d="M83.9697 175.516H77.5287C77.4267 175.512 77.3264 175.488 77.2336 175.446C77.1407 175.403 77.0571 175.343 76.9876 175.268C76.9182 175.193 76.8644 175.106 76.829 175.01C76.7936 174.914 76.7773 174.812 76.7814 174.71C76.7814 174.308 77.1265 173.905 77.5287 173.905H83.9697C84.1786 173.92 84.3753 174.009 84.5234 174.157C84.6714 174.305 84.7607 174.502 84.7748 174.71C84.7704 174.923 84.6842 175.125 84.5341 175.275C84.3841 175.425 84.1818 175.511 83.9697 175.516Z" fill="#7099B7"/>
<path id="second" d="M70.9725 175.516H64.9914C64.885 175.518 64.7791 175.499 64.6803 175.459C64.5815 175.42 64.4918 175.36 64.4165 175.285C64.3412 175.21 64.2821 175.12 64.2425 175.021C64.2029 174.923 64.1838 174.817 64.1862 174.71C64.1906 174.498 64.2769 174.296 64.427 174.146C64.577 173.996 64.7792 173.91 64.9914 173.905H70.9725C71.1846 173.91 71.3869 173.996 71.5369 174.146C71.687 174.296 71.7732 174.498 71.7776 174.71C71.7801 174.817 71.7609 174.923 71.7214 175.021C71.6818 175.12 71.6226 175.21 71.5474 175.285C71.4721 175.36 71.3821 175.42 71.2833 175.459C71.1845 175.499 71.0789 175.518 70.9725 175.516Z" fill="#7099B7"/>
<path id="first" d="M57.7865 175.516H51.8053C51.6989 175.518 51.593 175.499 51.4942 175.459C51.3954 175.42 51.3057 175.36 51.2305 175.285C51.1552 175.21 51.0961 175.12 51.0565 175.021C51.0169 174.923 50.9977 174.817 51.0002 174.71C51.0046 174.498 51.0909 174.296 51.2409 174.146C51.391 173.996 51.5932 173.91 51.8053 173.905H57.7865C57.9986 173.91 58.2008 173.996 58.3509 174.146C58.5009 174.296 58.5872 174.498 58.5916 174.71C58.5941 174.817 58.5749 174.923 58.5353 175.021C58.4957 175.12 58.4366 175.21 58.3613 175.285C58.2861 175.36 58.1961 175.42 58.0973 175.459C57.9985 175.499 57.8929 175.518 57.7865 175.516Z" fill="#7099B7"/>
</g>
<rect x="167" y="52" width="6" height="34" fill="white"/>
<rect x="174.5" y="52" width="5" height="34" fill="white"/>
<rect x="208" y="52" width="5" height="34" fill="white"/>
</svg>
</div>
I was working on my own answer when Kaiido brought a solution, then I made a mixture from his answer and the SMIL animation approach I was carring on. I worked over opacity applied to #first in order so simulate the vanishing of the road. But it's really time comsuming seting the right values to avoid flashing, so I increased the road speed to minimize it when it appears once every 2 or 2.5 seconds. You can pulish it more. I also reedited your svg to make it smaller joining the bike and road in a single path.
This is the code:
.loader {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;
position: relative;
width: 300px;
}
#small-cloud {
transform: translate(0px, 0px);
animation: cloud 5s linear infinite;
}
#road {
transform: translate(10px, 0px);
animation: road 0.2s linear infinite;
}
#keyframes road {
0% {
transform: translateX(13px);
}
100% {
transform: translateX(0px);
}
}
#keyframes cloud {
0% {
-webkit-transform: translateX(0px);
}
50% {
-webkit-transform: translateX(20px);
}
100% {
-webkit-transform: translateX(0px);
}
}
<html>
<head>
</head>
<body>
<div class="loader">
<svg width="245" height="176" viewBox="0 0 245 176" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="small-cloud">
<path d="M112.222 85.9652C111.448 85.9582 110.679 86.1049 109.962 86.3965C109.244 86.6882 108.591 87.1192 108.041 87.6646C107.49 88.21 107.054 88.8589 106.756 89.574C106.457 90.2891 106.304 91.056 106.304 91.8307C106.304 92.6054 106.457 93.3727 106.756 94.0878C107.054 94.8029 107.49 95.4518 108.041 95.9971C108.591 96.5425 109.244 96.9733 109.962 97.2649C110.679 97.5566 111.448 97.7032 112.222 97.6962C113.315 97.6962 115.73 97.7541 118.203 97.8115C121.136 97.869 124.185 97.9268 125.852 97.9268C131.488 97.9268 136.088 93.3839 136.088 87.7476C136.089 85.1929 135.134 82.7302 133.412 80.8436C131.689 78.9571 129.323 77.783 126.779 77.5524C124.234 77.3218 121.696 78.0513 119.662 79.5974C117.628 81.1435 116.246 83.3944 115.788 85.9077C115.767 86.0272 115.72 86.1404 115.65 86.2397C115.581 86.3391 115.49 86.4222 115.385 86.4829C115.279 86.5395 115.161 86.569 115.04 86.569C114.92 86.569 114.802 86.5395 114.696 86.4829C113.916 86.1413 113.074 85.9649 112.222 85.9652ZM125.851 99.537C124.183 99.537 121.136 99.4795 118.203 99.4224C115.673 99.3646 113.315 99.3071 112.222 99.3071C110.254 99.285 108.374 98.4875 106.99 97.0879C105.606 95.6883 104.83 93.7993 104.83 91.831C104.83 89.8627 105.606 87.9741 106.99 86.5745C108.374 85.1749 110.254 84.3774 112.222 84.3553C112.983 84.3572 113.739 84.4735 114.465 84.7002C115.034 82.5744 116.186 80.6501 117.792 79.1455C119.398 77.6408 121.393 76.6156 123.551 76.186C125.709 75.7563 127.945 75.9395 130.004 76.7144C132.064 77.4893 133.865 78.8252 135.205 80.571C136.545 82.3167 137.369 84.4026 137.585 86.5926C137.801 88.7826 137.399 90.9893 136.426 92.9629C135.452 94.9365 133.946 96.5983 132.077 97.7602C130.208 98.9221 128.052 99.5377 125.851 99.5374L125.851 99.537Z" fill="#7099B7"/>
</g>
<g id="bike">
<path d="m 110.192,155.215 27.373,0 13.515,-25.015 -27.891,0 -12.997,25.015 z m 27.834,1.553 -29.157,0 c -0.141,0.005 -0.281,-0.031 -0.403,-0.102 -0.122,-0.071 -0.221,-0.176 -0.287,-0.301 -0.056,-0.116 -0.086,-0.244 -0.086,-0.373 0,-0.13 0.03,-0.258 0.086,-0.374 l 13.802,-26.569 c 0.173,-0.287 0.403,-0.46 0.69,-0.46 l 29.731,0 c 0.131,0.009 0.258,0.05 0.368,0.12 0.111,0.071 0.202,0.168 0.265,0.283 0.079,0.117 0.126,0.253 0.136,0.395 0.01,0.141 -0.017,0.282 -0.079,0.41 l -14.376,26.568 c -0.07,0.122 -0.17,0.224 -0.291,0.294 -0.122,0.071 -0.259,0.109 -0.399,0.109 z m -0.633,-0.115 c -0.138,-0.008 -0.273,-0.048 -0.393,-0.118 -0.12,-0.07 -0.222,-0.168 -0.297,-0.284 l -20.53,-35.137 c -0.083,-0.188 -0.1,-0.398 -0.048,-0.597 0.052,-0.199 0.17,-0.374 0.336,-0.496 0.187,-0.087 0.399,-0.106 0.598,-0.053 0.2,0.052 0.374,0.173 0.494,0.341 l 20.53,35.136 c 0.23,0.345 0.058,0.863 -0.288,1.093 -0.125,0.065 -0.261,0.104 -0.402,0.115 z m 10.639,-35.539 -7.591,0 0,-1.553 7.591,0 0,1.553 z m -21.623,0.057 -15.872,0 c -0.212,-0.004 -0.414,-0.09 -0.564,-0.24 -0.15,-0.151 -0.236,-0.353 -0.241,-0.565 -0.002,-0.106 0.017,-0.212 0.056,-0.311 0.04,-0.099 0.099,-0.189 0.174,-0.264 0.075,-0.075 0.165,-0.134 0.264,-0.174 0.099,-0.039 0.205,-0.058 0.311,-0.056 l 15.872,0 c 0.212,0.005 0.415,0.091 0.565,0.241 0.15,0.15 0.236,0.352 0.24,0.564 -0.014,0.209 -0.103,0.406 -0.251,0.554 -0.148,0.148 -0.345,0.237 -0.554,0.251 z m 38.703,36.345 c -0.154,-0.006 -0.303,-0.052 -0.434,-0.132 -0.131,-0.081 -0.239,-0.194 -0.314,-0.328 l -16.849,-36.402 c -0.042,-0.094 -0.064,-0.196 -0.067,-0.299 -0.002,-0.103 0.016,-0.206 0.054,-0.302 0.037,-0.096 0.093,-0.184 0.164,-0.258 0.071,-0.075 0.157,-0.134 0.251,-0.176 0.095,-0.041 0.196,-0.064 0.299,-0.066 0.103,-0.003 0.206,0.016 0.302,0.053 0.096,0.037 0.184,0.093 0.258,0.164 0.075,0.072 0.135,0.157 0.176,0.251 l 16.85,36.345 c 0.173,0.403 0,0.92 -0.345,1.092 -0.109,0.047 -0.227,0.067 -0.345,0.058 z m -0.403,-17.022 c -3.242,0 -6.41,0.961 -9.106,2.762 -2.695,1.801 -4.795,4.361 -6.036,7.356 -1.24,2.994 -1.565,6.29 -0.932,9.469 0.632,3.179 2.193,6.1 4.485,8.392 2.293,2.292 5.213,3.852 8.392,4.485 3.179,0.632 6.475,0.308 9.469,-0.933 2.995,-1.24 5.555,-3.341 7.356,-6.036 1.8,-2.696 2.762,-5.864 2.762,-9.106 -0.008,-4.344 -1.737,-8.508 -4.809,-11.58 -3.073,-3.072 -7.237,-4.802 -11.581,-4.809 z m 0,34.331 c -3.549,0 -7.018,-1.052 -9.968,-3.024 -2.951,-1.971 -5.25,-4.773 -6.608,-8.052 -1.358,-3.278 -1.713,-6.886 -1.021,-10.366 0.692,-3.481 2.401,-6.678 4.91,-9.187 2.51,-2.509 5.706,-4.218 9.187,-4.91 3.48,-0.692 7.088,-0.337 10.366,1.021 3.279,1.358 6.081,3.658 8.052,6.608 1.972,2.951 3.024,6.42 3.024,9.968 -0.006,4.757 -1.898,9.317 -5.262,12.681 -3.363,3.363 -7.923,5.255 -12.68,5.261 z m -55.494,-34.331 c -4.347,0 -8.515,1.727 -11.5889,4.8 -3.0736,3.074 -4.8006,7.243 -4.8006,11.589 0,4.347 1.727,8.516 4.8006,11.589 3.0739,3.074 7.2419,4.801 11.5889,4.801 9.028,0 16.332,-7.361 16.332,-16.39 0,-9.028 -7.304,-16.389 -16.332,-16.389 z m 0,34.331 c -3.548,0 -7.017,-1.052 -9.9679,-3.024 -2.9505,-1.971 -5.2502,-4.773 -6.6082,-8.052 -1.358,-3.278 -1.7135,-6.886 -1.0213,-10.366 0.6923,-3.48 2.4012,-6.677 4.9104,-9.187 2.5093,-2.509 5.706,-4.218 9.187,-4.91 3.48,-0.692 7.088,-0.337 10.366,1.021 3.279,1.358 6.081,3.658 8.052,6.608 1.972,2.951 3.024,6.42 3.024,9.968 -0.006,4.757 -1.898,9.317 -5.262,12.68 -3.363,3.364 -7.923,5.256 -12.68,5.262 z m 92.241,0.691 -111.1612,0 c -0.102,-0.004 -0.2023,-0.028 -0.2951,-0.07 -0.0928,-0.043 -0.1765,-0.103 -0.2459,-0.178 -0.0695,-0.075 -0.1233,-0.162 -0.1587,-0.258 -0.0354,-0.096 -0.0517,-0.198 -0.0476,-0.3 0,-0.402 0.3448,-0.805 0.7473,-0.805 l 111.1612,0 c 0.208,0.015 0.405,0.104 0.553,0.252 0.148,0.148 0.237,0.345 0.252,0.553 -0.005,0.213 -0.091,0.415 -0.241,0.565 -0.15,0.15 -0.352,0.236 -0.564,0.241 z" fill="#7099B7"/>
</g>
<g id="road">
<path id="third" d="M83.9697 175.516H77.5287C77.4267 175.512 77.3264 175.488 77.2336 175.446C77.1407 175.403 77.0571 175.343 76.9876 175.268C76.9182 175.193 76.8644 175.106 76.829 175.01C76.7936 174.914 76.7773 174.812 76.7814 174.71C76.7814 174.308 77.1265 173.905 77.5287 173.905H83.9697C84.1786 173.92 84.3753 174.009 84.5234 174.157C84.6714 174.305 84.7607 174.502 84.7748 174.71C84.7704 174.923 84.6842 175.125 84.5341 175.275C84.3841 175.425 84.1818 175.511 83.9697 175.516Z" fill="#7099B7"/>
<path id="second" d="M70.9725 175.516H64.9914C64.885 175.518 64.7791 175.499 64.6803 175.459C64.5815 175.42 64.4918 175.36 64.4165 175.285C64.3412 175.21 64.2821 175.12 64.2425 175.021C64.2029 174.923 64.1838 174.817 64.1862 174.71C64.1906 174.498 64.2769 174.296 64.427 174.146C64.577 173.996 64.7792 173.91 64.9914 173.905H70.9725C71.1846 173.91 71.3869 173.996 71.5369 174.146C71.687 174.296 71.7732 174.498 71.7776 174.71C71.7801 174.817 71.7609 174.923 71.7214 175.021C71.6818 175.12 71.6226 175.21 71.5474 175.285C71.4721 175.36 71.3821 175.42 71.2833 175.459C71.1845 175.499 71.0789 175.518 70.9725 175.516Z" fill="#7099B7"/>
<g>
<path id="first" d="M57.7865 175.516H51.8053C51.6989 175.518 51.593 175.499 51.4942 175.459C51.3954 175.42 51.3057 175.36 51.2305 175.285C51.1552 175.21 51.0961 175.12 51.0565 175.021C51.0169 174.923 50.9977 174.817 51.0002 174.71C51.0046 174.498 51.0909 174.296 51.2409 174.146C51.391 173.996 51.5932 173.91 51.8053 173.905H57.7865C57.9986 173.91 58.2008 173.996 58.3509 174.146C58.5009 174.296 58.5872 174.498 58.5916 174.71C58.5941 174.817 58.5749 174.923 58.5353 175.021C58.4957 175.12 58.4366 175.21 58.3613 175.285C58.2861 175.36 58.1961 175.42 58.0973 175.459C57.9985 175.499 57.8929 175.518 57.7865 175.516Z" fill="#7099B7"/>
<animate attributeName="opacity" begin="0.2s" dur="0.3s" from="1" to="0" values="1;0" calcMode="linear" repeatCount="indefinite" />
</g>
</g>
</svg>
</div>
</html>
I'm thinking that if you apply a similar animation and approach to the cloud it will simply appear in the front and disappear in the back resembling a real traveling.
Leaflet : Easier to select Circle Markers
I work with a Leaflet map that displays multiple circle markers when page is loaded. But users have found it a bit difficult to click/touch on the circle markers on mobiles and Ipads. Is there a way to increase the select "area" for these circle markers?
This runnable code demonstrates the use of SVG to make the marker's icon that can be your solution:
var clatlng = [15, 100];
var zoom = 8;
var mymap = L.map("mapid").setView(clatlng, zoom);
//This map tiles is simple and no hassles.
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "Map data © OpenStreetMap contributors"
}).addTo(mymap);
const svg_O =
'<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" stroke="none" opacity="0.35" fill="yellow"/><circle cx="50" cy="50" r="15" stroke="blue" fill="green"/></svg>';
const svgpin_O = encodeURI("data:image/svg+xml;utf-8," + svg_O);
const icon_O = L.icon({
iconUrl: svgpin_O,
iconSize: [100, 100],
iconAnchor: [50, 50]
});
var marker1 = L.marker(clatlng, {
icon: icon_O,
draggable: true,
autoPan: true
}).addTo(mymap);
const svg_pin =
'<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z" fill="firebrick"></path></svg>';
const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin);
const svgpin_Icon = L.icon({
iconUrl: svgpin_Url,
iconSize: [24, 24],
iconAnchor: [12, 24],
popupAnchor: [0, -22]
});
var marker2 = L.marker(clatlng, {
icon: svgpin_Icon,
draggable: true,
autoPan: true
}).addTo(mymap);
#mapid {
height: 200px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<div id="mapid"></div>
SVG icon looks different after being converted to woff
I am using gulp-iconfont to convert a set of svg icons to a woff font.
Before the icon is converted into the font it looks as follows:
How it appears in the woff file:
My gulp task is as follows:
gulp.task('icon-font', function() {
gulp.src([paths.icons + '*.svg'])
.pipe(iconfont({
fontName: 'icons',
formats: ['woff'],
timestamp: timestamp,
appendUnicode: true
}))
.on('glyphs', function(glyphs, options) {
gulp.src(paths.templates + '/_icons.scss')
.pipe(template({ glyphs: glyphs, timestamp: timestamp }))
.pipe(gulp.dest(paths.styles));
})
.pipe(gulp.dest(paths.fonts + 'icons/')
);
});
My Illustrator export settings:
SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-183 185 32 32" style="enable-background:new -183 185 32 32;" xml:space="preserve">
<g>
<path d="M-175.6,190.5c-0.3-0.3-0.9-0.3-1.3,0c-4.7,4.7-4.7,12.4,0,17.1c0.2,0.2,0.5,0.5,0.7,0.7c0,0.1-0.1,0.2-0.1,0.3v6.7h-2.9
c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h7.6c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9h-2.9v-5.7c1.8,1.1,3.9,1.6,6.1,1.6
c3.2,0,6.3-1.3,8.5-3.5c0.2-0.2,0.3-0.4,0.3-0.6c0-0.2-0.1-0.5-0.3-0.6L-175.6,190.5z M-168.3,209.3c-2.7,0-5.3-1.1-7.3-3
c-3.8-3.8-4-9.8-0.6-13.9l14.5,14.5C-163.5,208.5-165.9,209.3-168.3,209.3z"/>
<path d="M-168,192.8c3.6,0,6.6,3,6.6,6.6c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9c0-4.6-3.8-8.4-8.4-8.4
c-0.5,0-0.9,0.4-0.9,0.9C-168.9,192.4-168.5,192.8-168,192.8z"/>
<path d="M-157.8,189.1c-2.7-2.7-6.2-4.1-10-4.1c-0.5,0-0.9,0.4-0.9,0.9c0,0.5,0.4,0.9,0.9,0.9c3.3,0,6.4,1.3,8.7,3.6
c2.3,2.3,3.6,5.4,3.6,8.7c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9C-153.6,195.3-155.1,191.8-157.8,189.1z"/>
</g>
</svg>
Any ideas are appreciated.
Update:
Following some advice in #nfroidure I made them all 300px x 300px and now I am getting this and added the following options fontHeight: 16 and normalize: true. Which is producing the following:
Your SVGs seems too small. Try to increase their size or use the fontHeight (> 1000) + normalize options to strech them up.