Auto margins not accounting for svg width - html
I am coding a navbar for my site, and am using auto margins to align the logo to the left the links to the center and a search icon to the right. It works perfectly except that the links are off center by the width of the svg. When I remove the svg the link are perfectly centered.
Right now I am setting max-width and max-height to prevent it from getting too big, but to allow it to shrink on mobile devices. Using height and width don't fix the problem. I also have to put a height and width of auto on the svg to get it to show up.
Here is what I want:
Here is the code.
:root {
--gray: #34312d;
--white: white;
--bg_color: #f9f9f9;
--black: black;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
nav {
background: var(--gray);
display: flex;
}
.nav_list {
display: flex;
list-style: none;
flex-grow: 1;
margin: 0;
padding: 0 1em;
}
.nav_list__link {
color: var(--white);
text-decoration: none;
}
.nav_list__li {
margin: auto 15px;
border-bottom: 2px solid var(--white);
}
.nav_list__li--logo {
margin: 0;
max-height: 50px;
max-width: 200px;
border-bottom: none;
}
.nav_list__li--first {
margin-left: auto;
}
.nav_list__li--search {
margin-left: auto;
border-bottom: none;
color: var(--white);
}
<nav>
<ul class="nav_list">
<li class="nav_list__li nav_list__li--logo">
<svg viewBox="0 0 294 73" fill="none" height="auto" width="auto" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path
d="M7.37335 35.9332V30.9334L28.5604 18.7326V24.0602L11.7533 33.4625L28.5604 42.9586V48.2862L7.37335 35.9332ZM31.0307 55.7566L40.306 10.6416H43.4492L34.1998 55.7566H31.0307ZM67.0849 35.9332L45.8979 48.2862V42.9586L62.6792 33.4625L45.8979 24.0602V18.7326L67.0849 30.9334V35.9332Z"
fill="url(#paint0_linear)"
/>
<path
d="M103.894 24.2253H107.246L98.484 44.7111H95.4479L91.4664 35.0639L87.5268 44.7111H84.4907L75.7291 24.2253H79.0489L86.1401 41.2933L89.4598 32.9004L85.9825 24.2671H89.0186L91.4664 30.7787L93.9141 24.2671H96.9502L93.5149 32.9004L96.8347 41.2933L103.894 24.2253ZM121.796 35.4507C122.924 35.6318 123.894 36.0429 124.706 36.684C125.526 37.325 126.159 38.1368 126.608 39.1193C127.056 40.1018 127.28 41.2062 127.28 42.4325C127.28 44.0282 126.891 45.4322 126.114 46.6447C125.336 47.864 124.237 48.8082 122.815 49.4771C121.4 50.146 119.748 50.4805 117.857 50.4805C115.853 50.4805 114.096 50.1077 112.583 49.3621C111.077 48.6166 109.9 47.5644 109.053 46.2057L111.385 43.8854C111.987 44.9305 112.807 45.7667 113.843 46.3938C114.887 47.0279 116.225 47.3449 117.857 47.3449C119.67 47.3449 121.096 46.9303 122.132 46.1012C123.169 45.2789 123.687 44.0561 123.687 42.4325C123.687 40.7881 123.127 39.4746 122.006 38.4922C120.893 37.5097 119.271 37.0185 117.142 37.0185H116.113V34.1128H117.216C119.114 34.1128 120.567 33.6564 121.575 32.7436C122.591 31.8308 123.099 30.6916 123.099 29.3259C123.099 28.3852 122.875 27.6152 122.426 27.016C121.978 26.4167 121.372 25.9673 120.609 25.6677C119.846 25.3611 118.967 25.2078 117.972 25.2078C116.522 25.2078 115.251 25.5179 114.159 26.138C113.073 26.7512 112.226 27.6048 111.616 28.6987L109.494 26.5038C109.963 25.6189 110.639 24.849 111.522 24.194C112.404 23.539 113.43 23.0303 114.6 22.668C115.769 22.2987 117.013 22.114 118.329 22.114C119.982 22.114 121.446 22.4032 122.721 22.9816C123.995 23.5529 124.986 24.3612 125.694 25.4064C126.408 26.4516 126.765 27.6814 126.765 29.0959C126.765 30.1132 126.566 31.0748 126.166 31.9806C125.774 32.8795 125.203 33.639 124.454 34.2592C123.705 34.8723 122.819 35.2695 121.796 35.4507Z"
fill="white"
/>
<path
d="M135.965 45.1886V23.7046H144.943C145.872 23.7046 146.718 23.8954 147.479 24.277C148.241 24.6585 148.9 25.1691 149.456 25.8086C150.013 26.4428 150.448 27.1549 150.761 27.945C151.08 28.7296 151.239 29.5358 151.239 30.3634C151.239 31.4329 151.026 32.4325 150.599 33.3623C150.172 34.2867 149.578 35.0633 148.816 35.6921C148.055 36.3155 147.169 36.6971 146.159 36.8368L151.539 45.1886H149.748L144.514 37.0787H137.521V45.1886H135.965ZM137.521 35.6518H145.089C146.024 35.6518 146.834 35.4019 147.52 34.902C148.211 34.3969 148.743 33.7412 149.116 32.935C149.494 32.1235 149.683 31.2663 149.683 30.3634C149.683 29.4336 149.465 28.5711 149.027 27.7757C148.595 26.9749 148.017 26.3273 147.293 25.8328C146.574 25.3384 145.77 25.0912 144.878 25.0912H137.521V35.6518ZM161.483 45.4949C160.37 45.4949 159.336 45.2772 158.38 44.8419C157.429 44.4066 156.603 43.8127 155.9 43.0603C155.204 42.3025 154.658 41.4238 154.264 40.4242C153.869 39.4246 153.672 38.3685 153.672 37.256C153.672 35.7673 154.004 34.4184 154.669 33.2091C155.339 31.9945 156.262 31.0191 157.44 30.2828C158.618 29.5465 159.936 29.1784 161.394 29.1784C162.896 29.1784 164.225 29.5519 165.381 30.2989C166.537 31.046 167.452 32.0295 168.128 33.2494C168.808 34.4694 169.149 35.8049 169.149 37.256C169.149 37.3796 169.149 37.5032 169.149 37.6268C169.149 37.7451 169.14 37.8445 169.124 37.9251H155.252C155.333 39.1182 155.668 40.1985 156.257 41.1658C156.846 42.1332 157.599 42.8937 158.518 43.4473C159.441 44.0008 160.451 44.2776 161.548 44.2776C162.645 44.2776 163.679 43.9954 164.651 43.4311C165.624 42.8668 166.302 42.1413 166.685 41.2545L168.03 41.6173C167.722 42.3643 167.239 43.0307 166.58 43.6166C165.921 44.2024 165.151 44.6619 164.271 44.9951C163.39 45.3283 162.461 45.4949 161.483 45.4949ZM155.187 36.7481H167.69C167.609 35.5174 167.285 34.4291 166.718 33.4832C166.151 32.532 165.405 31.7849 164.481 31.2421C163.558 30.6939 162.539 30.4198 161.427 30.4198C160.308 30.4198 159.293 30.6939 158.38 31.2421C157.472 31.7849 156.732 32.532 156.16 33.4832C155.592 34.4291 155.268 35.5174 155.187 36.7481ZM177.483 45.4949C176.23 45.4949 175.066 45.2826 173.991 44.858C172.916 44.4335 171.973 43.7858 171.163 42.9152L171.86 41.8591C172.729 42.6868 173.61 43.2887 174.501 43.6649C175.398 44.0358 176.373 44.2212 177.426 44.2212C178.782 44.2212 179.881 43.939 180.724 43.3747C181.567 42.8104 181.988 42.0231 181.988 41.0127C181.988 40.3248 181.791 39.7954 181.397 39.4246C181.002 39.0484 180.435 38.7447 179.695 38.5136C178.955 38.2825 178.056 38.0353 176.997 37.7719C175.922 37.4925 175.014 37.2023 174.274 36.9013C173.534 36.595 172.981 36.2 172.613 35.7163C172.251 35.2326 172.07 34.5769 172.07 33.7492C172.07 32.7227 172.33 31.8709 172.848 31.1937C173.367 30.5166 174.066 30.0114 174.947 29.6782C175.827 29.345 176.805 29.1784 177.88 29.1784C179.117 29.1784 180.197 29.3799 181.121 29.783C182.045 30.1861 182.75 30.7208 183.236 31.3872L182.418 32.3546C181.91 31.7097 181.248 31.2314 180.432 30.9197C179.622 30.6079 178.731 30.4521 177.759 30.4521C177.029 30.4521 176.341 30.5542 175.692 30.7584C175.044 30.9573 174.52 31.2851 174.12 31.7419C173.726 32.1934 173.529 32.8007 173.529 33.5638C173.529 34.1711 173.675 34.6468 173.966 34.9907C174.263 35.3347 174.706 35.6141 175.295 35.8291C175.884 36.0387 176.613 36.2644 177.483 36.5063C178.72 36.8073 179.784 37.119 180.676 37.4414C181.572 37.7639 182.264 38.1831 182.75 38.699C183.236 39.2096 183.479 39.9297 183.479 40.8595C183.479 42.2945 182.931 43.4258 181.834 44.2534C180.743 45.0811 179.293 45.4949 177.483 45.4949ZM193.698 45.4949C192.585 45.4949 191.556 45.2826 190.611 44.858C189.671 44.4335 188.855 43.8423 188.164 43.0845C187.472 42.3267 186.935 41.4534 186.551 40.4645C186.168 39.4756 185.976 38.4384 185.976 37.3527C185.976 36.2403 186.168 35.1949 186.551 34.2168C186.935 33.2387 187.475 32.3734 188.172 31.621C188.874 30.8632 189.695 30.2667 190.635 29.8313C191.581 29.396 192.602 29.1784 193.698 29.1784C194.795 29.1784 195.808 29.396 196.737 29.8313C197.671 30.2667 198.492 30.8632 199.2 31.621C199.913 32.3734 200.461 33.2387 200.845 34.2168C201.234 35.1949 201.428 36.2403 201.428 37.3527C201.428 38.4384 201.234 39.4756 200.845 40.4645C200.461 41.4534 199.918 42.3267 199.216 43.0845C198.519 43.8423 197.698 44.4335 196.753 44.858C195.813 45.2826 194.795 45.4949 193.698 45.4949ZM187.491 37.4092C187.491 38.6399 187.77 39.7658 188.326 40.787C188.888 41.8027 189.633 42.6142 190.562 43.2215C191.497 43.8288 192.531 44.1325 193.666 44.1325C194.806 44.1325 195.845 43.8262 196.785 43.2135C197.731 42.5954 198.482 41.7678 199.038 40.7305C199.594 39.6879 199.873 38.5512 199.873 37.3205C199.873 36.0898 199.594 34.9612 199.038 33.9347C198.482 32.9028 197.731 32.0805 196.785 31.4678C195.845 30.8498 194.816 30.5408 193.698 30.5408C192.564 30.5408 191.529 30.8552 190.595 31.484C189.666 32.1074 188.915 32.935 188.342 33.9669C187.775 34.9934 187.491 36.1408 187.491 37.4092ZM204.924 38.5297V29.4525H206.447V38.3201C206.447 40.2764 206.776 41.7355 207.436 42.6975C208.095 43.6542 209.094 44.1325 210.434 44.1325C211.325 44.1325 212.181 43.9363 213.002 43.544C213.823 43.1463 214.547 42.59 215.174 41.8753C215.806 41.1605 216.273 40.3274 216.576 39.3762V29.4525H218.099V43.1893C218.099 43.4311 218.153 43.6139 218.261 43.7375C218.374 43.8557 218.531 43.9256 218.731 43.9471V45.1886C218.531 45.21 218.374 45.2208 218.261 45.2208C218.153 45.2208 218.058 45.21 217.977 45.1886C217.632 45.1456 217.345 45.0005 217.118 44.7532C216.897 44.5006 216.775 44.1916 216.754 43.8262L216.729 41.4641C216.038 42.7163 215.087 43.7025 213.877 44.4227C212.673 45.1375 211.371 45.4949 209.972 45.4949C208.308 45.4949 207.049 44.9091 206.196 43.7375C205.348 42.5659 204.924 40.83 204.924 38.5297H204.924ZM230.412 30.8149C228.997 30.8525 227.754 31.2717 226.685 32.0725C225.62 32.8679 224.878 33.9615 224.456 35.3535V45.1886H222.933V29.4525H224.392V33.322C224.937 32.2149 225.666 31.3147 226.579 30.6214C227.492 29.9227 228.456 29.5223 229.472 29.4202C229.672 29.3987 229.853 29.388 230.015 29.388C230.182 29.388 230.315 29.388 230.412 29.388V30.8149ZM239.414 45.4949C238.323 45.4949 237.3 45.2772 236.343 44.8419C235.393 44.4066 234.561 43.8127 233.848 43.0603C233.14 42.3025 232.589 41.4292 232.195 40.4403C231.8 39.4514 231.603 38.39 231.603 37.256C231.603 35.7458 231.935 34.3861 232.6 33.1769C233.27 31.9623 234.193 30.9922 235.371 30.2667C236.549 29.5411 237.888 29.1784 239.39 29.1784C240.827 29.1784 242.094 29.5062 243.19 30.1619C244.287 30.8175 245.108 31.7097 245.654 32.8383L244.163 33.322C243.698 32.4567 243.034 31.7769 242.169 31.2824C241.31 30.788 240.362 30.5408 239.325 30.5408C238.169 30.5408 237.124 30.8337 236.189 31.4195C235.26 32.0053 234.515 32.8087 233.953 33.8299C233.397 34.8456 233.118 35.9877 233.118 37.256C233.118 38.5082 233.402 39.661 233.969 40.7144C234.542 41.7624 235.298 42.5954 236.238 43.2135C237.183 43.8262 238.223 44.1325 239.358 44.1325C240.087 44.1325 240.8 43.9954 241.497 43.7213C242.199 43.4473 242.81 43.0899 243.328 42.6492C243.847 42.2031 244.187 41.7275 244.349 41.2223L245.84 41.6495C245.575 42.3966 245.116 43.0576 244.462 43.6327C243.814 44.2077 243.058 44.6619 242.194 44.9951C241.335 45.3283 240.408 45.4949 239.414 45.4949ZM255.84 45.4949C254.727 45.4949 253.693 45.2772 252.737 44.8419C251.786 44.4066 250.96 43.8127 250.257 43.0603C249.56 42.3025 249.015 41.4238 248.621 40.4242C248.226 39.4246 248.029 38.3685 248.029 37.256C248.029 35.7673 248.361 34.4184 249.026 33.2091C249.695 31.9945 250.619 31.0191 251.797 30.2828C252.974 29.5465 254.293 29.1784 255.751 29.1784C257.253 29.1784 258.582 29.5519 259.738 30.2989C260.894 31.046 261.809 32.0295 262.485 33.2494C263.165 34.4694 263.505 35.8049 263.505 37.256C263.505 37.3796 263.505 37.5032 263.505 37.6268C263.505 37.7451 263.497 37.8445 263.481 37.9251H249.609C249.69 39.1182 250.025 40.1985 250.614 41.1658C251.203 42.1332 251.956 42.8937 252.874 43.4473C253.798 44.0008 254.808 44.2776 255.905 44.2776C257.002 44.2776 258.036 43.9954 259.008 43.4311C259.981 42.8668 260.659 42.1413 261.042 41.2545L262.387 41.6173C262.079 42.3643 261.596 43.0307 260.937 43.6166C260.278 44.2024 259.508 44.6619 258.628 44.9951C257.747 45.3283 256.818 45.4949 255.84 45.4949H255.84ZM249.544 36.7481H262.047C261.966 35.5174 261.642 34.4291 261.075 33.4832C260.507 32.532 259.762 31.7849 258.838 31.2421C257.914 30.6939 256.896 30.4198 255.783 30.4198C254.665 30.4198 253.65 30.6939 252.737 31.2421C251.829 31.7849 251.089 32.532 250.517 33.4832C249.949 34.4291 249.625 35.5174 249.544 36.7481ZM271.84 45.4949C270.587 45.4949 269.423 45.2826 268.348 44.858C267.273 44.4335 266.33 43.7858 265.52 42.9152L266.217 41.8591C267.086 42.6868 267.967 43.2887 268.858 43.6649C269.755 44.0358 270.73 44.2212 271.783 44.2212C273.139 44.2212 274.238 43.939 275.081 43.3747C275.924 42.8104 276.345 42.0231 276.345 41.0127C276.345 40.3248 276.148 39.7954 275.754 39.4246C275.359 39.0484 274.792 38.7447 274.052 38.5136C273.312 38.2825 272.413 38.0353 271.354 37.7719C270.279 37.4925 269.371 37.2023 268.631 36.9013C267.891 36.595 267.337 36.2 266.97 35.7163C266.608 35.2326 266.427 34.5769 266.427 33.7492C266.427 32.7227 266.687 31.8709 267.205 31.1937C267.724 30.5166 268.423 30.0114 269.304 29.6782C270.184 29.345 271.162 29.1784 272.237 29.1784C273.474 29.1784 274.554 29.3799 275.478 29.783C276.402 30.1861 277.107 30.7208 277.593 31.3872L276.775 32.3546C276.267 31.7097 275.605 31.2314 274.789 30.9197C273.979 30.6079 273.088 30.4521 272.115 30.4521C271.386 30.4521 270.697 30.5542 270.049 30.7584C269.401 30.9573 268.877 31.2851 268.477 31.7419C268.083 32.1934 267.886 32.8007 267.886 33.5638C267.886 34.1711 268.032 34.6468 268.323 34.9907C268.62 35.3347 269.063 35.6141 269.652 35.8291C270.241 36.0387 270.97 36.2644 271.84 36.5063C273.077 36.8073 274.141 37.119 275.032 37.4414C275.929 37.7639 276.621 38.1831 277.107 38.699C277.593 39.2096 277.836 39.9297 277.836 40.8595C277.836 42.2945 277.288 43.4258 276.191 44.2534C275.1 45.0811 273.65 45.4949 271.84 45.4949Z"
fill="white"
/>
</g>
<defs>
<linearGradient
id="paint0_linear"
x1="7.5972"
y1="13.3458"
x2="68.3447"
y2="28.9704"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#A2FAA3" />
<stop offset="1" stop-color="#3AAFB9" />
</linearGradient>
<clipPath id="clip0">
<rect
width="294"
height="78"
fill="white"
transform="translate(0 -5)"
/>
</clipPath>
</defs>
</svg>
</li>
<li class="nav_list__li nav_list__li--first">
Resources
</li>
<li class="nav_list__li">
tipsNtricks
</li>
<li class="nav_list__li">
Contact
</li>
<li class="nav_list__li nav_list__li--search">
<i class="fas fa-search"></i>
</li>
</ul>
</nav>
For a short answer, jus change your search li to have the same width that your logo and align it to the right, but I would recommend you to find another way to structure your html and css, maybe to something with display grid, but it would be more complicated to help you.
In other words, change your search li to:
.nav_list__li--search {
width: 200px;
display: flex;
justify-content: flex-end;
margin-left: auto;
border-bottom: none;
color: var(--white);
}
You could also use position absolute to position your logo so it would not interfere at the rest.
Perhaps create a 3 column grid with the sizes noted. I changed some classes and removed some for clarity. Probably not perfect but might give you a start/ideas.
:root {
--gray: #34312d;
--white: #FFFFFF;
--bg_color: #f9f9f9;
--black: #000000;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
nav {
background: var(--gray);
}
.my-grid {
display: grid;
grid-template-columns: minmax(30%, 200px) 30% 30%;
grid-template-rows: 50px;
}
.my-logo {
grid-column-start: 1;
grid-column-end: 1;
}
.nav_list {
grid-column-start: 2;
grid-column-end: 2;
display: flex;
list-style: none;
flex-grow: 1;
margin: 0;
padding: 0 1em;
}
.nav_list__link {
color: var(--white);
text-decoration: none;
}
.nav_list__li {
margin: auto 15px;
border-bottom: 2px solid var(--white);
}
.my-icon {
grid-column-start: 4;
grid-column-end: 4;
color: var(--white);
border: solid 1px lime;
/*for clarity only)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<nav>
<div class="my-grid">
<div class="my-logo">
<svg viewBox="0 0 294 73" fill="none" height="auto" width="auto" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path
d="M7.37335 35.9332V30.9334L28.5604 18.7326V24.0602L11.7533 33.4625L28.5604 42.9586V48.2862L7.37335 35.9332ZM31.0307 55.7566L40.306 10.6416H43.4492L34.1998 55.7566H31.0307ZM67.0849 35.9332L45.8979 48.2862V42.9586L62.6792 33.4625L45.8979 24.0602V18.7326L67.0849 30.9334V35.9332Z"
fill="url(#paint0_linear)"
/>
<path
d="M103.894 24.2253H107.246L98.484 44.7111H95.4479L91.4664 35.0639L87.5268 44.7111H84.4907L75.7291 24.2253H79.0489L86.1401 41.2933L89.4598 32.9004L85.9825 24.2671H89.0186L91.4664 30.7787L93.9141 24.2671H96.9502L93.5149 32.9004L96.8347 41.2933L103.894 24.2253ZM121.796 35.4507C122.924 35.6318 123.894 36.0429 124.706 36.684C125.526 37.325 126.159 38.1368 126.608 39.1193C127.056 40.1018 127.28 41.2062 127.28 42.4325C127.28 44.0282 126.891 45.4322 126.114 46.6447C125.336 47.864 124.237 48.8082 122.815 49.4771C121.4 50.146 119.748 50.4805 117.857 50.4805C115.853 50.4805 114.096 50.1077 112.583 49.3621C111.077 48.6166 109.9 47.5644 109.053 46.2057L111.385 43.8854C111.987 44.9305 112.807 45.7667 113.843 46.3938C114.887 47.0279 116.225 47.3449 117.857 47.3449C119.67 47.3449 121.096 46.9303 122.132 46.1012C123.169 45.2789 123.687 44.0561 123.687 42.4325C123.687 40.7881 123.127 39.4746 122.006 38.4922C120.893 37.5097 119.271 37.0185 117.142 37.0185H116.113V34.1128H117.216C119.114 34.1128 120.567 33.6564 121.575 32.7436C122.591 31.8308 123.099 30.6916 123.099 29.3259C123.099 28.3852 122.875 27.6152 122.426 27.016C121.978 26.4167 121.372 25.9673 120.609 25.6677C119.846 25.3611 118.967 25.2078 117.972 25.2078C116.522 25.2078 115.251 25.5179 114.159 26.138C113.073 26.7512 112.226 27.6048 111.616 28.6987L109.494 26.5038C109.963 25.6189 110.639 24.849 111.522 24.194C112.404 23.539 113.43 23.0303 114.6 22.668C115.769 22.2987 117.013 22.114 118.329 22.114C119.982 22.114 121.446 22.4032 122.721 22.9816C123.995 23.5529 124.986 24.3612 125.694 25.4064C126.408 26.4516 126.765 27.6814 126.765 29.0959C126.765 30.1132 126.566 31.0748 126.166 31.9806C125.774 32.8795 125.203 33.639 124.454 34.2592C123.705 34.8723 122.819 35.2695 121.796 35.4507Z"
fill="white"/>
<path d="M135.965 45.1886V23.7046H144.943C145.872 23.7046 146.718 23.8954 147.479 24.277C148.241 24.6585 148.9 25.1691 149.456 25.8086C150.013 26.4428 150.448 27.1549 150.761 27.945C151.08 28.7296 151.239 29.5358 151.239 30.3634C151.239 31.4329 151.026 32.4325 150.599 33.3623C150.172 34.2867 149.578 35.0633 148.816 35.6921C148.055 36.3155 147.169 36.6971 146.159 36.8368L151.539 45.1886H149.748L144.514 37.0787H137.521V45.1886H135.965ZM137.521 35.6518H145.089C146.024 35.6518 146.834 35.4019 147.52 34.902C148.211 34.3969 148.743 33.7412 149.116 32.935C149.494 32.1235 149.683 31.2663 149.683 30.3634C149.683 29.4336 149.465 28.5711 149.027 27.7757C148.595 26.9749 148.017 26.3273 147.293 25.8328C146.574 25.3384 145.77 25.0912 144.878 25.0912H137.521V35.6518ZM161.483 45.4949C160.37 45.4949 159.336 45.2772 158.38 44.8419C157.429 44.4066 156.603 43.8127 155.9 43.0603C155.204 42.3025 154.658 41.4238 154.264 40.4242C153.869 39.4246 153.672 38.3685 153.672 37.256C153.672 35.7673 154.004 34.4184 154.669 33.2091C155.339 31.9945 156.262 31.0191 157.44 30.2828C158.618 29.5465 159.936 29.1784 161.394 29.1784C162.896 29.1784 164.225 29.5519 165.381 30.2989C166.537 31.046 167.452 32.0295 168.128 33.2494C168.808 34.4694 169.149 35.8049 169.149 37.256C169.149 37.3796 169.149 37.5032 169.149 37.6268C169.149 37.7451 169.14 37.8445 169.124 37.9251H155.252C155.333 39.1182 155.668 40.1985 156.257 41.1658C156.846 42.1332 157.599 42.8937 158.518 43.4473C159.441 44.0008 160.451 44.2776 161.548 44.2776C162.645 44.2776 163.679 43.9954 164.651 43.4311C165.624 42.8668 166.302 42.1413 166.685 41.2545L168.03 41.6173C167.722 42.3643 167.239 43.0307 166.58 43.6166C165.921 44.2024 165.151 44.6619 164.271 44.9951C163.39 45.3283 162.461 45.4949 161.483 45.4949ZM155.187 36.7481H167.69C167.609 35.5174 167.285 34.4291 166.718 33.4832C166.151 32.532 165.405 31.7849 164.481 31.2421C163.558 30.6939 162.539 30.4198 161.427 30.4198C160.308 30.4198 159.293 30.6939 158.38 31.2421C157.472 31.7849 156.732 32.532 156.16 33.4832C155.592 34.4291 155.268 35.5174 155.187 36.7481ZM177.483 45.4949C176.23 45.4949 175.066 45.2826 173.991 44.858C172.916 44.4335 171.973 43.7858 171.163 42.9152L171.86 41.8591C172.729 42.6868 173.61 43.2887 174.501 43.6649C175.398 44.0358 176.373 44.2212 177.426 44.2212C178.782 44.2212 179.881 43.939 180.724 43.3747C181.567 42.8104 181.988 42.0231 181.988 41.0127C181.988 40.3248 181.791 39.7954 181.397 39.4246C181.002 39.0484 180.435 38.7447 179.695 38.5136C178.955 38.2825 178.056 38.0353 176.997 37.7719C175.922 37.4925 175.014 37.2023 174.274 36.9013C173.534 36.595 172.981 36.2 172.613 35.7163C172.251 35.2326 172.07 34.5769 172.07 33.7492C172.07 32.7227 172.33 31.8709 172.848 31.1937C173.367 30.5166 174.066 30.0114 174.947 29.6782C175.827 29.345 176.805 29.1784 177.88 29.1784C179.117 29.1784 180.197 29.3799 181.121 29.783C182.045 30.1861 182.75 30.7208 183.236 31.3872L182.418 32.3546C181.91 31.7097 181.248 31.2314 180.432 30.9197C179.622 30.6079 178.731 30.4521 177.759 30.4521C177.029 30.4521 176.341 30.5542 175.692 30.7584C175.044 30.9573 174.52 31.2851 174.12 31.7419C173.726 32.1934 173.529 32.8007 173.529 33.5638C173.529 34.1711 173.675 34.6468 173.966 34.9907C174.263 35.3347 174.706 35.6141 175.295 35.8291C175.884 36.0387 176.613 36.2644 177.483 36.5063C178.72 36.8073 179.784 37.119 180.676 37.4414C181.572 37.7639 182.264 38.1831 182.75 38.699C183.236 39.2096 183.479 39.9297 183.479 40.8595C183.479 42.2945 182.931 43.4258 181.834 44.2534C180.743 45.0811 179.293 45.4949 177.483 45.4949ZM193.698 45.4949C192.585 45.4949 191.556 45.2826 190.611 44.858C189.671 44.4335 188.855 43.8423 188.164 43.0845C187.472 42.3267 186.935 41.4534 186.551 40.4645C186.168 39.4756 185.976 38.4384 185.976 37.3527C185.976 36.2403 186.168 35.1949 186.551 34.2168C186.935 33.2387 187.475 32.3734 188.172 31.621C188.874 30.8632 189.695 30.2667 190.635 29.8313C191.581 29.396 192.602 29.1784 193.698 29.1784C194.795 29.1784 195.808 29.396 196.737 29.8313C197.671 30.2667 198.492 30.8632 199.2 31.621C199.913 32.3734 200.461 33.2387 200.845 34.2168C201.234 35.1949 201.428 36.2403 201.428 37.3527C201.428 38.4384 201.234 39.4756 200.845 40.4645C200.461 41.4534 199.918 42.3267 199.216 43.0845C198.519 43.8423 197.698 44.4335 196.753 44.858C195.813 45.2826 194.795 45.4949 193.698 45.4949ZM187.491 37.4092C187.491 38.6399 187.77 39.7658 188.326 40.787C188.888 41.8027 189.633 42.6142 190.562 43.2215C191.497 43.8288 192.531 44.1325 193.666 44.1325C194.806 44.1325 195.845 43.8262 196.785 43.2135C197.731 42.5954 198.482 41.7678 199.038 40.7305C199.594 39.6879 199.873 38.5512 199.873 37.3205C199.873 36.0898 199.594 34.9612 199.038 33.9347C198.482 32.9028 197.731 32.0805 196.785 31.4678C195.845 30.8498 194.816 30.5408 193.698 30.5408C192.564 30.5408 191.529 30.8552 190.595 31.484C189.666 32.1074 188.915 32.935 188.342 33.9669C187.775 34.9934 187.491 36.1408 187.491 37.4092ZM204.924 38.5297V29.4525H206.447V38.3201C206.447 40.2764 206.776 41.7355 207.436 42.6975C208.095 43.6542 209.094 44.1325 210.434 44.1325C211.325 44.1325 212.181 43.9363 213.002 43.544C213.823 43.1463 214.547 42.59 215.174 41.8753C215.806 41.1605 216.273 40.3274 216.576 39.3762V29.4525H218.099V43.1893C218.099 43.4311 218.153 43.6139 218.261 43.7375C218.374 43.8557 218.531 43.9256 218.731 43.9471V45.1886C218.531 45.21 218.374 45.2208 218.261 45.2208C218.153 45.2208 218.058 45.21 217.977 45.1886C217.632 45.1456 217.345 45.0005 217.118 44.7532C216.897 44.5006 216.775 44.1916 216.754 43.8262L216.729 41.4641C216.038 42.7163 215.087 43.7025 213.877 44.4227C212.673 45.1375 211.371 45.4949 209.972 45.4949C208.308 45.4949 207.049 44.9091 206.196 43.7375C205.348 42.5659 204.924 40.83 204.924 38.5297H204.924ZM230.412 30.8149C228.997 30.8525 227.754 31.2717 226.685 32.0725C225.62 32.8679 224.878 33.9615 224.456 35.3535V45.1886H222.933V29.4525H224.392V33.322C224.937 32.2149 225.666 31.3147 226.579 30.6214C227.492 29.9227 228.456 29.5223 229.472 29.4202C229.672 29.3987 229.853 29.388 230.015 29.388C230.182 29.388 230.315 29.388 230.412 29.388V30.8149ZM239.414 45.4949C238.323 45.4949 237.3 45.2772 236.343 44.8419C235.393 44.4066 234.561 43.8127 233.848 43.0603C233.14 42.3025 232.589 41.4292 232.195 40.4403C231.8 39.4514 231.603 38.39 231.603 37.256C231.603 35.7458 231.935 34.3861 232.6 33.1769C233.27 31.9623 234.193 30.9922 235.371 30.2667C236.549 29.5411 237.888 29.1784 239.39 29.1784C240.827 29.1784 242.094 29.5062 243.19 30.1619C244.287 30.8175 245.108 31.7097 245.654 32.8383L244.163 33.322C243.698 32.4567 243.034 31.7769 242.169 31.2824C241.31 30.788 240.362 30.5408 239.325 30.5408C238.169 30.5408 237.124 30.8337 236.189 31.4195C235.26 32.0053 234.515 32.8087 233.953 33.8299C233.397 34.8456 233.118 35.9877 233.118 37.256C233.118 38.5082 233.402 39.661 233.969 40.7144C234.542 41.7624 235.298 42.5954 236.238 43.2135C237.183 43.8262 238.223 44.1325 239.358 44.1325C240.087 44.1325 240.8 43.9954 241.497 43.7213C242.199 43.4473 242.81 43.0899 243.328 42.6492C243.847 42.2031 244.187 41.7275 244.349 41.2223L245.84 41.6495C245.575 42.3966 245.116 43.0576 244.462 43.6327C243.814 44.2077 243.058 44.6619 242.194 44.9951C241.335 45.3283 240.408 45.4949 239.414 45.4949ZM255.84 45.4949C254.727 45.4949 253.693 45.2772 252.737 44.8419C251.786 44.4066 250.96 43.8127 250.257 43.0603C249.56 42.3025 249.015 41.4238 248.621 40.4242C248.226 39.4246 248.029 38.3685 248.029 37.256C248.029 35.7673 248.361 34.4184 249.026 33.2091C249.695 31.9945 250.619 31.0191 251.797 30.2828C252.974 29.5465 254.293 29.1784 255.751 29.1784C257.253 29.1784 258.582 29.5519 259.738 30.2989C260.894 31.046 261.809 32.0295 262.485 33.2494C263.165 34.4694 263.505 35.8049 263.505 37.256C263.505 37.3796 263.505 37.5032 263.505 37.6268C263.505 37.7451 263.497 37.8445 263.481 37.9251H249.609C249.69 39.1182 250.025 40.1985 250.614 41.1658C251.203 42.1332 251.956 42.8937 252.874 43.4473C253.798 44.0008 254.808 44.2776 255.905 44.2776C257.002 44.2776 258.036 43.9954 259.008 43.4311C259.981 42.8668 260.659 42.1413 261.042 41.2545L262.387 41.6173C262.079 42.3643 261.596 43.0307 260.937 43.6166C260.278 44.2024 259.508 44.6619 258.628 44.9951C257.747 45.3283 256.818 45.4949 255.84 45.4949H255.84ZM249.544 36.7481H262.047C261.966 35.5174 261.642 34.4291 261.075 33.4832C260.507 32.532 259.762 31.7849 258.838 31.2421C257.914 30.6939 256.896 30.4198 255.783 30.4198C254.665 30.4198 253.65 30.6939 252.737 31.2421C251.829 31.7849 251.089 32.532 250.517 33.4832C249.949 34.4291 249.625 35.5174 249.544 36.7481ZM271.84 45.4949C270.587 45.4949 269.423 45.2826 268.348 44.858C267.273 44.4335 266.33 43.7858 265.52 42.9152L266.217 41.8591C267.086 42.6868 267.967 43.2887 268.858 43.6649C269.755 44.0358 270.73 44.2212 271.783 44.2212C273.139 44.2212 274.238 43.939 275.081 43.3747C275.924 42.8104 276.345 42.0231 276.345 41.0127C276.345 40.3248 276.148 39.7954 275.754 39.4246C275.359 39.0484 274.792 38.7447 274.052 38.5136C273.312 38.2825 272.413 38.0353 271.354 37.7719C270.279 37.4925 269.371 37.2023 268.631 36.9013C267.891 36.595 267.337 36.2 266.97 35.7163C266.608 35.2326 266.427 34.5769 266.427 33.7492C266.427 32.7227 266.687 31.8709 267.205 31.1937C267.724 30.5166 268.423 30.0114 269.304 29.6782C270.184 29.345 271.162 29.1784 272.237 29.1784C273.474 29.1784 274.554 29.3799 275.478 29.783C276.402 30.1861 277.107 30.7208 277.593 31.3872L276.775 32.3546C276.267 31.7097 275.605 31.2314 274.789 30.9197C273.979 30.6079 273.088 30.4521 272.115 30.4521C271.386 30.4521 270.697 30.5542 270.049 30.7584C269.401 30.9573 268.877 31.2851 268.477 31.7419C268.083 32.1934 267.886 32.8007 267.886 33.5638C267.886 34.1711 268.032 34.6468 268.323 34.9907C268.62 35.3347 269.063 35.6141 269.652 35.8291C270.241 36.0387 270.97 36.2644 271.84 36.5063C273.077 36.8073 274.141 37.119 275.032 37.4414C275.929 37.7639 276.621 38.1831 277.107 38.699C277.593 39.2096 277.836 39.9297 277.836 40.8595C277.836 42.2945 277.288 43.4258 276.191 44.2534C275.1 45.0811 273.65 45.4949 271.84 45.4949Z"
fill="white"/>
</g> <defs>
<linearGradient id="paint0_linear" x1="7.5972" y1="13.3458" x2="68.3447" y2="28.9704" gradientUnits="userSpaceOnUse">
<stop stop-color="#A2FAA3" />
<stop offset="1" stop-color="#3AAFB9" />
</linearGradient>
<clipPath id="clip0">
<rect width="294" height="78" fill="white" transform="translate(0 -5)" />
</clipPath>
</defs>
</svg>
</div>
<ul class="nav_list">
<li class="nav_list__li">
Resources
</li>
<li class="nav_list__li">
tipsNtricks
</li>
<li class="nav_list__li">
Contact
</li>
</ul>
<div class="my-icon">
<i class="fas fa-search"></i>
</div>
</nav>
To fix it I used another auto margin on the last link in the navbar, which centered it.
:root {
--gray: #34312d;
--white: white;
--bg_color: #f9f9f9;
--black: black;
}
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
nav {
background: var(--gray);
display: flex;
}
.nav_list {
display: flex;
list-style: none;
flex-grow: 1;
margin: 0;
padding: 0 1em;
}
.nav_list__link {
color: var(--white);
text-decoration: none;
}
.nav_list__li {
margin: auto 15px;
border-bottom: 2px solid var(--white);
}
.nav_list__li--logo {
margin: 0;
max-height: 50px;
max-width: 200px;
border-bottom: none;
}
.nav_list__li--first {
margin-left: auto;
}
.nav_list__li--search {
margin-left: auto;
border-bottom: none;
color: var(--white);
}
.nav_list__li--last {
margin-right: auto;
}
<nav>
<ul class="nav_list">
<li class="nav_list__li nav_list__li--logo">
<svg viewBox="0 0 294 73" fill="none" height="auto" width="auto" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path
d="M7.37335 35.9332V30.9334L28.5604 18.7326V24.0602L11.7533 33.4625L28.5604 42.9586V48.2862L7.37335 35.9332ZM31.0307 55.7566L40.306 10.6416H43.4492L34.1998 55.7566H31.0307ZM67.0849 35.9332L45.8979 48.2862V42.9586L62.6792 33.4625L45.8979 24.0602V18.7326L67.0849 30.9334V35.9332Z"
fill="url(#paint0_linear)"
/>
<path
d="M103.894 24.2253H107.246L98.484 44.7111H95.4479L91.4664 35.0639L87.5268 44.7111H84.4907L75.7291 24.2253H79.0489L86.1401 41.2933L89.4598 32.9004L85.9825 24.2671H89.0186L91.4664 30.7787L93.9141 24.2671H96.9502L93.5149 32.9004L96.8347 41.2933L103.894 24.2253ZM121.796 35.4507C122.924 35.6318 123.894 36.0429 124.706 36.684C125.526 37.325 126.159 38.1368 126.608 39.1193C127.056 40.1018 127.28 41.2062 127.28 42.4325C127.28 44.0282 126.891 45.4322 126.114 46.6447C125.336 47.864 124.237 48.8082 122.815 49.4771C121.4 50.146 119.748 50.4805 117.857 50.4805C115.853 50.4805 114.096 50.1077 112.583 49.3621C111.077 48.6166 109.9 47.5644 109.053 46.2057L111.385 43.8854C111.987 44.9305 112.807 45.7667 113.843 46.3938C114.887 47.0279 116.225 47.3449 117.857 47.3449C119.67 47.3449 121.096 46.9303 122.132 46.1012C123.169 45.2789 123.687 44.0561 123.687 42.4325C123.687 40.7881 123.127 39.4746 122.006 38.4922C120.893 37.5097 119.271 37.0185 117.142 37.0185H116.113V34.1128H117.216C119.114 34.1128 120.567 33.6564 121.575 32.7436C122.591 31.8308 123.099 30.6916 123.099 29.3259C123.099 28.3852 122.875 27.6152 122.426 27.016C121.978 26.4167 121.372 25.9673 120.609 25.6677C119.846 25.3611 118.967 25.2078 117.972 25.2078C116.522 25.2078 115.251 25.5179 114.159 26.138C113.073 26.7512 112.226 27.6048 111.616 28.6987L109.494 26.5038C109.963 25.6189 110.639 24.849 111.522 24.194C112.404 23.539 113.43 23.0303 114.6 22.668C115.769 22.2987 117.013 22.114 118.329 22.114C119.982 22.114 121.446 22.4032 122.721 22.9816C123.995 23.5529 124.986 24.3612 125.694 25.4064C126.408 26.4516 126.765 27.6814 126.765 29.0959C126.765 30.1132 126.566 31.0748 126.166 31.9806C125.774 32.8795 125.203 33.639 124.454 34.2592C123.705 34.8723 122.819 35.2695 121.796 35.4507Z"
fill="white"
/>
<path
d="M135.965 45.1886V23.7046H144.943C145.872 23.7046 146.718 23.8954 147.479 24.277C148.241 24.6585 148.9 25.1691 149.456 25.8086C150.013 26.4428 150.448 27.1549 150.761 27.945C151.08 28.7296 151.239 29.5358 151.239 30.3634C151.239 31.4329 151.026 32.4325 150.599 33.3623C150.172 34.2867 149.578 35.0633 148.816 35.6921C148.055 36.3155 147.169 36.6971 146.159 36.8368L151.539 45.1886H149.748L144.514 37.0787H137.521V45.1886H135.965ZM137.521 35.6518H145.089C146.024 35.6518 146.834 35.4019 147.52 34.902C148.211 34.3969 148.743 33.7412 149.116 32.935C149.494 32.1235 149.683 31.2663 149.683 30.3634C149.683 29.4336 149.465 28.5711 149.027 27.7757C148.595 26.9749 148.017 26.3273 147.293 25.8328C146.574 25.3384 145.77 25.0912 144.878 25.0912H137.521V35.6518ZM161.483 45.4949C160.37 45.4949 159.336 45.2772 158.38 44.8419C157.429 44.4066 156.603 43.8127 155.9 43.0603C155.204 42.3025 154.658 41.4238 154.264 40.4242C153.869 39.4246 153.672 38.3685 153.672 37.256C153.672 35.7673 154.004 34.4184 154.669 33.2091C155.339 31.9945 156.262 31.0191 157.44 30.2828C158.618 29.5465 159.936 29.1784 161.394 29.1784C162.896 29.1784 164.225 29.5519 165.381 30.2989C166.537 31.046 167.452 32.0295 168.128 33.2494C168.808 34.4694 169.149 35.8049 169.149 37.256C169.149 37.3796 169.149 37.5032 169.149 37.6268C169.149 37.7451 169.14 37.8445 169.124 37.9251H155.252C155.333 39.1182 155.668 40.1985 156.257 41.1658C156.846 42.1332 157.599 42.8937 158.518 43.4473C159.441 44.0008 160.451 44.2776 161.548 44.2776C162.645 44.2776 163.679 43.9954 164.651 43.4311C165.624 42.8668 166.302 42.1413 166.685 41.2545L168.03 41.6173C167.722 42.3643 167.239 43.0307 166.58 43.6166C165.921 44.2024 165.151 44.6619 164.271 44.9951C163.39 45.3283 162.461 45.4949 161.483 45.4949ZM155.187 36.7481H167.69C167.609 35.5174 167.285 34.4291 166.718 33.4832C166.151 32.532 165.405 31.7849 164.481 31.2421C163.558 30.6939 162.539 30.4198 161.427 30.4198C160.308 30.4198 159.293 30.6939 158.38 31.2421C157.472 31.7849 156.732 32.532 156.16 33.4832C155.592 34.4291 155.268 35.5174 155.187 36.7481ZM177.483 45.4949C176.23 45.4949 175.066 45.2826 173.991 44.858C172.916 44.4335 171.973 43.7858 171.163 42.9152L171.86 41.8591C172.729 42.6868 173.61 43.2887 174.501 43.6649C175.398 44.0358 176.373 44.2212 177.426 44.2212C178.782 44.2212 179.881 43.939 180.724 43.3747C181.567 42.8104 181.988 42.0231 181.988 41.0127C181.988 40.3248 181.791 39.7954 181.397 39.4246C181.002 39.0484 180.435 38.7447 179.695 38.5136C178.955 38.2825 178.056 38.0353 176.997 37.7719C175.922 37.4925 175.014 37.2023 174.274 36.9013C173.534 36.595 172.981 36.2 172.613 35.7163C172.251 35.2326 172.07 34.5769 172.07 33.7492C172.07 32.7227 172.33 31.8709 172.848 31.1937C173.367 30.5166 174.066 30.0114 174.947 29.6782C175.827 29.345 176.805 29.1784 177.88 29.1784C179.117 29.1784 180.197 29.3799 181.121 29.783C182.045 30.1861 182.75 30.7208 183.236 31.3872L182.418 32.3546C181.91 31.7097 181.248 31.2314 180.432 30.9197C179.622 30.6079 178.731 30.4521 177.759 30.4521C177.029 30.4521 176.341 30.5542 175.692 30.7584C175.044 30.9573 174.52 31.2851 174.12 31.7419C173.726 32.1934 173.529 32.8007 173.529 33.5638C173.529 34.1711 173.675 34.6468 173.966 34.9907C174.263 35.3347 174.706 35.6141 175.295 35.8291C175.884 36.0387 176.613 36.2644 177.483 36.5063C178.72 36.8073 179.784 37.119 180.676 37.4414C181.572 37.7639 182.264 38.1831 182.75 38.699C183.236 39.2096 183.479 39.9297 183.479 40.8595C183.479 42.2945 182.931 43.4258 181.834 44.2534C180.743 45.0811 179.293 45.4949 177.483 45.4949ZM193.698 45.4949C192.585 45.4949 191.556 45.2826 190.611 44.858C189.671 44.4335 188.855 43.8423 188.164 43.0845C187.472 42.3267 186.935 41.4534 186.551 40.4645C186.168 39.4756 185.976 38.4384 185.976 37.3527C185.976 36.2403 186.168 35.1949 186.551 34.2168C186.935 33.2387 187.475 32.3734 188.172 31.621C188.874 30.8632 189.695 30.2667 190.635 29.8313C191.581 29.396 192.602 29.1784 193.698 29.1784C194.795 29.1784 195.808 29.396 196.737 29.8313C197.671 30.2667 198.492 30.8632 199.2 31.621C199.913 32.3734 200.461 33.2387 200.845 34.2168C201.234 35.1949 201.428 36.2403 201.428 37.3527C201.428 38.4384 201.234 39.4756 200.845 40.4645C200.461 41.4534 199.918 42.3267 199.216 43.0845C198.519 43.8423 197.698 44.4335 196.753 44.858C195.813 45.2826 194.795 45.4949 193.698 45.4949ZM187.491 37.4092C187.491 38.6399 187.77 39.7658 188.326 40.787C188.888 41.8027 189.633 42.6142 190.562 43.2215C191.497 43.8288 192.531 44.1325 193.666 44.1325C194.806 44.1325 195.845 43.8262 196.785 43.2135C197.731 42.5954 198.482 41.7678 199.038 40.7305C199.594 39.6879 199.873 38.5512 199.873 37.3205C199.873 36.0898 199.594 34.9612 199.038 33.9347C198.482 32.9028 197.731 32.0805 196.785 31.4678C195.845 30.8498 194.816 30.5408 193.698 30.5408C192.564 30.5408 191.529 30.8552 190.595 31.484C189.666 32.1074 188.915 32.935 188.342 33.9669C187.775 34.9934 187.491 36.1408 187.491 37.4092ZM204.924 38.5297V29.4525H206.447V38.3201C206.447 40.2764 206.776 41.7355 207.436 42.6975C208.095 43.6542 209.094 44.1325 210.434 44.1325C211.325 44.1325 212.181 43.9363 213.002 43.544C213.823 43.1463 214.547 42.59 215.174 41.8753C215.806 41.1605 216.273 40.3274 216.576 39.3762V29.4525H218.099V43.1893C218.099 43.4311 218.153 43.6139 218.261 43.7375C218.374 43.8557 218.531 43.9256 218.731 43.9471V45.1886C218.531 45.21 218.374 45.2208 218.261 45.2208C218.153 45.2208 218.058 45.21 217.977 45.1886C217.632 45.1456 217.345 45.0005 217.118 44.7532C216.897 44.5006 216.775 44.1916 216.754 43.8262L216.729 41.4641C216.038 42.7163 215.087 43.7025 213.877 44.4227C212.673 45.1375 211.371 45.4949 209.972 45.4949C208.308 45.4949 207.049 44.9091 206.196 43.7375C205.348 42.5659 204.924 40.83 204.924 38.5297H204.924ZM230.412 30.8149C228.997 30.8525 227.754 31.2717 226.685 32.0725C225.62 32.8679 224.878 33.9615 224.456 35.3535V45.1886H222.933V29.4525H224.392V33.322C224.937 32.2149 225.666 31.3147 226.579 30.6214C227.492 29.9227 228.456 29.5223 229.472 29.4202C229.672 29.3987 229.853 29.388 230.015 29.388C230.182 29.388 230.315 29.388 230.412 29.388V30.8149ZM239.414 45.4949C238.323 45.4949 237.3 45.2772 236.343 44.8419C235.393 44.4066 234.561 43.8127 233.848 43.0603C233.14 42.3025 232.589 41.4292 232.195 40.4403C231.8 39.4514 231.603 38.39 231.603 37.256C231.603 35.7458 231.935 34.3861 232.6 33.1769C233.27 31.9623 234.193 30.9922 235.371 30.2667C236.549 29.5411 237.888 29.1784 239.39 29.1784C240.827 29.1784 242.094 29.5062 243.19 30.1619C244.287 30.8175 245.108 31.7097 245.654 32.8383L244.163 33.322C243.698 32.4567 243.034 31.7769 242.169 31.2824C241.31 30.788 240.362 30.5408 239.325 30.5408C238.169 30.5408 237.124 30.8337 236.189 31.4195C235.26 32.0053 234.515 32.8087 233.953 33.8299C233.397 34.8456 233.118 35.9877 233.118 37.256C233.118 38.5082 233.402 39.661 233.969 40.7144C234.542 41.7624 235.298 42.5954 236.238 43.2135C237.183 43.8262 238.223 44.1325 239.358 44.1325C240.087 44.1325 240.8 43.9954 241.497 43.7213C242.199 43.4473 242.81 43.0899 243.328 42.6492C243.847 42.2031 244.187 41.7275 244.349 41.2223L245.84 41.6495C245.575 42.3966 245.116 43.0576 244.462 43.6327C243.814 44.2077 243.058 44.6619 242.194 44.9951C241.335 45.3283 240.408 45.4949 239.414 45.4949ZM255.84 45.4949C254.727 45.4949 253.693 45.2772 252.737 44.8419C251.786 44.4066 250.96 43.8127 250.257 43.0603C249.56 42.3025 249.015 41.4238 248.621 40.4242C248.226 39.4246 248.029 38.3685 248.029 37.256C248.029 35.7673 248.361 34.4184 249.026 33.2091C249.695 31.9945 250.619 31.0191 251.797 30.2828C252.974 29.5465 254.293 29.1784 255.751 29.1784C257.253 29.1784 258.582 29.5519 259.738 30.2989C260.894 31.046 261.809 32.0295 262.485 33.2494C263.165 34.4694 263.505 35.8049 263.505 37.256C263.505 37.3796 263.505 37.5032 263.505 37.6268C263.505 37.7451 263.497 37.8445 263.481 37.9251H249.609C249.69 39.1182 250.025 40.1985 250.614 41.1658C251.203 42.1332 251.956 42.8937 252.874 43.4473C253.798 44.0008 254.808 44.2776 255.905 44.2776C257.002 44.2776 258.036 43.9954 259.008 43.4311C259.981 42.8668 260.659 42.1413 261.042 41.2545L262.387 41.6173C262.079 42.3643 261.596 43.0307 260.937 43.6166C260.278 44.2024 259.508 44.6619 258.628 44.9951C257.747 45.3283 256.818 45.4949 255.84 45.4949H255.84ZM249.544 36.7481H262.047C261.966 35.5174 261.642 34.4291 261.075 33.4832C260.507 32.532 259.762 31.7849 258.838 31.2421C257.914 30.6939 256.896 30.4198 255.783 30.4198C254.665 30.4198 253.65 30.6939 252.737 31.2421C251.829 31.7849 251.089 32.532 250.517 33.4832C249.949 34.4291 249.625 35.5174 249.544 36.7481ZM271.84 45.4949C270.587 45.4949 269.423 45.2826 268.348 44.858C267.273 44.4335 266.33 43.7858 265.52 42.9152L266.217 41.8591C267.086 42.6868 267.967 43.2887 268.858 43.6649C269.755 44.0358 270.73 44.2212 271.783 44.2212C273.139 44.2212 274.238 43.939 275.081 43.3747C275.924 42.8104 276.345 42.0231 276.345 41.0127C276.345 40.3248 276.148 39.7954 275.754 39.4246C275.359 39.0484 274.792 38.7447 274.052 38.5136C273.312 38.2825 272.413 38.0353 271.354 37.7719C270.279 37.4925 269.371 37.2023 268.631 36.9013C267.891 36.595 267.337 36.2 266.97 35.7163C266.608 35.2326 266.427 34.5769 266.427 33.7492C266.427 32.7227 266.687 31.8709 267.205 31.1937C267.724 30.5166 268.423 30.0114 269.304 29.6782C270.184 29.345 271.162 29.1784 272.237 29.1784C273.474 29.1784 274.554 29.3799 275.478 29.783C276.402 30.1861 277.107 30.7208 277.593 31.3872L276.775 32.3546C276.267 31.7097 275.605 31.2314 274.789 30.9197C273.979 30.6079 273.088 30.4521 272.115 30.4521C271.386 30.4521 270.697 30.5542 270.049 30.7584C269.401 30.9573 268.877 31.2851 268.477 31.7419C268.083 32.1934 267.886 32.8007 267.886 33.5638C267.886 34.1711 268.032 34.6468 268.323 34.9907C268.62 35.3347 269.063 35.6141 269.652 35.8291C270.241 36.0387 270.97 36.2644 271.84 36.5063C273.077 36.8073 274.141 37.119 275.032 37.4414C275.929 37.7639 276.621 38.1831 277.107 38.699C277.593 39.2096 277.836 39.9297 277.836 40.8595C277.836 42.2945 277.288 43.4258 276.191 44.2534C275.1 45.0811 273.65 45.4949 271.84 45.4949Z"
fill="white"
/>
</g>
<defs>
<linearGradient
id="paint0_linear"
x1="7.5972"
y1="13.3458"
x2="68.3447"
y2="28.9704"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#A2FAA3" />
<stop offset="1" stop-color="#3AAFB9" />
</linearGradient>
<clipPath id="clip0">
<rect
width="294"
height="78"
fill="white"
transform="translate(0 -5)"
/>
</clipPath>
</defs>
</svg>
</li>
<li class="nav_list__li nav_list__li--first">
Resources
</li>
<li class="nav_list__li">
tipsNtricks
</li>
<li class="nav_list__li nav_list__li--last">
Contact
</li>
<li class="nav_list__li nav_list__li--search">
<i class="fas fa-search"></i>
</li>
</ul>
</nav>
Related
Would span tags on each letter, syllable or word, on thousands of words slow a site?
A site has a very long text, say thousands of words, and each word, or letter or syllable is enclosed in a span tag. Will this slow the site noticeably, is there any possible negative effect of such an amount of tags ? Would this change if the tags have id's or classes? The case-scenario is some sort of karaoke-like text highlighting, on a long text. Thanks
Not so you would notice.
Here I even do it after the fact so it loads quicker
https://jsfiddle.net/mplungjan/n3bgjukr/
Using script:
document.querySelectorAll("p")
.forEach(p => p.innerHTML = p
.textContent
.trim()
.split(' ')
.map(word => `<span>${word}</span>`)
.join(" "));
Result
span {
text-decoration: underline;
}
<div id="Inner">
<h1>Lorem Ipsum</h1>
<h4>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
<h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
<hr>
<div id="Content">
<div class="boxed">
<div id="lipsum">
<p><span>Lorem</span> <span>ipsum</span> <span>dolor</span> <span>sit</span> <span>amet,</span> <span>consectetur</span> <span>adipiscing</span> <span>elit.</span> <span>Praesent</span> <span>eros</span> <span>purus,</span> <span>accumsan</span> <span>nec</span> <span>convallis</span> <span>a,</span> <span>maximus</span> <span>vitae</span> <span>justo.</span> <span>Integer</span> <span>volutpat</span> <span>nibh</span> <span>eu</span> <span>nulla</span> <span>dictum,</span> <span>at</span> <span>consectetur</span> <span>lorem</span> <span>blandit.</span> <span>Pellentesque</span> <span>at</span> <span>ligula</span> <span>sit</span> <span>amet</span> <span>ante</span> <span>varius</span> <span>efficitur</span> <span>eu</span> <span>et</span> <span>sem.</span> <span>Praesent</span> <span>in</span> <span>dui</span> <span>nec</span> <span>nunc</span> <span>tempor</span> <span>vehicula.</span> <span>Morbi</span> <span>quis</span> <span>semper</span> <span>dui.</span> <span>Phasellus</span> <span>suscipit</span> <span>purus</span> <span>nec</span> <span>nunc</span> <span>mattis,</span> <span>vitae</span> <span>placerat</span> <span>mauris</span> <span>fermentum.</span> <span>Proin</span> <span>et</span> <span>ante</span> <span>mattis,</span> <span>tempor</span> <span>turpis</span> <span>at,</span> <span>semper</span> <span>augue.</span> <span>Suspendisse</span> <span>placerat,</span> <span>tellus</span> <span>vitae</span> <span>iaculis</span> <span>viverra,</span> <span>enim</span> <span>sem</span> <span>tincidunt</span> <span>nunc,</span> <span>a</span> <span>tristique</span> <span>ex</span> <span>dui</span> <span>ac</span> <span>lectus.</span></p>
<p><span>In</span> <span>hac</span> <span>habitasse</span> <span>platea</span> <span>dictumst.</span> <span>Cras</span> <span>dignissim</span> <span>enim</span> <span>ut</span> <span>fringilla</span> <span>dapibus.</span> <span>Donec</span> <span>posuere</span> <span>elementum</span> <span>enim,</span> <span>vitae</span> <span>tincidunt</span> <span>orci</span> <span>sagittis</span> <span>et.</span> <span>Integer</span> <span>sagittis</span> <span>egestas</span> <span>sagittis.</span> <span>Donec</span> <span>a</span> <span>nisi</span> <span>enim.</span> <span>Aenean</span> <span>tempus</span> <span>non</span> <span>lacus</span> <span>at</span> <span>varius.</span> <span>Maecenas</span> <span>vel</span> <span>magna</span> <span>eu</span> <span>lorem</span> <span>blandit</span> <span>dictum.</span> <span>Class</span> <span>aptent</span> <span>taciti</span> <span>sociosqu</span> <span>ad</span> <span>litora</span> <span>torquent</span> <span>per</span> <span>conubia</span> <span>nostra,</span> <span>per</span> <span>inceptos</span> <span>himenaeos.</span> <span>Nunc</span> <span>tincidunt</span> <span>orci</span> <span>ac</span> <span>tortor</span> <span>porta,</span> <span>id</span> <span>molestie</span> <span>justo</span> <span>blandit.</span></p>
<p><span>Nunc</span> <span>sit</span> <span>amet</span> <span>interdum</span> <span>nisl,</span> <span>a</span> <span>porttitor</span> <span>sem.</span> <span>Etiam</span> <span>posuere</span> <span>mollis</span> <span>nisi,</span> <span>non</span> <span>cursus</span> <span>lectus</span> <span>maximus</span> <span>in.</span> <span>Aliquam</span> <span>in</span> <span>tempor</span> <span>odio.</span> <span>Curabitur</span> <span>neque</span> <span>justo,</span> <span>hendrerit</span> <span>et</span> <span>iaculis</span> <span>et,</span> <span>ultrices</span> <span>id</span> <span>mi.</span> <span>Curabitur</span> <span>eu</span> <span>lacinia</span> <span>orci.</span> <span>Nullam</span> <span>dui</span> <span>magna,</span> <span>faucibus</span> <span>id</span> <span>augue</span> <span>at,</span> <span>molestie</span> <span>vehicula</span> <span>nulla.</span> <span>Nullam</span> <span>ultricies</span> <span>ipsum</span> <span>quis</span> <span>sapien</span> <span>viverra,</span> <span>et</span> <span>suscipit</span> <span>erat</span> <span>pretium.</span> <span>Nam</span> <span>sollicitudin</span> <span>diam</span> <span>facilisis,</span> <span>dapibus</span> <span>neque</span> <span>a,</span> <span>iaculis</span> <span>libero.</span></p>
<p><span>Quisque</span> <span>sed</span> <span>dolor</span> <span>sit</span> <span>amet</span> <span>felis</span> <span>finibus</span> <span>tempor.</span> <span>In</span> <span>a</span> <span>ornare</span> <span>felis.</span> <span>Donec</span> <span>at</span> <span>augue</span> <span>at</span> <span>magna</span> <span>pulvinar</span> <span>tincidunt.</span> <span>Fusce</span> <span>non</span> <span>odio</span> <span>tempus,</span> <span>porttitor</span> <span>felis</span> <span>vitae,</span> <span>feugiat</span> <span>quam.</span> <span>Duis</span> <span>lacus</span> <span>leo,</span> <span>elementum</span> <span>aliquam</span> <span>elementum</span> <span>ut,</span> <span>suscipit</span> <span>ac</span> <span>mi.</span> <span>Maecenas</span> <span>augue</span> <span>nulla,</span> <span>laoreet</span> <span>sed</span> <span>porta</span> <span>vel,</span> <span>efficitur</span> <span>et</span> <span>neque.</span> <span>Praesent</span> <span>placerat</span> <span>tincidunt</span> <span>ex,</span> <span>non</span> <span>convallis</span> <span>neque</span> <span>pulvinar</span> <span>nec.</span> <span>Nulla</span> <span>commodo</span> <span>vel</span> <span>urna</span> <span>vitae</span> <span>vestibulum.</span> <span>Fusce</span> <span>euismod</span> <span>ex</span> <span>ut</span> <span>ex</span> <span>ultrices</span> <span>tempor.</span> <span>Pellentesque</span> <span>vulputate</span> <span>fringilla</span> <span>metus.</span> <span>Suspendisse</span> <span>sagittis</span> <span>cursus</span> <span>mi,</span> <span>rhoncus</span> <span>feugiat</span> <span>urna</span> <span>convallis</span> <span>et.</span></p>
<p><span>Nullam</span> <span>auctor</span> <span>condimentum</span> <span>quam,</span> <span>at</span> <span>ultrices</span> <span>magna</span> <span>placerat</span> <span>ultrices.</span> <span>Etiam</span> <span>rhoncus</span> <span>mauris</span> <span>vitae</span> <span>felis</span> <span>suscipit</span> <span>venenatis.</span> <span>Vivamus</span> <span>ac</span> <span>feugiat</span> <span>ex,</span> <span>et</span> <span>faucibus</span> <span>mi.</span> <span>Ut</span> <span>sollicitudin</span> <span>justo</span> <span>dolor,</span> <span>vitae</span> <span>euismod</span> <span>odio</span> <span>lobortis</span> <span>vitae.</span> <span>Praesent</span> <span>sed</span> <span>accumsan</span> <span>nibh.</span> <span>Pellentesque</span> <span>lobortis</span> <span>felis</span> <span>elit,</span> <span>ut</span> <span>auctor</span> <span>odio</span> <span>mollis</span> <span>ac.</span> <span>In</span> <span>et</span> <span>vehicula</span> <span>ipsum.</span> <span>Maecenas</span> <span>ac</span> <span>venenatis</span> <span>lorem,</span> <span>auctor</span> <span>pellentesque</span> <span>nulla.</span> <span>Ut</span> <span>volutpat</span> <span>nisi</span> <span>imperdiet</span> <span>felis</span> <span>tristique,</span> <span>eu</span> <span>semper</span> <span>tellus</span> <span>posuere.</span> <span>Nam</span> <span>efficitur</span> <span>condimentum</span> <span>tellus</span> <span>vel</span> <span>bibendum.</span> <span>Interdum</span> <span>et</span> <span>malesuada</span> <span>fames</span> <span>ac</span> <span>ante</span> <span>ipsum</span> <span>primis</span> <span>in</span> <span>faucibus.</span> <span>Suspendisse</span> <span>venenatis</span> <span>vestibulum</span> <span>elit,</span> <span>vel</span> <span>volutpat</span> <span>nunc</span> <span>ultrices</span> <span>sit</span> <span>amet.</span></p>
<p><span>Duis</span> <span>feugiat,</span> <span>justo</span> <span>eu</span> <span>molestie</span> <span>scelerisque,</span> <span>risus</span> <span>ipsum</span> <span>elementum</span> <span>nulla,</span> <span>vitae</span> <span>posuere</span> <span>sem</span> <span>elit</span> <span>non</span> <span>sem.</span> <span>Curabitur</span> <span>elementum</span> <span>massa</span> <span>non</span> <span>lectus</span> <span>ullamcorper,</span> <span>id</span> <span>pharetra</span> <span>sem</span> <span>ultricies.</span> <span>Nulla</span> <span>sodales</span> <span>ex</span> <span>felis,</span> <span>nec</span> <span>consequat</span> <span>elit</span> <span>ultrices</span> <span>et.</span> <span>Curabitur</span> <span>fringilla</span> <span>eleifend</span> <span>sollicitudin.</span> <span>Sed</span> <span>porta</span> <span>neque</span> <span>nec</span> <span>lacus</span> <span>volutpat,</span> <span>vehicula</span> <span>ultricies</span> <span>augue</span> <span>pellentesque.</span> <span>Fusce</span> <span>hendrerit</span> <span>euismod</span> <span>erat,</span> <span>at</span> <span>bibendum</span> <span>metus</span> <span>lobortis</span> <span>id.</span> <span>Ut</span> <span>dapibus</span> <span>consectetur</span> <span>orci</span> <span>semper</span> <span>eleifend.</span> <span>Donec</span> <span>placerat</span> <span>accumsan</span> <span>urna,</span> <span>ac</span> <span>malesuada</span> <span>felis</span> <span>varius</span> <span>non.</span> <span>Cras</span> <span>molestie</span> <span>cursus</span> <span>lorem</span> <span>ut</span> <span>facilisis.</span> <span>Aenean</span> <span>a</span> <span>felis</span> <span>felis.</span> <span>Ut</span> <span>gravida</span> <span>lacinia</span> <span>congue.</span> <span>Curabitur</span> <span>eget</span> <span>facilisis</span> <span>quam.</span> <span>Curabitur</span> <span>at</span> <span>ex</span> <span>non</span> <span>justo</span> <span>lobortis</span> <span>condimentum.</span> <span>Nunc</span> <span>accumsan</span> <span>rutrum</span> <span>feugiat.</span> <span>Morbi</span> <span>vitae</span> <span>erat</span> <span>a</span> <span>mi</span> <span>viverra</span> <span>pellentesque</span> <span>nec</span> <span>vitae</span> <span>mauris.</span> <span>Nullam</span> <span>in</span> <span>eleifend</span> <span>justo.</span></p>
<p><span>In</span> <span>hac</span> <span>habitasse</span> <span>platea</span> <span>dictumst.</span> <span>Duis</span> <span>orci</span> <span>elit,</span> <span>faucibus</span> <span>ut</span> <span>nunc</span> <span>non,</span> <span>consectetur</span> <span>interdum</span> <span>dui.</span> <span>Aenean</span> <span>quis</span> <span>massa</span> <span>erat.</span> <span>Orci</span> <span>varius</span> <span>natoque</span> <span>penatibus</span> <span>et</span> <span>magnis</span> <span>dis</span> <span>parturient</span> <span>montes,</span> <span>nascetur</span> <span>ridiculus</span> <span>mus.</span> <span>Suspendisse</span> <span>porttitor,</span> <span>ante</span> <span>non</span> <span>varius</span> <span>rhoncus,</span> <span>neque</span> <span>ante</span> <span>tincidunt</span> <span>ligula,</span> <span>sed</span> <span>pretium</span> <span>nisl</span> <span>turpis</span> <span>a</span> <span>magna.</span> <span>Suspendisse</span> <span>non</span> <span>tempor</span> <span>felis,</span> <span>et</span> <span>rhoncus</span> <span>magna.</span> <span>Ut</span> <span>vehicula</span> <span>odio</span> <span>vel</span> <span>elit</span> <span>sollicitudin</span> <span>porta.</span></p>
<p><span>Curabitur</span> <span>ac</span> <span>mattis</span> <span>lectus.</span> <span>Aenean</span> <span>viverra</span> <span>porttitor</span> <span>lorem,</span> <span>id</span> <span>laoreet</span> <span>elit</span> <span>elementum</span> <span>nec.</span> <span>Donec</span> <span>gravida</span> <span>leo</span> <span>non</span> <span>mi</span> <span>auctor,</span> <span>vel</span> <span>tincidunt</span> <span>odio</span> <span>tincidunt.</span> <span>Fusce</span> <span>eu</span> <span>facilisis</span> <span>diam,</span> <span>non</span> <span>posuere</span> <span>orci.</span> <span>Vestibulum</span> <span>lacinia,</span> <span>nisl</span> <span>eget</span> <span>aliquet</span> <span>consequat,</span> <span>lorem</span> <span>odio</span> <span>pellentesque</span> <span>quam,</span> <span>id</span> <span>hendrerit</span> <span>ipsum</span> <span>nulla</span> <span>in</span> <span>ipsum.</span> <span>Vestibulum</span> <span>ante</span> <span>ipsum</span> <span>primis</span> <span>in</span> <span>faucibus</span> <span>orci</span> <span>luctus</span> <span>et</span> <span>ultrices</span> <span>posuere</span> <span>cubilia</span> <span>curae;</span> <span>Nulla</span> <span>a</span> <span>nisi</span> <span>finibus,</span> <span>tempor</span> <span>risus</span> <span>ut,</span> <span>ultricies</span> <span>lacus.</span> <span>Suspendisse</span> <span>tincidunt</span> <span>varius</span> <span>arcu,</span> <span>eu</span> <span>dapibus</span> <span>enim</span> <span>tincidunt</span> <span>eget.</span> <span>Sed</span> <span>condimentum</span> <span>massa</span> <span>at</span> <span>purus</span> <span>scelerisque</span> <span>hendrerit.</span></p>
<p><span>Nunc</span> <span>vel</span> <span>enim</span> <span>congue</span> <span>ex</span> <span>aliquet</span> <span>pulvinar</span> <span>eget</span> <span>vel</span> <span>elit.</span> <span>Nullam</span> <span>finibus</span> <span>fermentum</span> <span>mollis.</span> <span>Donec</span> <span>fermentum</span> <span>feugiat</span> <span>nisl</span> <span>et</span> <span>hendrerit.</span> <span>Proin</span> <span>suscipit</span> <span>felis</span> <span>orci.</span> <span>Integer</span> <span>aliquet</span> <span>orci</span> <span>sit</span> <span>amet</span> <span>augue</span> <span>condimentum</span> <span>cursus.</span> <span>Morbi</span> <span>vehicula,</span> <span>nibh</span> <span>sodales</span> <span>gravida</span> <span>faucibus,</span> <span>leo</span> <span>nulla</span> <span>ullamcorper</span> <span>enim,</span> <span>at</span> <span>lacinia</span> <span>neque</span> <span>nisl</span> <span>finibus</span> <span>tortor.</span> <span>Sed</span> <span>volutpat</span> <span>odio</span> <span>ut</span> <span>ultrices</span> <span>lobortis.</span> <span>Pellentesque</span> <span>at</span> <span>volutpat</span> <span>justo.</span> <span>Praesent</span> <span>nec</span> <span>metus</span> <span>sit</span> <span>amet</span> <span>velit</span> <span>aliquet</span> <span>volutpat.</span> <span>Nam</span> <span>tempus</span> <span>luctus</span> <span>justo</span> <span>eu</span> <span>tincidunt.</span> <span>Vivamus</span> <span>commodo</span> <span>enim</span> <span>enim,</span> <span>vel</span> <span>varius</span> <span>leo</span> <span>interdum</span> <span>sit</span> <span>amet.</span></p>
<p><span>Pellentesque</span> <span>eu</span> <span>accumsan</span> <span>nunc.</span> <span>Sed</span> <span>ultrices</span> <span>elementum</span> <span>finibus.</span> <span>Aenean</span> <span>non</span> <span>turpis</span> <span>viverra,</span> <span>faucibus</span> <span>libero</span> <span>vulputate,</span> <span>semper</span> <span>nibh.</span> <span>Maecenas</span> <span>efficitur</span> <span>volutpat</span> <span>lectus</span> <span>facilisis</span> <span>hendrerit.</span> <span>Cras</span> <span>a</span> <span>dui</span> <span>tincidunt,</span> <span>elementum</span> <span>nisl</span> <span>sit</span> <span>amet,</span> <span>condimentum</span> <span>dui.</span> <span>Donec</span> <span>pulvinar</span> <span>nisi</span> <span>quis</span> <span>ullamcorper</span> <span>semper.</span> <span>Praesent</span> <span>in</span> <span>ultricies</span> <span>mi,</span> <span>quis</span> <span>lacinia</span> <span>tellus.</span> <span>Morbi</span> <span>rutrum</span> <span>dui</span> <span>sed</span> <span>mauris</span> <span>tincidunt,</span> <span>et</span> <span>pulvinar</span> <span>libero</span> <span>euismod.</span> <span>Aliquam</span> <span>molestie</span> <span>eu</span> <span>nisi</span> <span>eget</span> <span>elementum.</span> <span>Vestibulum</span> <span>a</span> <span>malesuada</span> <span>dolor.</span> <span>Nullam</span> <span>vulputate</span> <span>est</span> <span>suscipit</span> <span>nulla</span> <span>sagittis</span> <span>ornare.</span> <span>Aliquam</span> <span>ac</span> <span>ante</span> <span>in</span> <span>odio</span> <span>consectetur</span> <span>pharetra.</span></p>
<p><span>Nulla</span> <span>eget</span> <span>ipsum</span> <span>quis</span> <span>velit</span> <span>maximus</span> <span>hendrerit</span> <span>sit</span> <span>amet</span> <span>eu</span> <span>ex.</span> <span>Nullam</span> <span>ultrices</span> <span>nulla</span> <span>vitae</span> <span>ante</span> <span>pharetra,</span> <span>quis</span> <span>tristique</span> <span>dui</span> <span>gravida.</span> <span>Curabitur</span> <span>quam</span> <span>sem,</span> <span>hendrerit</span> <span>a</span> <span>ligula</span> <span>in,</span> <span>posuere</span> <span>tincidunt</span> <span>orci.</span> <span>Integer</span> <span>imperdiet</span> <span>convallis</span> <span>hendrerit.</span> <span>Pellentesque</span> <span>porttitor</span> <span>aliquet</span> <span>lacus</span> <span>vitae</span> <span>commodo.</span> <span>Vestibulum</span> <span>a</span> <span>lacinia</span> <span>risus.</span> <span>Integer</span> <span>at</span> <span>laoreet</span> <span>mi.</span> <span>Morbi</span> <span>sed</span> <span>ante</span> <span>finibus,</span> <span>sodales</span> <span>tortor</span> <span>sed,</span> <span>consectetur</span> <span>sem.</span> <span>Maecenas</span> <span>turpis</span> <span>massa,</span> <span>sagittis</span> <span>a</span> <span>nunc</span> <span>nec,</span> <span>feugiat</span> <span>venenatis</span> <span>odio.</span> <span>Ut</span> <span>congue</span> <span>efficitur</span> <span>magna.</span></p>
<p><span>Maecenas</span> <span>sed</span> <span>ornare</span> <span>sapien.</span> <span>Nullam</span> <span>accumsan</span> <span>dui</span> <span>in</span> <span>tincidunt</span> <span>pulvinar.</span> <span>Aliquam</span> <span>aliquam</span> <span>ante</span> <span>ex,</span> <span>ut</span> <span>accumsan</span> <span>tellus</span> <span>tempor</span> <span>vitae.</span> <span>Aliquam</span> <span>pharetra,</span> <span>urna</span> <span>pretium</span> <span>facilisis</span> <span>lacinia,</span> <span>metus</span> <span>risus</span> <span>luctus</span> <span>purus,</span> <span>eget</span> <span>fermentum</span> <span>metus</span> <span>tortor</span> <span>sed</span> <span>turpis.</span> <span>Cras</span> <span>scelerisque</span> <span>rhoncus</span> <span>dolor,</span> <span>eu</span> <span>faucibus</span> <span>elit</span> <span>vehicula</span> <span>eget.</span> <span>Nunc</span> <span>lobortis</span> <span>ligula</span> <span>leo,</span> <span>et</span> <span>ultricies</span> <span>magna</span> <span>scelerisque</span> <span>et.</span> <span>Ut</span> <span>mattis</span> <span>dapibus</span> <span>lacus</span> <span>eu</span> <span>maximus.</span> <span>Vestibulum</span> <span>vitae</span> <span>malesuada</span> <span>dui,</span> <span>eget</span> <span>eleifend</span> <span>lorem.</span> <span>Proin</span> <span>at</span> <span>luctus</span> <span>odio,</span> <span>a</span> <span>faucibus</span> <span>quam.</span> <span>Vivamus</span> <span>felis</span> <span>justo,</span> <span>consequat</span> <span>non</span> <span>lacinia</span> <span>ac,</span> <span>dictum</span> <span>sed</span> <span>nulla.</span> <span>Etiam</span> <span>porttitor</span> <span>orci</span> <span>a</span> <span>nibh</span> <span>pharetra,</span> <span>non</span> <span>pellentesque</span> <span>velit</span> <span>venenatis.</span> <span>Integer</span> <span>a</span> <span>sapien</span> <span>vitae</span> <span>tellus</span> <span>varius</span> <span>rutrum.</span> <span>Mauris</span> <span>ornare</span> <span>nisi</span> <span>leo,</span> <span>et</span> <span>varius</span> <span>neque</span> <span>scelerisque</span> <span>nec.</span> <span>Nulla</span> <span>venenatis</span> <span>velit</span> <span>at</span> <span>mollis</span> <span>tempor.</span> <span>Phasellus</span> <span>ex.</span></p>
</div>
<div id="generated">Generated 12 paragraphs, 1000 words, 6815 bytes of Lorem Ipsum</div>
</div>
</div>
</div>
Animate SVG path color
I have an app that create animations based on SVG files.. During the animation of "paths".. the color is black but my color fill="#e67700" how can i fix that? <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1338.9181636059818 623.2810362298012" width="2677.8363272119636" height="1246.5620724596024" id="scene0" style="display: none;"> <g transform="translate(10 306.9962735735079) rotate(0 267.00513705514027 -148.49813678675395)" stroke="none"> <path fill="#e67700" d="M -3.11,-5.41 Q -3.11,-5.41 9.63,-12.60 22.38,-19.79 32.35,-25.25 42.32,-30.71 51.46,-35.65 60.60,-40.59 72.50,-47.42 84.41,-54.24 97.54,-61.45 110.67,-68.65 123.18,-75.94 135.69,-83.23 149.83,-92.20 163.96,-101.16 178.85,-110.89 193.73,-120.61 207.13,-129.93 220.53,-139.25 233.19,-147.41 245.85,-155.56 264.37,-166.14 282.90,-176.72 307.28,-190.80 331.66,-204.89 349.58,-214.66 367.51,-224.43 394.65,-236.71 421.79,-248.99 444.46,-260.27 467.13,-271.56 481.37,-278.78 495.60,-286.00 505.06,-290.23 514.51,-294.45 518.94,-297.01 523.37,-299.56 526.76,-301.10 530.14,-302.64 531.20,-302.86 532.25,-303.08 533.32,-302.96 534.39,-302.83 535.37,-302.37 536.34,-301.91 537.12,-301.16 537.89,-300.41 538.39,-299.45 538.88,-298.49 539.05,-297.43 539.21,-296.36 539.03,-295.30 538.84,-294.24 538.33,-293.29 537.82,-292.35 537.03,-291.61 536.24,-290.88 535.25,-290.44 534.27,-289.99 533.20,-289.89 532.13,-289.78 531.08,-290.02 530.03,-290.26 529.11,-290.83 528.19,-291.39 527.50,-292.22 526.81,-293.05 526.42,-294.05 526.03,-295.06 525.98,-296.13 525.94,-297.21 526.23,-298.25 526.53,-299.28 527.15,-300.17 527.76,-301.05 528.62,-301.70 529.49,-302.34 530.51,-302.68 531.54,-303.01 532.61,-303.00 533.69,-302.99 534.71,-302.64 535.73,-302.28 536.58,-301.62 537.43,-300.96 538.03,-300.06 538.62,-299.17 538.90,-298.12 539.18,-297.08 539.11,-296.01 539.04,-294.93 538.63,-293.94 538.22,-292.94 537.52,-292.12 536.81,-291.31 535.88,-290.76 534.96,-290.22 534.96,-290.22 534.96,-290.22 531.75,-289.20 528.54,-288.18 523.67,-286.51 518.80,-284.85 509.58,-280.73 500.36,-276.62 486.09,-269.38 471.82,-262.14 448.97,-250.77 426.12,-239.40 399.34,-227.29 372.55,-215.18 354.74,-205.47 336.94,-195.76 312.54,-181.65 288.14,-167.54 269.86,-157.11 251.58,-146.67 239.09,-138.60 226.60,-130.54 213.09,-121.11 199.57,-111.69 184.64,-101.90 169.71,-92.12 155.43,-83.01 141.15,-73.91 128.54,-66.51 115.94,-59.10 102.94,-51.88 89.94,-44.66 77.99,-37.69 66.03,-30.72 56.99,-25.67 47.96,-20.62 38.15,-15.02 28.35,-9.43 15.73,-2.01 3.11,5.41 2.42,5.70 1.73,6.00 0.98,6.12 0.24,6.24 -0.50,6.18 -1.25,6.12 -1.96,5.88 -2.68,5.64 -3.32,5.23 -3.95,4.83 -4.47,4.29 -4.99,3.74 -5.37,3.09 -5.75,2.44 -5.95,1.72 -6.16,0.99 -6.19,0.24 -6.22,-0.50 -6.07,-1.24 -5.92,-1.98 -5.60,-2.66 -5.27,-3.34 -4.80,-3.92 -4.32,-4.51 -3.72,-4.96 -3.11,-5.41 -3.11,-5.41 L -3.11,-5.41 Z" opacity="0"> <animate attributeName="opacity" from="0" to="1" calcMode="discrete" begin="2999ms" dur="1ms" fill="freeze"> </animate> </path> <path> <animate attributeName="d" from="M -3.11,-5.41 Q -3.11,-5.41 9.63,-12.60 22.38,-19.79 32.35,-25.25 42.32,-30.71 51.46,-35.65 60.60,-40.59 72.50,-47.42 84.41,-54.24 97.54,-61.45 110.67,-68.65 123.18,-75.94 135.69,-83.23 149.83,-92.20 163.96,-101.16 178.85,-110.89 193.73,-120.61 207.13,-129.93 220.53,-139.25 233.19,-147.41 245.85,-155.56 264.37,-166.14 282.90,-176.72 307.28,-190.80 331.66,-204.89 349.58,-214.66 367.51,-224.43 394.65,-236.71 421.79,-248.99 444.46,-260.27 467.13,-271.56 481.37,-278.78 495.60,-286.00 505.06,-290.23 514.51,-294.45 518.94,-297.01 523.37,-299.56 527.40,-301.60 531.43,-303.64 532.56,-303.87 533.69,-304.11 534.83,-303.98 535.98,-303.84 537.02,-303.35 538.06,-302.85 538.89,-302.05 539.72,-301.25 540.25,-300.23 540.78,-299.20 540.96,-298.06 541.13,-296.92 540.93,-295.79 540.74,-294.65 540.19,-293.64 539.64,-292.62 538.79,-291.84 537.95,-291.05 536.90,-290.58 535.85,-290.11 534.70,-289.99 533.55,-289.88 532.43,-290.14 531.30,-290.40 530.32,-291.00 529.34,-291.60 528.60,-292.49 527.86,-293.38 527.45,-294.45 527.03,-295.53 526.98,-296.68 526.93,-297.83 527.25,-298.94 527.57,-300.05 528.22,-300.99 528.88,-301.94 529.80,-302.63 530.73,-303.32 531.82,-303.68 532.92,-304.04 534.07,-304.02 535.23,-304.01 536.32,-303.63 537.40,-303.26 538.32,-302.55 539.23,-301.84 539.86,-300.88 540.50,-299.92 540.80,-298.81 541.10,-297.69 541.02,-296.54 540.95,-295.39 540.51,-294.32 540.08,-293.26 539.32,-292.39 538.57,-291.51 537.57,-290.93 536.58,-290.34 536.58,-290.35 536.58,-290.35 532.56,-289.26 528.54,-288.18 523.67,-286.51 518.80,-284.85 509.58,-280.73 500.36,-276.62 486.09,-269.38 471.82,-262.14 448.97,-250.77 426.12,-239.40 399.34,-227.29 372.55,-215.18 354.74,-205.47 336.94,-195.76 312.54,-181.65 288.14,-167.54 269.86,-157.11 251.58,-146.67 239.09,-138.60 226.60,-130.54 213.09,-121.11 199.57,-111.69 184.64,-101.90 169.71,-92.12 155.43,-83.01 141.15,-73.91 128.54,-66.51 115.94,-59.10 102.94,-51.88 89.94,-44.66 77.99,-37.69 66.03,-30.72 56.99,-25.67 47.96,-20.62 38.15,-15.02 28.35,-9.43 15.73,-2.01 3.11,5.41 2.42,5.70 1.73,6.00 0.98,6.12 0.24,6.24 -0.50,6.18 -1.25,6.12 -1.96,5.88 -2.68,5.64 -3.32,5.23 -3.95,4.83 -4.47,4.29 -4.99,3.74 -5.37,3.09 -5.75,2.44 -5.95,1.72 -6.16,0.99 -6.19,0.24 -6.22,-0.50 -6.07,-1.24 -5.92,-1.98 -5.60,-2.66 -5.27,-3.34 -4.80,-3.92 -4.32,-4.51 -3.72,-4.96 -3.11,-5.41 -3.11,-5.41 L -3.11,-5.41 Z" to="M -3.11,-5.41 Q -3.11,-5.41 9.63,-12.60 22.38,-19.79 32.35,-25.25 42.32,-30.71 51.46,-35.65 60.60,-40.59 72.50,-47.42 84.41,-54.24 97.54,-61.45 110.67,-68.65 123.18,-75.94 135.69,-83.23 149.83,-92.20 163.96,-101.16 178.85,-110.89 193.73,-120.61 207.13,-129.93 220.53,-139.25 233.19,-147.41 245.85,-155.56 264.37,-166.14 282.90,-176.72 307.28,-190.80 331.66,-204.89 349.58,-214.66 367.51,-224.43 394.65,-236.71 421.79,-248.99 444.46,-260.27 467.13,-271.56 481.37,-278.78 495.60,-286.00 505.06,-290.23 514.51,-294.45 518.94,-297.01 523.37,-299.56 526.76,-301.10 530.14,-302.64 531.20,-302.86 532.25,-303.08 533.32,-302.96 534.39,-302.83 535.37,-302.37 536.34,-301.91 537.12,-301.16 537.89,-300.41 538.39,-299.45 538.88,-298.49 539.05,-297.43 539.21,-296.36 539.03,-295.30 538.84,-294.24 538.33,-293.29 537.82,-292.35 537.03,-291.61 536.24,-290.88 535.25,-290.44 534.27,-289.99 533.20,-289.89 532.13,-289.78 531.08,-290.02 530.03,-290.26 529.11,-290.83 528.19,-291.39 527.50,-292.22 526.81,-293.05 526.42,-294.05 526.03,-295.06 525.98,-296.13 525.94,-297.21 526.23,-298.25 526.53,-299.28 527.15,-300.17 527.76,-301.05 528.62,-301.70 529.49,-302.34 530.51,-302.68 531.54,-303.01 532.61,-303.00 533.69,-302.99 534.71,-302.64 535.73,-302.28 536.58,-301.62 537.43,-300.96 538.03,-300.06 538.62,-299.17 538.90,-298.12 539.18,-297.08 539.11,-296.01 539.04,-294.93 538.63,-293.94 538.22,-292.94 537.52,-292.12 536.81,-291.31 535.88,-290.76 534.96,-290.22 534.96,-290.22 534.96,-290.22 531.75,-289.20 528.54,-288.18 523.67,-286.51 518.80,-284.85 509.58,-280.73 500.36,-276.62 486.09,-269.38 471.82,-262.14 448.97,-250.77 426.12,-239.40 399.34,-227.29 372.55,-215.18 354.74,-205.47 336.94,-195.76 312.54,-181.65 288.14,-167.54 269.86,-157.11 251.58,-146.67 239.09,-138.60 226.60,-130.54 213.09,-121.11 199.57,-111.69 184.64,-101.90 169.71,-92.12 155.43,-83.01 141.15,-73.91 128.54,-66.51 115.94,-59.10 102.94,-51.88 89.94,-44.66 77.99,-37.69 66.03,-30.72 56.99,-25.67 47.96,-20.62 38.15,-15.02 28.35,-9.43 15.73,-2.01 3.11,5.41 2.42,5.70 1.73,6.00 0.98,6.12 0.24,6.24 -0.50,6.18 -1.25,6.12 -1.96,5.88 -2.68,5.64 -3.32,5.23 -3.95,4.83 -4.47,4.29 -4.99,3.74 -5.37,3.09 -5.75,2.44 -5.95,1.72 -6.16,0.99 -6.19,0.24 -6.22,-0.50 -6.07,-1.24 -5.92,-1.98 -5.60,-2.66 -5.27,-3.34 -4.80,-3.92 -4.32,-4.51 -3.72,-4.96 -3.11,-5.41 -3.11,-5.41 L -3.11,-5.41 Z" begin="2904.7619047619046ms" dur="95.23809523809524ms"></animate> </path> .... </g> </svg> the original path if necessary : <g transform="translate(10 306.9962735735079) rotate(0 267.00513705514027 -148.49813678675395)" stroke="none"><path fill="#e67700" d="M -3.11,-5.41 Q -3.11,-5.41 9.63,-12.60 22.38,-19.79 32.35,-25.25 42.32,-30.71 51.46,-35.65 60.60,-40.59 72.50,-47.42 84.41,-54.24 97.54,-61.45 110.67,-68.65 123.18,-75.94 135.69,-83.23 149.83,-92.20 163.96,-101.16 178.85,-110.89 193.73,-120.61 207.13,-129.93 220.53,-139.25 233.19,-147.41 245.85,-155.56 264.37,-166.14 282.90,-176.72 307.28,-190.80 331.66,-204.89 349.58,-214.66 367.51,-224.43 394.65,-236.71 421.79,-248.99 444.46,-260.27 467.13,-271.56 481.37,-278.78 495.60,-286.00 505.06,-290.23 514.51,-294.45 518.94,-297.01 523.37,-299.56 527.32,-301.81 531.26,-304.06 532.47,-304.32 533.67,-304.57 534.88,-304.42 536.10,-304.28 537.21,-303.75 538.32,-303.23 539.20,-302.38 540.09,-301.52 540.65,-300.43 541.21,-299.34 541.40,-298.13 541.59,-296.92 541.38,-295.71 541.17,-294.50 540.58,-293.42 540.00,-292.34 539.10,-291.51 538.20,-290.67 537.08,-290.17 535.96,-289.66 534.74,-289.54 533.52,-289.42 532.33,-289.70 531.13,-289.97 530.09,-290.62 529.04,-291.26 528.26,-292.20 527.47,-293.14 527.03,-294.29 526.58,-295.43 526.53,-296.66 526.47,-297.88 526.81,-299.06 527.15,-300.24 527.85,-301.25 528.55,-302.26 529.53,-302.99 530.52,-303.73 531.68,-304.11 532.85,-304.49 534.08,-304.47 535.30,-304.46 536.46,-304.06 537.62,-303.66 538.59,-302.91 539.56,-302.15 540.24,-301.13 540.92,-300.11 541.24,-298.92 541.55,-297.74 541.47,-296.51 541.40,-295.29 540.93,-294.15 540.47,-293.02 539.66,-292.09 538.86,-291.16 537.80,-290.54 536.74,-289.92 536.74,-289.92 536.75,-289.92 532.64,-289.05 528.54,-288.18 523.67,-286.51 518.80,-284.85 509.58,-280.73 500.36,-276.62 486.09,-269.38 471.82,-262.14 448.97,-250.77 426.12,-239.40 399.34,-227.29 372.55,-215.18 354.74,-205.47 336.94,-195.76 312.54,-181.65 288.14,-167.54 269.86,-157.11 251.58,-146.67 239.09,-138.60 226.60,-130.54 213.09,-121.11 199.57,-111.69 184.64,-101.90 169.71,-92.12 155.43,-83.01 141.15,-73.91 128.54,-66.51 115.94,-59.10 102.94,-51.88 89.94,-44.66 77.99,-37.69 66.03,-30.72 56.99,-25.67 47.96,-20.62 38.15,-15.02 28.35,-9.43 15.73,-2.01 3.11,5.41 2.42,5.70 1.73,6.00 0.98,6.12 0.24,6.24 -0.50,6.18 -1.25,6.12 -1.96,5.88 -2.68,5.64 -3.32,5.23 -3.95,4.83 -4.47,4.29 -4.99,3.74 -5.37,3.09 -5.75,2.44 -5.95,1.72 -6.16,0.99 -6.19,0.24 -6.22,-0.50 -6.07,-1.24 -5.92,-1.98 -5.60,-2.66 -5.27,-3.34 -4.80,-3.92 -4.32,-4.51 -3.72,-4.96 -3.11,-5.41 -3.11,-5.41 L -3.11,-5.41 Z"></path></g> you can see the problem here: https://jsfiddle.net/mawb/k6guznyp/10/
Add fill atrribute in every path elements.
<!DOCTYPE html>
<html lang="en">
<script>
let index = 0;
let totalScenes = 1
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('scene' + index).style.display = 'block';
document.getElementById('scene' + index).setCurrentTime(0);
});
</script>
<body>
<div id="container">
<div id="slides">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 338.9181636059818 323.2810362298012"
width="477.8363272119636" height="246.5620724596024" id="scene0" style="display: none;">
<g transform="translate(10 306.9962735735079) rotate(0 267.00513705514027 -148.49813678675395)" stroke="none">
<path fill="#e67700"
d="M -3.11,-5.41 Q -3.11,-5.41 9.63,-12.60 22.38,-19.79 32.35,-25.25 42.32,-30.71 51.46,-35.65 60.60,-40.59 72.50,-47.42 84.41,-54.24 97.54,-61.45 110.67,-68.65 123.18,-75.94 135.69,-83.23 149.83,-92.20 163.96,-101.16 178.85,-110.89 193.73,-120.61 207.13,-129.93 220.53,-139.25 233.19,-147.41 245.85,-155.56 264.37,-166.14 282.90,-176.72 307.28,-190.80 331.66,-204.89 349.58,-214.66 367.51,-224.43 394.65,-236.71 421.79,-248.99 444.46,-260.27 467.13,-271.56 481.37,-278.78 495.60,-286.00 505.06,-290.23 514.51,-294.45 518.94,-297.01 523.37,-299.56 526.76,-301.10 530.14,-302.64 531.20,-302.86 532.25,-303.08 533.32,-302.96 534.39,-302.83 535.37,-302.37 536.34,-301.91 537.12,-301.16 537.89,-300.41 538.39,-299.45 538.88,-298.49 539.05,-297.43 539.21,-296.36 539.03,-295.30 538.84,-294.24 538.33,-293.29 537.82,-292.35 537.03,-291.61 536.24,-290.88 535.25,-290.44 534.27,-289.99 533.20,-289.89 532.13,-289.78 531.08,-290.02 530.03,-290.26 529.11,-290.83 528.19,-291.39 527.50,-292.22 526.81,-293.05 526.42,-294.05 526.03,-295.06 525.98,-296.13 525.94,-297.21 526.23,-298.25 526.53,-299.28 527.15,-300.17 527.76,-301.05 528.62,-301.70 529.49,-302.34 530.51,-302.68 531.54,-303.01 532.61,-303.00 533.69,-302.99 534.71,-302.64 535.73,-302.28 536.58,-301.62 537.43,-300.96 538.03,-300.06 538.62,-299.17 538.90,-298.12 539.18,-297.08 539.11,-296.01 539.04,-294.93 538.63,-293.94 538.22,-292.94 537.52,-292.12 536.81,-291.31 535.88,-290.76 534.96,-290.22 534.96,-290.22 534.96,-290.22 531.75,-289.20 528.54,-288.18 523.67,-286.51 518.80,-284.85 509.58,-280.73 500.36,-276.62 486.09,-269.38 471.82,-262.14 448.97,-250.77 426.12,-239.40 399.34,-227.29 372.55,-215.18 354.74,-205.47 336.94,-195.76 312.54,-181.65 288.14,-167.54 269.86,-157.11 251.58,-146.67 239.09,-138.60 226.60,-130.54 213.09,-121.11 199.57,-111.69 184.64,-101.90 169.71,-92.12 155.43,-83.01 141.15,-73.91 128.54,-66.51 115.94,-59.10 102.94,-51.88 89.94,-44.66 77.99,-37.69 66.03,-30.72 56.99,-25.67 47.96,-20.62 38.15,-15.02 28.35,-9.43 15.73,-2.01 3.11,5.41 2.42,5.70 1.73,6.00 0.98,6.12 0.24,6.24 -0.50,6.18 -1.25,6.12 -1.96,5.88 -2.68,5.64 -3.32,5.23 -3.95,4.83 -4.47,4.29 -4.99,3.74 -5.37,3.09 -5.75,2.44 -5.95,1.72 -6.16,0.99 -6.19,0.24 -6.22,-0.50 -6.07,-1.24 -5.92,-1.98 -5.60,-2.66 -5.27,-3.34 -4.80,-3.92 -4.32,-4.51 -3.72,-4.96 -3.11,-5.41 -3.11,-5.41 L -3.11,-5.41 Z"
opacity="0">
<animate attributeName="opacity" from="0" to="1" calcMode="discrete" begin="2999ms" dur="1ms" fill="freeze">
</animate>
</path>
</g>
</svg>
</div>
</div>
</body>
</html>
Check demo here
https://www.codesprogram.com/snippet/wYPlsp
Since i can't edit the path elements, i added a new Attribute below <animate attributeName="d"...: <animate attributeName="fill" values="#e67700"></animate>
Put the icon to the right of the writing
I have this project and I have a list and it contains several points and next to each point there is a right icon, and my problem is that I want to put the icon on the right side, as shown in the picture and not on the left side index.html: <p class="fst-italic"> قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها. </p> <ul style="direction:RTL;" > <li > <i class="bi bi-check2-all"></i>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li> <li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.<i class="bi bi-check2-all"></i></li> <li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.<i class="bi bi-check2-all"></i></li> </ul> <p> الى من سابق وفنلندا. بحث ودول بتحدّي الهجوم أم, بل حتى النزاع بلديهما والكوري, ليرتفع وقدّموا هذا ان. لغزو العمليات مكن إذ. أي طوكيو واقتصار ايطاليا، أما, تونس ايطاليا، أي شيء, بل بعض الأجل البشريةً. عن بلا ميناء وحلفاؤها, دون صفحة ضمنها التجارية عن. أسيا ماليزيا، أي وقد, لم دار مهمّات ومحاولة, نفس هو ثانية الثالث. </p>
Assuming you use an icon font:
Simply using CSS ul { list-style-type: "\icon-hex-code" } the positioning should be handled by the default html document direction mechanism. This will require you to remove the <i> from the <li>, otherwise you will get 2 icons.
By lack of icons I tested this with UNICODE U+2713 (Checkmark) pre/post-fixed with U+00A0 (non breaking space, html ) to get some spacing around the icon. It's color will be equal to the font color of the li, which may be undesired in your case.
When your icon is an SVG you may be able to use list-style-image instead of list-style-type, but I have too little info to go with.
Which icons/file/images do you use for this? E.g. Fontawesome has CSS+iconfont vs. JS+SVG versions to choose from...
Check the snippet
ul {
direction: rtl;
/* \nbsp\checkmark\nbsp */
list-style-type: "\00a0\2713\00a0";
/* replace '2713' with your icon hex code */
}
<p class="fst-italic">
قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها.
</p>
<ul>
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
</ul>
<p>
الى من سابق وفنلندا. بحث ودول بتحدّي الهجوم أم, بل حتى النزاع بلديهما والكوري, ليرتفع وقدّموا هذا ان. لغزو العمليات مكن إذ. أي طوكيو واقتصار ايطاليا، أما, تونس ايطاليا، أي شيء, بل بعض الأجل البشريةً. عن بلا ميناء وحلفاؤها, دون صفحة ضمنها التجارية عن. أسيا ماليزيا، أي وقد, لم دار مهمّات ومحاولة, نفس هو ثانية الثالث.
</p>
You could also apply bootstrap's icons to the ::marker pseudo element to define custom bullet points.
[lang=ar] *,
.rtl * {
direction: rtl;
text-align: right;
}
.ul-check {
padding-inline-start: 1.5em;
}
.ul-check li {
padding-left:0.5em;
}
[lang=ar] .ul-check li {
padding-right:0.5em;
}
.ul-check li::marker {
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: -0.125em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f26f";
color: red;
margin-right:-1em;
}
.bi-check2-all::before {
}
.flex{
display:flex;
gap:0.5em;
}
.item{
border:1px solid #ccc;
flex:1;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<div lang="ar" xml:lang="ar">
<p class="fst-italic">
قامت سبتمبر بعد بـ, عدد أمّا تحرير أم. يطول نهاية الرئيسية ثم حيث. أن بداية الصفحة بعد, بل أضف وسفن وسمّيت. يطول إجلاء لمّ ان, بل أحدث ممثّلة اليميني ذات. وأزيز فهرست المتحدة إذ لها.
</p>
<div class="flex">
<div class="item">1. flex item</div>
<div class="item">2. flex item</div>
<div class="item">2. flex item</div>
</div>
<ul class="ul-check ">
<li>كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
<li> كلّ السفن أجزاء المعاهدات تم, واستمر لكل أي. كل بلا بفرض الساحة وإيطالي, بحق.</li>
</ul>
</div>
<h2>English text</h2>
<p>This is an English paragraph text. This is an English paragraph text. This is an English paragraph text. </p>
<div class="flex">
<div class="item">1. flex item</div>
<div class="item">2. flex item</div>
<div class="item">2. flex item</div>
</div>
<ul class="ul-check ">
<li>This is an English bullet point text</li>
<li>This is an English bullet point text</li>
<li>This is an English bullet point text</li>
</ul>
In the above example we're using language attributes lang=ar to specify the current section's language.
Now we can add suitable css rules to change text directions:
[lang=ar] *,
.rtl * {
direction: rtl;
text-align: right;
}
problem when put text next to the photo using css (if the text is too long)
I am newbie with html css and here is my problem.
I code a very simple html and I want to put the image at the left, the text at the right.
Here is my html code.
<div class="main_product">
<div class="main_product-img" style="background-image: url('https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png');"></div>
<div class="main_product-info text-left">
<h1 class="main_product-name">
Sữa Rửa Mặt Primer Advancer Ohui 250ml giúp da căng bóng, mướt mịn, sáng khỏe
</h1>
<h3 class="main_product-price">790,000₫</h3>
<p class="main_product-desc">
Bộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcsBộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcs có tác dụng chống lão hóa, chống nhăn, giúp da săn chắc căng bóng, mịn màng. Sản phẩm thẩm thấu sâu vào 3 lớp biểu bì, thân bì và hạ bì để nuôi
dưỡng da từ gốc cho bạn một làn da khỏe và đẹp tự nhiên một cách bền vững, mang lại làn da trắng sáng
</p>
</div>
</div>
Here is my css code
.main_product-img {
height: 400px;
width: 400px;
background-size: contain;
position: absolute;
left: 0%;
}
.text-left {
text-align: left;
float: right;
}
And here is the page I got , as you can see in this picture, the text over the picture.
But, when I compact the text, here is what I got
As you can see, all the text come to the right next to the image, but not near the image as I want.
So, could you please help me how to make the to be next to the image ?
Thank you very much for your time.
You can set float: left; to your img instead of float: right; to your text.
Use this code and you can change image width to control size..
your HTML structure isn't correct
.main_product{
display: flex;
align-items: center;
}
.main_product-img{
width: 40rem;
}
<div class="main_product">
<img class="main_product-img" src="https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png" title="" alt="">
<div class="main_product-info">
<h1 class="main_product-name">
Sữa Rửa Mặt Primer Advancer Ohui 250ml giúp da căng bóng, mướt mịn, sáng khỏe
</h1>
<h3 class="main_product-price">790,000₫</h3>
<p class="main_product-desc">
Bộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcsBộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcs có tác dụng chống lão hóa, chống nhăn, giúp da săn chắc căng bóng, mịn màng. Sản phẩm thẩm thấu sâu vào 3 lớp biểu bì, thân bì và hạ bì để nuôi
dưỡng da từ gốc cho bạn một làn da khỏe và đẹp tự nhiên một cách bền vững, mang lại làn da trắng sáng
</p>
</div>
</div>
please use bootstrap grid instead of doing that with float. bootstrap is a style component which is responsive. link :https://getbootstrap.com/docs/4.0/layout/grid/. or please read flex tutorial in css: https://www.w3schools.com/cssref/css3_pr_flex.asp for aligning element in html use flex in css.
you can use font-size to size your paragraph or for Put together p tag or you can use margin for space between image or p tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main_product{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.main_product-img {
height: 400px;
width: 400px;
position: relative;
left: 0%;
float: left;
}
.text-left {
text-align: left;
float: right;
}
/* .container {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
} - Not needed because I made .main_product the container */
</style>
</head>
<body>
<div class="main_product">
<img src="https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png" alt="">
<div class="main_product-info text-left">
<h1 class="main_product-name">
Sữa Rửa Mặt Primer Advancer Ohui 250ml giúp da căng bóng, mướt mịn, sáng khỏe
</h1>
<h3 class="main_product-price">790,000₫</h3>
<p class="main_product-desc">
Bộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcsBộ sản phẩm ngăn ngừa lão hóa Ohui Prime Advancer 5pcs
có tác dụng chống lão hóa, chống nhăn, giúp da săn chắc căng bóng, mịn màng. Sản phẩm thẩm thấu sâu vào 3
lớp biểu bì, thân bì và hạ bì để nuôi
dưỡng da từ gốc cho bạn một làn da khỏe và đẹp tự nhiên một cách bền vững, mang lại làn da trắng sáng
</p>
</div>
</div>
</body>
</html>
Containers will save your butt in these situations, I made main_product a container, set it to flex, row, and look at the magic it did. :), Also I set the image into a tag so it doesnt get cut off
How to change vertically centred SVGs appearance on hover?
I am trying to have four shapes lay over each other as in the picture 1.
I want to them to change color on hover.
The problem with png's was that they are actually square so they would change color also in the transparent areas so I turned to SVG.
Now they only change color when I am on the content, but they are still square and the transparent area blocks the shape underneath.
Most importantly, I can't figure out how to align them horizontally AND vertically in a way that is responsive.
Help would be much appreciated
]1
#Fill-1 {
fill: red;
}
#Fill-1:hover {
fill: blue;
}
.main-wrapper {
text-align: center;
width: 100vw;
height: 100vh;
}
#shape1,
#shape2,
#shape3,
#shape4 {
position: absolute;
left: 0;
}
#shape1 {
transform: scale(0.5);
}
#shape2 {
transform: scale(0.3);
}
#shape3 {
transform: scale(0.15);
}
#shape4 {
transform: scale(0.05);
}
<body>
<div class="main-wrapper">
<svg id="shape1" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1550.03 1362.94"><defs><style>.cls-1{fill:#fff;}</style></defs><title>workshops2</title><g onmouseover="newTitle('workshops')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon points="239.76 106.13 240.16 106.13 240.16 106.52 239.76 106.13"/><polygon points="1122.78 132.43 1122.78 159.66 1068.82 159.66 1068.82 132.62 1042.4 132.62 1042.4 105.74 935.22 105.74 935.22 79.32 881.57 79.32 881.57 52.4 828.39 52.4 828.39 26.96 587.53 26.96 587.53 52.91 533.84 52.91 533.84 78.47 480.23 78.47 480.23 53.69 292.83 53.69 292.83 80.03 266.41 80.03 266.41 106.13 240.16 106.13 240.16 53.1 266.26 53.1 266.26 26.65 560.73 26.65 560.73 0 854.69 0 854.69 25.71 908.38 25.71 908.38 52.17 962.07 52.17 962.07 79.09 1068.78 79.09 1068.78 105.97 1095.74 105.97 1095.74 132.43 1122.78 132.43"/><polygon points="1122.78 160.01 1122.78 159.66 1123.17 159.66 1122.78 160.01"/><polygon points="1229.85 1256.73 1230.2 1256.73 1230.2 1257.12 1229.85 1256.73"/><polygon points="1471.17 828.98 1497.39 828.98 1497.39 935.38 1470.98 935.38 1470.98 988.99 1444.6 988.99 1444.6 1042.6 1417.76 1042.6 1417.76 1095.7 1390.91 1095.7 1390.91 1149.35 1364.54 1149.35 1364.54 1202.92 1337.22 1202.92 1337.22 1229.81 1310.85 1229.81 1310.85 1256.73 1230.2 1256.73 1230.2 1229.57 1283.96 1229.57 1283.96 1203.16 1310.85 1203.16 1310.85 1176.27 1337.26 1176.27 1337.26 1122.59 1364.14 1122.59 1364.14 1069.44 1390.99 1069.44 1390.99 1015.79 1417.4 1015.79 1417.4 962.18 1444.76 962.18 1444.76 908.53 1471.17 908.53 1471.17 828.98"/><polygon points="1497.78 828.98 1497.39 828.98 1497.39 828.62 1497.78 828.98"/><polygon points="320.41 1283.5 320.41 1283.89 320.02 1283.89 320.41 1283.5"/><polygon points="748.17 1310.96 748.17 1336.99 427.6 1336.99 427.6 1310.96 320.41 1310.96 320.41 1283.89 454.48 1283.89 454.48 1310.96 748.17 1310.96"/><polygon points="748.17 1337.38 748.17 1336.99 748.56 1336.99 748.17 1337.38"/><polygon points="1497.78 454.01 1497.78 454.4 1497.43 454.4 1497.78 454.01"/><polygon points="1497.39 828.62 1497.78 828.62 1497.78 828.98 1497.39 828.62"/><polygon points="1550.03 507.15 1550.03 748.17 1524.86 748.17 1524.86 828.62 1497.78 828.62 1497.78 721.09 1523.65 721.09 1523.65 534.16 1497.78 534.16 1497.78 454.4 1524 454.4 1524 507.15 1550.03 507.15"/><polygon points="1123.17 159.66 1123.17 160.01 1122.78 160.01 1123.17 159.66"/><polygon points="1363.6 266.22 1363.6 320.22 1336.48 320.22 1336.48 293.26 1310.14 293.26 1310.14 239.73 1256.11 239.73 1256.11 213 1176.35 213 1176.35 186.23 1123.17 186.23 1123.17 160.01 1202.92 160.01 1202.92 186.12 1282.83 186.12 1282.83 213.04 1336.56 213.04 1336.56 266.22 1363.6 266.22"/><polygon points="1363.6 320.57 1363.6 320.22 1363.99 320.22 1363.6 320.57"/><polygon points="748.56 1336.99 748.56 1337.38 748.17 1337.38 748.56 1336.99"/><polygon points="829.21 1310.61 1069.25 1310.61 1069.25 1336.91 855.9 1336.91 855.9 1362.94 748.56 1362.94 748.56 1337.38 829.21 1337.38 829.21 1310.61"/><polygon points="1069.64 1310.61 1069.25 1310.61 1069.25 1310.26 1069.64 1310.61"/><rect y="400.87" width="25.71" height="320.69"/><polygon points="25.71 721.56 26.07 721.56 25.71 721.95 25.71 721.56"/><polygon points="26.07 400.87 25.71 400.87 25.71 400.48 26.07 400.87"/><polygon points="79.6 828.62 79.6 828.98 79.21 828.98 79.6 828.62"/><polygon points="132.74 855.9 132.74 1069.4 106.71 1069.4 106.71 882.86 79.6 882.86 79.6 828.98 106.71 828.98 106.71 855.9 132.74 855.9"/><polygon points="132.74 1069.79 132.74 1069.4 133.09 1069.4 132.74 1069.79"/><polygon points="25.71 400.48 26.07 400.48 26.07 400.87 25.71 400.48"/><polygon points="78.81 240.31 105.97 240.31 105.97 294.19 79.05 294.19 79.05 320.57 52.28 320.57 52.28 400.48 26.07 400.48 26.07 294.12 52.44 294.12 52.44 267.27 78.81 267.27 78.81 240.31"/><polygon points="106.32 240.31 105.97 240.31 105.97 239.92 106.32 240.31"/><polygon points="1069.25 1310.26 1069.64 1310.26 1069.64 1310.61 1069.25 1310.26"/><polygon points="1150.37 1257.12 1229.85 1257.12 1229.85 1283.26 1176.78 1283.26 1176.78 1310.26 1069.64 1310.26 1069.64 1283.26 1150.37 1283.26 1150.37 1257.12"/><polygon points="1230.2 1257.12 1229.85 1257.12 1229.85 1256.73 1230.2 1257.12"/><polygon points="133.09 1069.4 133.09 1069.79 132.74 1069.79 133.09 1069.4"/><path d="M213,1123.6v79.6H186.78v-52.68c-9.52-.43-17.71-.78-26.77-1.17v-25.67H133.09v-53.89h27.16v27h26.37v26.84Z"/><polygon points="213 1203.59 213 1203.2 213.39 1203.2 213 1203.59"/><polygon points="213.39 1203.2 213.39 1203.59 213 1203.59 213.39 1203.2"/><polygon points="320.02 1257.31 320.02 1283.5 240.62 1283.5 240.62 1257.35 213.39 1257.35 213.39 1203.59 240.51 1203.59 240.51 1230.55 266.88 1230.55 266.88 1257.31 320.02 1257.31"/><polygon points="320.02 1283.89 320.02 1283.5 320.41 1283.5 320.02 1283.89"/><polygon points="105.97 239.92 106.32 239.92 106.32 240.31 105.97 239.92"/><polygon points="159.11 160.05 186.23 160.05 186.23 213.74 159.08 213.74 159.08 239.92 106.32 239.92 106.32 213.74 132.78 213.74 132.78 186.94 159.11 186.94 159.11 160.05"/><polygon points="186.62 160.05 186.23 160.05 186.23 159.66 186.62 160.05"/><polygon points="1363.99 320.22 1363.99 320.57 1363.6 320.57 1363.99 320.22"/><polygon points="1417.09 320.57 1417.09 373.71 1390.17 373.71 1390.17 346.6 1363.99 346.6 1363.99 320.57 1417.09 320.57"/><polygon points="1417.09 374.1 1417.09 373.71 1417.52 373.71 1417.09 374.1"/><polygon points="52.87 775.09 52.87 775.48 52.44 775.48 52.87 775.09"/><rect x="52.87" y="775.48" width="26.34" height="53.14"/><polygon points="79.21 828.98 79.21 828.62 79.6 828.62 79.21 828.98"/><polygon points="26.07 721.56 26.07 721.95 25.71 721.95 26.07 721.56"/><rect x="26.06" y="721.95" width="26.38" height="53.14"/><polygon points="52.44 775.48 52.44 775.09 52.87 775.09 52.44 775.48"/><polygon points="186.23 159.66 186.62 159.66 186.62 160.05 186.23 159.66"/><rect x="186.62" y="133.29" width="26.38" height="26.38"/><polygon points="213.39 133.28 213 133.28 213 132.9 213.39 133.28"/><polygon points="213 132.9 213.39 132.9 213.39 133.28 213 132.9"/><rect x="213.39" y="106.52" width="26.38" height="26.38"/><polygon points="240.16 106.52 239.76 106.52 239.76 106.13 240.16 106.52"/><polygon points="1471.02 427.25 1471.02 427.64 1470.66 427.64 1471.02 427.25"/><rect x="1471.01" y="427.64" width="26.42" height="26.38"/><polygon points="1497.43 454.4 1497.43 454.01 1497.78 454.01 1497.43 454.4"/><polygon points="1444.25 400.48 1444.25 400.87 1443.9 400.87 1444.25 400.48"/><rect x="1444.25" y="400.87" width="26.42" height="26.38"/><polygon points="1470.66 427.64 1470.66 427.25 1471.02 427.25 1470.66 427.64"/><polygon class="cls-1" points="1523.65 534.16 1523.65 721.09 1497.78 721.09 1497.78 828.62 1497.39 828.62 1497.39 828.98 1471.17 828.98 1471.17 908.53 1444.76 908.53 1444.76 962.18 1417.4 962.18 1417.4 1015.79 1390.99 1015.79 1390.99 1069.44 1364.14 1069.44 1364.14 1122.59 1337.26 1122.59 1337.26 1176.27 1310.85 1176.27 1310.85 1203.16 1283.96 1203.16 1283.96 1229.57 1230.2 1229.57 1230.2 1256.73 1229.85 1256.73 1229.85 1257.12 1150.37 1257.12 1150.37 1283.26 1069.64 1283.26 1069.64 1310.26 1069.25 1310.26 1069.25 1310.61 829.21 1310.61 829.21 1337.38 748.56 1337.38 748.56 1336.99 748.17 1336.99 748.17 1310.96 454.48 1310.96 454.48 1283.89 320.41 1283.89 320.41 1283.5 320.02 1283.5 320.02 1257.31 266.88 1257.31 266.88 1230.55 240.51 1230.55 240.51 1203.59 213.39 1203.59 213.39 1203.2 213 1203.2 213 1123.6 186.62 1123.6 186.62 1096.76 160.25 1096.76 160.25 1069.79 133.09 1069.79 133.09 1069.4 132.74 1069.4 132.74 855.9 106.71 855.9 106.71 828.98 79.6 828.98 79.6 828.62 79.21 828.62 79.21 775.48 52.87 775.48 52.87 775.09 52.44 775.09 52.44 721.95 26.07 721.95 26.07 721.56 25.71 721.56 25.71 400.87 26.07 400.87 26.07 400.48 52.28 400.48 52.28 320.57 79.05 320.57 79.05 294.19 105.97 294.19 105.97 240.31 106.32 240.31 106.32 239.92 159.08 239.92 159.08 213.74 186.23 213.74 186.23 160.05 186.62 160.05 186.62 159.66 213 159.66 213 133.28 213.39 133.28 213.39 132.9 239.76 132.9 239.76 106.52 240.16 106.52 240.16 106.13 266.41 106.13 266.41 80.03 292.83 80.03 292.83 53.69 480.23 53.69 480.23 78.47 533.84 78.47 533.84 52.91 587.53 52.91 587.53 26.96 828.39 26.96 828.39 52.4 881.57 52.4 881.57 79.32 935.22 79.32 935.22 105.74 1042.4 105.74 1042.4 132.62 1068.82 132.62 1068.82 159.66 1122.78 159.66 1122.78 160.01 1123.17 160.01 1123.17 186.23 1176.35 186.23 1176.35 213 1256.11 213 1256.11 239.73 1310.14 239.73 1310.14 293.26 1336.48 293.26 1336.48 320.22 1363.6 320.22 1363.6 320.57 1363.99 320.57 1363.99 346.6 1390.17 346.6 1390.17 373.71 1417.09 373.71 1417.09 374.1 1417.52 374.1 1417.52 400.48 1443.9 400.48 1443.9 400.87 1444.25 400.87 1444.25 427.25 1470.66 427.25 1470.66 427.64 1471.02 427.64 1471.02 454.01 1497.43 454.01 1497.43 454.4 1497.78 454.4 1497.78 534.16 1523.65 534.16"/><polygon points="1417.52 373.71 1417.52 374.1 1417.09 374.1 1417.52 373.71"/><rect x="1417.52" y="374.1" width="26.38" height="26.38"/><polygon points="1443.9 400.87 1443.9 400.48 1444.25 400.48 1443.9 400.87"/></g></g></svg>
<svg id="shape2" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1175.26 1042.05"><defs><style>.cls-1{fill:#fff;}</style></defs><title>dreaming2</title><g onmouseover="newTitle('dreaming')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon points="52.24 534.35 52.63 534.35 52.63 534.7 52.24 534.35"/><path d="M774.7.39V25.91h-54V52.17H560.57V27.08H346.44V53H266V80H239.57v26.88H185.92v26.46H159v53.64H132.58v80.46H105.27V508.25H78.89v26.1H52.63v-53h26.5V240.43h26.41V160.56c9.56-.43,17.8-.82,26.89-1.21V106.83h26.92V79.91h53.18V53h26.88V26.57h80.42V0H587V25.24H694.13V.39Z"/><polygon points="774.7 26.3 774.7 25.91 775.09 25.91 774.7 26.3"/><polygon points="266.69 989.22 266.69 989.61 266.3 989.61 266.69 989.22"/><polygon points="374.1 1016.34 667.67 1016.34 667.67 1042.05 347.3 1042.05 347.3 1016.81 266.69 1016.81 266.69 989.61 374.1 989.61 374.1 1016.34"/><polygon points="668.06 1016.34 667.67 1016.34 667.67 1015.99 668.06 1016.34"/><polygon points="52.24 775.64 52.24 828.66 26.02 828.66 26.02 802.64 0 802.64 0 615.08 25.16 615.08 25.16 534.7 52.24 534.7 52.24 642.2 26.38 642.2 26.38 775.64 52.24 775.64"/><polygon points="52.24 828.66 52.6 828.66 52.24 829.05 52.24 828.66"/><polygon points="52.63 534.7 52.24 534.7 52.24 534.35 52.63 534.7"/><polygon points="667.67 1015.99 668.06 1015.99 668.06 1016.34 667.67 1015.99"/><polygon points="775.52 962.85 881.73 962.85 881.73 988.99 801.93 988.99 801.93 1015.99 668.06 1015.99 668.06 988.99 775.52 988.99 775.52 962.85"/><polygon points="882.12 962.85 881.73 962.85 881.73 962.46 882.12 962.85"/><polygon points="52.6 828.66 52.6 829.05 52.24 829.05 52.6 828.66"/><polygon points="186.04 936.27 186.04 962.46 133.01 962.46 133.01 936.35 106.56 936.35 106.56 909.43 79.63 909.43 79.63 883.01 52.6 883.01 52.6 829.05 79.71 829.05 79.71 855.94 106.05 855.94 106.05 882.74 133.28 882.74 133.28 909.51 159.62 909.51 159.62 936.27 186.04 936.27"/><polygon points="186.04 962.85 186.04 962.46 186.39 962.46 186.04 962.85"/><polygon points="1095.82 775.13 1096.17 775.13 1096.17 775.52 1095.82 775.13"/><polygon points="1123.29 561.47 1149.31 561.47 1149.31 748.25 1123.33 748.25 1123.33 775.13 1096.17 775.13 1096.17 721.33 1123.29 721.33 1123.29 561.47"/><polygon points="1149.7 561.47 1149.31 561.47 1149.31 561.12 1149.7 561.47"/><polygon points="775.09 25.91 775.09 26.3 774.7 26.3 775.09 25.91"/><polygon points="908.49 105.82 908.49 132.97 854.61 132.97 854.61 106.05 801.59 106.05 801.59 52.52 775.09 52.52 775.09 26.3 828 26.3 828 79.44 881.53 79.44 881.53 105.82 908.49 105.82"/><polygon points="908.49 133.32 908.49 132.97 908.88 132.97 908.49 133.32"/><polygon points="962.02 882.16 962.38 882.16 962.38 882.55 962.02 882.16"/><polygon points="1069.56 775.52 1095.82 775.52 1095.82 828.43 1069.36 828.43 1069.36 855.27 1016.3 855.27 1016.3 882.16 962.38 882.16 962.38 855 989.46 855 989.46 828.55 1043.11 828.55 1043.11 801.62 1069.56 801.62 1069.56 775.52"/><polygon points="1096.17 775.52 1095.82 775.52 1095.82 775.13 1096.17 775.52"/><polygon points="1122.94 373.79 1122.94 374.18 1122.59 374.18 1122.94 373.79"/><polygon points="1149.31 561.12 1149.7 561.12 1149.7 561.47 1149.31 561.12"/><polygon points="1175.26 400.25 1175.26 561.12 1149.7 561.12 1149.7 427.09 1122.94 427.09 1122.94 374.18 1149.23 374.18 1149.23 400.25 1175.26 400.25"/><polygon points="908.88 132.97 908.88 133.32 908.49 133.32 908.88 132.97"/><polygon points="1015.52 186.08 1015.52 213.23 961.67 213.23 961.67 186.35 935.34 186.35 935.34 159.54 908.88 159.54 908.88 133.32 961.75 133.32 961.75 159.74 988.6 159.74 988.6 186.08 1015.52 186.08"/><polygon points="1015.52 213.58 1015.52 213.23 1015.91 213.23 1015.52 213.58"/><polygon points="881.73 962.46 882.12 962.46 882.12 962.85 881.73 962.46"/><polygon points="909.27 882.55 962.02 882.55 962.02 908.73 935.57 908.73 935.57 935.57 909.23 935.57 909.23 962.46 882.12 962.46 882.12 908.77 909.27 908.77 909.27 882.55"/><polygon points="962.38 882.55 962.02 882.55 962.02 882.16 962.38 882.55"/><polygon points="1069.44 293.49 1069.44 293.88 1069.05 293.88 1069.44 293.49"/><polygon points="1122.59 320.14 1122.59 373.79 1095.55 373.79 1095.55 346.56 1069.44 346.56 1069.44 293.88 1095.51 293.88 1095.51 320.14 1122.59 320.14"/><polygon points="1122.59 374.18 1122.59 373.79 1122.94 373.79 1122.59 374.18"/><polygon points="186.39 962.46 186.39 962.85 186.04 962.85 186.39 962.46"/><rect x="186.39" y="962.85" width="79.91" height="26.38"/><polygon points="266.3 989.61 266.3 989.22 266.69 989.22 266.3 989.61"/><polygon points="1042.68 240 1042.68 240.39 1042.29 240.39 1042.68 240"/><rect x="1042.68" y="240.39" width="26.38" height="53.1"/><polygon points="1069.05 293.88 1069.05 293.49 1069.44 293.49 1069.05 293.88"/><polygon class="cls-1" points="1149.7 427.09 1149.7 561.12 1149.31 561.12 1149.31 561.47 1123.29 561.47 1123.29 721.33 1096.17 721.33 1096.17 775.13 1095.82 775.13 1095.82 775.52 1069.56 775.52 1069.56 801.62 1043.11 801.62 1043.11 828.55 989.46 828.55 989.46 855 962.38 855 962.38 882.16 962.02 882.16 962.02 882.55 909.27 882.55 909.27 908.77 882.12 908.77 882.12 962.46 881.73 962.46 881.73 962.85 775.52 962.85 775.52 988.99 668.06 988.99 668.06 1015.99 667.67 1015.99 667.67 1016.34 374.1 1016.34 374.1 989.61 266.69 989.61 266.69 989.22 266.3 989.22 266.3 962.85 186.39 962.85 186.39 962.46 186.04 962.46 186.04 936.27 159.62 936.27 159.62 909.51 133.28 909.51 133.28 882.74 106.05 882.74 106.05 855.94 79.71 855.94 79.71 829.05 52.6 829.05 52.6 828.66 52.24 828.66 52.24 775.64 26.38 775.64 26.38 642.2 52.24 642.2 52.24 534.7 52.63 534.7 52.63 534.35 78.89 534.35 78.89 508.25 105.27 508.25 105.27 267.39 132.58 267.39 132.58 186.94 159.04 186.94 159.04 133.28 185.92 133.28 185.92 106.83 239.57 106.83 239.57 79.95 266.02 79.95 266.02 53.02 346.44 53.02 346.44 27.08 560.57 27.08 560.57 52.17 720.74 52.17 720.74 25.91 774.7 25.91 774.7 26.3 775.09 26.3 775.09 52.52 801.59 52.52 801.59 106.05 854.61 106.05 854.61 132.97 908.49 132.97 908.49 133.32 908.88 133.32 908.88 159.54 935.34 159.54 935.34 186.35 961.67 186.35 961.67 213.23 1015.52 213.23 1015.52 213.58 1015.91 213.58 1015.91 240 1042.29 240 1042.29 240.39 1042.68 240.39 1042.68 293.49 1069.05 293.49 1069.05 293.88 1069.44 293.88 1069.44 346.56 1095.55 346.56 1095.55 373.79 1122.59 373.79 1122.59 374.18 1122.94 374.18 1122.94 427.09 1149.7 427.09"/><polygon points="1015.91 213.23 1015.91 213.58 1015.52 213.58 1015.91 213.23"/><rect x="1015.91" y="213.58" width="26.38" height="26.42"/><polygon points="1042.29 240.39 1042.29 240 1042.68 240 1042.29 240.39"/></g></g></svg>
<svg id="shape3" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720.58 720.78"><defs><style>.cls-1{fill:#fff;}</style></defs><title>invasion2</title><g onmouseover="newTitle('invasion')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><polygon points="400.09 561.27 400.09 560.88 400.48 560.88 400.09 561.27"/><polygon points="507.12 25.36 507.12 52.52 185.57 52.52 185.57 26.65 132.35 26.65 132.35 53.34 78.66 53.34 78.66 79.83 26.77 79.83 26.77 347.61 105 347.61 105 427.6 79.99 427.6 79.99 481.29 106.25 481.29 106.25 507.74 159.97 507.74 159.97 694.21 239.96 694.21 239.96 667.6 293.65 667.6 293.65 641.1 319.01 641.1 319.01 533.92 294.12 533.92 294.12 508.6 373.99 508.6 373.99 534.62 400.09 534.62 400.09 560.88 347.65 560.88 347.65 587.38 372.5 587.38 372.5 641.07 347.22 641.07 347.22 667.52 320.3 667.52 320.3 694.44 267.16 694.44 267.16 720.78 133.21 720.78 133.21 535.05 79.6 535.05 79.6 508.13 53.49 508.13 53.49 400.99 78.43 400.99 78.43 374.88 26.11 374.88 26.11 399.78 0 399.78 0 53.22 52.21 53.22 52.21 26.3 105.39 26.3 105.39 0 212.57 0 212.57 25.36 507.12 25.36"/><polygon points="507.12 52.87 507.12 52.52 507.51 52.52 507.12 52.87"/><polygon points="507.51 52.52 507.51 52.87 507.12 52.87 507.51 52.52"/><polygon points="507.12 587.65 507.51 587.65 507.51 588.04 507.12 587.65"/><polygon points="720.58 346.52 720.58 480.39 695.22 480.39 695.22 507.31 641.57 507.31 641.57 533.77 587.88 533.77 587.88 560.65 561.47 560.65 561.47 587.65 507.51 587.65 507.51 560.45 534.55 560.45 534.55 534 561.47 534 561.47 507.12 614.69 507.12 614.69 480.19 668.38 480.19 668.38 453.7 693.58 453.7 693.58 373.29 667.56 373.29 667.56 319.6 640.6 319.6 640.6 293.18 613.75 293.18 613.75 132.5 587.3 132.5 587.3 105.58 560.38 105.58 560.38 79.17 507.51 79.17 507.51 52.87 587.22 52.87 587.22 78.93 613.67 78.93 613.67 105.82 640.99 105.82 640.99 266.45 667.4 266.45 667.4 293.34 694.29 293.34 694.29 346.52 720.58 346.52"/><polygon class="cls-1" points="693.58 373.29 693.58 453.7 668.38 453.7 668.38 480.19 614.69 480.19 614.69 507.12 561.47 507.12 561.47 534 534.55 534 534.55 560.45 507.51 560.45 507.51 587.65 507.12 587.65 507.12 588.04 454.29 588.04 454.29 561.27 400.48 561.27 400.48 560.88 400.09 560.88 400.09 534.62 373.99 534.62 373.99 508.6 294.12 508.6 294.12 533.92 319.01 533.92 319.01 641.1 293.65 641.1 293.65 667.6 239.96 667.6 239.96 694.21 159.97 694.21 159.97 507.74 106.25 507.74 106.25 481.29 79.99 481.29 79.99 427.6 105 427.6 105 347.61 26.77 347.61 26.77 79.83 78.66 79.83 78.66 53.34 132.35 53.34 132.35 26.65 185.57 26.65 185.57 52.52 507.12 52.52 507.12 52.87 507.51 52.87 507.51 79.17 560.38 79.17 560.38 105.58 587.3 105.58 587.3 132.5 613.75 132.5 613.75 293.18 640.6 293.18 640.6 319.6 667.56 319.6 667.56 373.29 693.58 373.29"/><polygon points="400.48 560.88 400.48 561.27 400.09 561.27 400.48 560.88"/><polygon points="454.29 588.04 507.12 588.04 507.12 613.75 427.52 613.75 427.52 588.47 400.48 588.47 400.48 561.27 454.29 561.27 454.29 588.04"/><polygon points="507.51 588.04 507.12 588.04 507.12 587.65 507.51 588.04"/></g></g></svg>
<svg id="shape4" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 239.26 239.1"><defs><style>.cls-1{fill:#fff;}</style></defs><title>host</title><g onmouseover="newTitle('host')" onmouseout="oldTitle()" id="Fill-1" id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2"><path d="M212.61,105.86V52.17H186.12V25.24H159.19V0H25.25V25.87H0v188H26.34V239.1H133.56V212.76h53.18V185.84h52.52v-80Zm-.23,53.49H160.25v26.88H106.56v26H52.87v-25.4h-26V52.87H52.28v-26H132.7v25.4h26.45V79.67h26.93v52.72h26.3Z"/><polygon class="cls-1" points="212.38 132.39 212.38 159.35 160.25 159.35 160.25 186.23 106.56 186.23 106.56 212.22 52.87 212.22 52.87 186.82 26.84 186.82 26.84 52.87 52.28 52.87 52.28 26.88 132.7 26.88 132.7 52.28 159.15 52.28 159.15 79.67 186.08 79.67 186.08 132.39 212.38 132.39"/></g></g></svg>
</div>
</body>
more easy (and shorter) to do that with svg symbol:
#mySVG {
margin: 1em;
width: 90vw;
height: 90vh;
background-color: lightblue;
}
#shape1, #shape2,
#shape3, #shape4 { fill:red }
#shape1:hover, #shape2:hover,
#shape3:hover, #shape4:hover { fill:blue }
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
<defs>
<symbol id="shapeRef" viewBox="0 0 240 240" >
<path
d="M212.61,105.86V52.17H186.12V25.24H159.19V0H25.25V25.87H0v188H26.34V239.1H133.56V212.76h53.18V185.84h52
.52v-80Zm-.23,53.49H160.25v26.88H106.56v26H52.87v-25.4h-26V52.87H52.28v-26H132.7v25.4h26.45V79.67h26.93v52
.72h26.3Z" />
<polygon fill="transparent"
points="212.38 132.39 212.38 159.35 160.25 159.35 160.25 186.23 106.56 186.23 106.56 212.22 52.87
212.22 52.87 186.82 26.84 186.82 26.84 52.87 52.28 52.87 52.28 26.88 132.7 26.88 132.7 52.28 159.15
52.28 159.15 79.67 186.08 79.67 186.08 132.39 212.38 132.39" />
</symbol>
</defs>
<use xlink:href="#shapeRef" x="50" y="50" width="120" height="120" id="shape1" />
<use xlink:href="#shapeRef" x="74" y="74" width="72" height="72" id="shape2" />
<use xlink:href="#shapeRef" x="92" y="92" width="36" height="36" id="shape3" />
<use xlink:href="#shapeRef" x="104" y="104" width="12" height="12" id="shape4" />
</svg>
Apply your hover events to the SVG's <path> if possible, rather than the entire <g>. The <g> is just a container element, so basically a box.
In your CSS:
#Fill-1 path:hover {
fill: blue;
}
As for centering. It's really up to you / the rest of your markup. One option could be a flex container with absolute-positioned children. Something like the following:
.main-wrapper {
position: absolute;
display: flex;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: center;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
svg {
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
margin: 0 auto;
position: absolute;
transform-origin: center center;
}
Note: You shouldn't need to select all 4 svgs by their ID. As they can all be targeted in CSS with just svg.
Here it is in a fiddle: https://jsfiddle.net/Lf6nchem/
Thanks for the help! Here is also the two-color color change using fill:currentColor
#mySVG {
margin: 1em;
width: 90vw;
height: 90vh;
background-color: green;
}
#shape1, #shape2,
#shape3, #shape4 { fill:red; color:white; }
#shape1:hover, #shape2:hover,
#shape3:hover, #shape4:hover { fill:blue; color:yellow; }
.fill{fill:currentColor;}
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
<defs>
<symbol id="shapeRef" viewBox="0 0 240 240" >
<path
d="M212.61,105.86V52.17H186.12V25.24H159.19V0H25.25V25.87H0v188H26.34V239.1H133.56V212.76h53.18V185.84h52
.52v-80Zm-.23,53.49H160.25v26.88H106.56v26H52.87v-25.4h-26V52.87H52.28v-26H132.7v25.4h26.45V79.67h26.93v52
.72h26.3Z" />
<polygon class="fill"
points="212.38 132.39 212.38 159.35 160.25 159.35 160.25 186.23 106.56 186.23 106.56 212.22 52.87
212.22 52.87 186.82 26.84 186.82 26.84 52.87 52.28 52.87 52.28 26.88 132.7 26.88 132.7 52.28 159.15
52.28 159.15 79.67 186.08 79.67 186.08 132.39 212.38 132.39" />
</symbol>
</defs>
<use xlink:href="#shapeRef" x="50" y="50" width="120" height="120" id="shape1" />
<use xlink:href="#shapeRef" x="74" y="74" width="72" height="72" id="shape2" />
<use xlink:href="#shapeRef" x="92" y="92" width="36" height="36" id="shape3" />
<use xlink:href="#shapeRef" x="104" y="104" width="12" height="12" id="shape4" />
</svg>