当我的SVG被选中并处于活动状态时，我正在尝试更改其填充颜色。一种颜色代表其活动状态，另一种则代表不处于活动状态。
到目前为止，我一直在尝试向SVG的路径中添加和删除类（使用jQuery），以便在单击元素时更改类。
我尝试将一个类添加到名为nav-item nav-item-background的路径属性中，该类属于正常状态，我向父li添加了名为.nav-item-active .nav-item-background的默认活动状态
要在这两个类之间切换，我尝试使用jQuery。我尝试使用addClass（）和removeClass（）方法，并且通过进一步的研究，我发现大约两年前的帖子说您需要更新jQuery才能正常工作。我已经更新到3.4.1，那些类仍然没有更改。
我也尝试使用attr（'class'“ class1 class2”）方法，也没有骰子。
无论如何，我已经在此方面进行了许多小时的尝试研究，而且似乎已经碰壁了。关于该主题的许多帖子也有些陈旧。或者我只是介意。
我可能会定位错误的东西吗？类nav-item-background是否应该不在SVG的路径中？
请检查我的代码
$('.nav-container li a').on('click', function(){
var selected = $(this);
selected.parent('li').addClass('nav-item-background').siblings('li').removeClass('nav-item-active');
});.nav-item .nav-item-background {
fill: blue;
}
.nav-item-active .nav-item-background {
fill: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="nav-container">
<li class="nav-item nav-item-active">
<a href="#0">
<span>Home</span>
<span>
<svg class"nav-item-background" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0, 0, 400,400"><g id="svgg"><path class="nav-item-background" id="path0" d="M147.519 178.219 L 146.438 178.806 146.319 196.789 C 146.181 217.583,146.506 216.053,142.170 216.330 C 137.245 216.643,136.400 215.403,136.400 207.862 C 136.400 201.519,136.770 201.840,129.244 201.660 C 120.081 201.441,120.075 201.449,120.517 213.783 C 120.847 222.981,122.318 226.144,127.469 228.726 C 134.482 232.241,150.057 232.147,156.608 228.550 C 163.323 224.863,163.600 223.682,163.600 198.702 L 163.600 179.564 162.618 178.582 C 161.399 177.363,149.618 177.080,147.519 178.219 M173.739 177.877 C 172.023 178.213,171.928 179.325,172.106 197.058 L 172.274 213.800 173.489 217.427 C 174.157 219.422,174.971 221.582,175.298 222.227 C 175.625 222.872,176.010 224.030,176.154 224.800 C 176.297 225.570,176.952 227.055,177.608 228.100 L 178.801 230.000 185.124 230.000 C 192.778 230.000,193.173 229.796,194.199 225.318 C 194.491 224.043,194.998 222.190,195.325 221.200 C 195.653 220.210,196.113 218.676,196.349 217.792 C 196.771 216.208,198.856 214.721,199.407 215.612 C 199.810 216.263,201.643 222.159,202.069 224.174 C 202.530 226.354,203.329 228.180,204.310 229.300 C 204.846 229.911,205.725 230.000,211.228 230.000 L 217.533 230.000 218.716 228.500 C 219.367 227.675,220.033 226.370,220.197 225.600 C 220.361 224.830,220.695 223.840,220.939 223.400 C 221.737 221.963,223.634 216.247,223.992 214.200 C 224.778 209.701,224.477 178.994,223.639 178.235 C 222.639 177.330,209.768 177.428,208.660 178.349 C 208.074 178.836,207.998 180.234,207.986 190.749 C 207.975 199.895,207.849 202.821,207.435 203.569 L 206.898 204.538 206.611 203.569 C 204.769 197.349,202.542 195.383,197.691 195.694 C 194.219 195.917,193.307 196.580,191.983 199.842 C 191.044 202.157,190.904 202.268,189.897 201.500 C 189.322 201.062,189.226 199.640,189.120 190.064 L 189.000 179.128 188.056 178.364 C 187.147 177.629,176.809 177.277,173.739 177.877 M234.373 178.233 C 233.536 179.241,233.513 228.332,234.349 229.339 C 234.844 229.935,236.605 230.000,252.360 230.000 L 269.823 230.000 272.641 228.649 C 277.851 226.152,278.543 224.243,278.334 212.929 C 278.178 204.508,278.085 204.270,273.702 201.043 L 271.215 199.213 272.183 197.787 C 276.427 191.533,273.913 181.449,267.378 178.516 C 264.969 177.435,235.247 177.180,234.373 178.233 M257.685 190.546 C 259.049 191.582,259.103 195.639,257.771 196.972 C 256.863 197.879,250.991 197.876,250.643 196.967 C 250.205 195.825,250.382 190.978,250.880 190.480 C 251.537 189.823,256.801 189.874,257.685 190.546 M261.463 210.219 C 262.188 211.210,262.167 215.618,261.433 216.624 C 260.703 217.623,251.345 218.071,250.751 217.135 C 250.336 216.479,250.299 210.777,250.706 210.140 C 251.474 208.940,260.576 209.006,261.463 210.219 " stroke="none" fill="#f4f4f4" fill-rule="evenodd"></path><path id="path1" d="M19.200 200.000 L 19.200 298.800 200.000 298.800 L 380.800 298.800 380.800 200.000 L 380.800 101.200 200.000 101.200 L 19.200 101.200 19.200 200.000 M162.618 178.582 L 163.600 179.564 163.600 198.702 C 163.600 223.682,163.323 224.863,156.608 228.550 C 150.057 232.147,134.482 232.241,127.469 228.726 C 122.318 226.144,120.847 222.981,120.517 213.783 C 120.075 201.449,120.081 201.441,129.244 201.660 C 136.770 201.840,136.400 201.519,136.400 207.862 C 136.400 215.403,137.245 216.643,142.170 216.330 C 146.506 216.053,146.181 217.583,146.319 196.789 L 146.438 178.806 147.519 178.219 C 149.618 177.080,161.399 177.363,162.618 178.582 M188.056 178.364 L 189.000 179.128 189.120 190.064 C 189.226 199.640,189.322 201.062,189.897 201.500 C 190.904 202.268,191.044 202.157,191.983 199.842 C 193.307 196.580,194.219 195.917,197.691 195.694 C 202.542 195.383,204.769 197.349,206.611 203.569 L 206.898 204.538 207.435 203.569 C 207.849 202.821,207.975 199.895,207.986 190.749 C 207.998 180.234,208.074 178.836,208.660 178.349 C 209.768 177.428,222.639 177.330,223.639 178.235 C 224.477 178.994,224.778 209.701,223.992 214.200 C 223.634 216.247,221.737 221.963,220.939 223.400 C 220.695 223.840,220.361 224.830,220.197 225.600 C 220.033 226.370,219.367 227.675,218.716 228.500 L 217.533 230.000 211.228 230.000 C 205.725 230.000,204.846 229.911,204.310 229.300 C 203.329 228.180,202.530 226.354,202.069 224.174 C 201.643 222.159,199.810 216.263,199.407 215.612 C 198.856 214.721,196.771 216.208,196.349 217.792 C 196.113 218.676,195.653 220.210,195.325 221.200 C 194.998 222.190,194.491 224.043,194.199 225.318 C 193.173 229.796,192.778 230.000,185.124 230.000 L 178.801 230.000 177.608 228.100 C 176.952 227.055,176.297 225.570,176.154 224.800 C 176.010 224.030,175.625 222.872,175.298 222.227 C 174.971 221.582,174.157 219.422,173.489 217.427 L 172.274 213.800 172.106 197.058 C 171.928 179.325,172.023 178.213,173.739 177.877 C 176.809 177.277,187.147 177.629,188.056 178.364 M267.378 178.516 C 273.913 181.449,276.427 191.533,272.183 197.787 L 271.215 199.213 273.702 201.043 C 278.085 204.270,278.178 204.508,278.334 212.929 C 278.543 224.243,277.851 226.152,272.641 228.649 L 269.823 230.000 252.360 230.000 C 236.605 230.000,234.844 229.935,234.349 229.339 C 233.513 228.332,233.536 179.241,234.373 178.233 C 235.247 177.180,264.969 177.435,267.378 178.516 M250.880 190.480 C 250.382 190.978,250.205 195.825,250.643 196.967 C 250.991 197.876,256.863 197.879,257.771 196.972 C 259.103 195.639,259.049 191.582,257.685 190.546 C 256.801 189.874,251.537 189.823,250.880 190.480 M252.000 209.470 C 250.586 209.768,250.412 210.219,250.412 213.600 C 250.412 217.817,250.237 217.693,255.978 217.535 C 261.781 217.375,262.000 217.224,262.000 213.400 C 262.000 209.745,261.702 209.506,256.963 209.372 C 254.783 209.311,252.550 209.355,252.000 209.470 " stroke="none" fill="#040404" fill-rule="evenodd"></path></g></svg>
</span>
</a>
</li>
</ul>
答案 0 :(得分：2)
我会在父元素上使用toggleClass()。
$('.nav-container li a').on('click', function(){
var selected = $(this);
selected.parent().toggleClass('nav-item-active').siblings().removeClass('nav-item-active');
});.nav-item .nav-item-background {
fill: blue;
}
.nav-item-active .nav-item-background {
fill: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="nav-container">
<li class="nav-item">
<a href="#0">
<span>Home</span>
<span>
<svg class"nav-item-background" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0, 0, 400,400"><g id="svgg"><path class="nav-item-background" id="path0" d="M147.519 178.219 L 146.438 178.806 146.319 196.789 C 146.181 217.583,146.506 216.053,142.170 216.330 C 137.245 216.643,136.400 215.403,136.400 207.862 C 136.400 201.519,136.770 201.840,129.244 201.660 C 120.081 201.441,120.075 201.449,120.517 213.783 C 120.847 222.981,122.318 226.144,127.469 228.726 C 134.482 232.241,150.057 232.147,156.608 228.550 C 163.323 224.863,163.600 223.682,163.600 198.702 L 163.600 179.564 162.618 178.582 C 161.399 177.363,149.618 177.080,147.519 178.219 M173.739 177.877 C 172.023 178.213,171.928 179.325,172.106 197.058 L 172.274 213.800 173.489 217.427 C 174.157 219.422,174.971 221.582,175.298 222.227 C 175.625 222.872,176.010 224.030,176.154 224.800 C 176.297 225.570,176.952 227.055,177.608 228.100 L 178.801 230.000 185.124 230.000 C 192.778 230.000,193.173 229.796,194.199 225.318 C 194.491 224.043,194.998 222.190,195.325 221.200 C 195.653 220.210,196.113 218.676,196.349 217.792 C 196.771 216.208,198.856 214.721,199.407 215.612 C 199.810 216.263,201.643 222.159,202.069 224.174 C 202.530 226.354,203.329 228.180,204.310 229.300 C 204.846 229.911,205.725 230.000,211.228 230.000 L 217.533 230.000 218.716 228.500 C 219.367 227.675,220.033 226.370,220.197 225.600 C 220.361 224.830,220.695 223.840,220.939 223.400 C 221.737 221.963,223.634 216.247,223.992 214.200 C 224.778 209.701,224.477 178.994,223.639 178.235 C 222.639 177.330,209.768 177.428,208.660 178.349 C 208.074 178.836,207.998 180.234,207.986 190.749 C 207.975 199.895,207.849 202.821,207.435 203.569 L 206.898 204.538 206.611 203.569 C 204.769 197.349,202.542 195.383,197.691 195.694 C 194.219 195.917,193.307 196.580,191.983 199.842 C 191.044 202.157,190.904 202.268,189.897 201.500 C 189.322 201.062,189.226 199.640,189.120 190.064 L 189.000 179.128 188.056 178.364 C 187.147 177.629,176.809 177.277,173.739 177.877 M234.373 178.233 C 233.536 179.241,233.513 228.332,234.349 229.339 C 234.844 229.935,236.605 230.000,252.360 230.000 L 269.823 230.000 272.641 228.649 C 277.851 226.152,278.543 224.243,278.334 212.929 C 278.178 204.508,278.085 204.270,273.702 201.043 L 271.215 199.213 272.183 197.787 C 276.427 191.533,273.913 181.449,267.378 178.516 C 264.969 177.435,235.247 177.180,234.373 178.233 M257.685 190.546 C 259.049 191.582,259.103 195.639,257.771 196.972 C 256.863 197.879,250.991 197.876,250.643 196.967 C 250.205 195.825,250.382 190.978,250.880 190.480 C 251.537 189.823,256.801 189.874,257.685 190.546 M261.463 210.219 C 262.188 211.210,262.167 215.618,261.433 216.624 C 260.703 217.623,251.345 218.071,250.751 217.135 C 250.336 216.479,250.299 210.777,250.706 210.140 C 251.474 208.940,260.576 209.006,261.463 210.219 " stroke="none" fill="#f4f4f4" fill-rule="evenodd"></path><path id="path1" d="M19.200 200.000 L 19.200 298.800 200.000 298.800 L 380.800 298.800 380.800 200.000 L 380.800 101.200 200.000 101.200 L 19.200 101.200 19.200 200.000 M162.618 178.582 L 163.600 179.564 163.600 198.702 C 163.600 223.682,163.323 224.863,156.608 228.550 C 150.057 232.147,134.482 232.241,127.469 228.726 C 122.318 226.144,120.847 222.981,120.517 213.783 C 120.075 201.449,120.081 201.441,129.244 201.660 C 136.770 201.840,136.400 201.519,136.400 207.862 C 136.400 215.403,137.245 216.643,142.170 216.330 C 146.506 216.053,146.181 217.583,146.319 196.789 L 146.438 178.806 147.519 178.219 C 149.618 177.080,161.399 177.363,162.618 178.582 M188.056 178.364 L 189.000 179.128 189.120 190.064 C 189.226 199.640,189.322 201.062,189.897 201.500 C 190.904 202.268,191.044 202.157,191.983 199.842 C 193.307 196.580,194.219 195.917,197.691 195.694 C 202.542 195.383,204.769 197.349,206.611 203.569 L 206.898 204.538 207.435 203.569 C 207.849 202.821,207.975 199.895,207.986 190.749 C 207.998 180.234,208.074 178.836,208.660 178.349 C 209.768 177.428,222.639 177.330,223.639 178.235 C 224.477 178.994,224.778 209.701,223.992 214.200 C 223.634 216.247,221.737 221.963,220.939 223.400 C 220.695 223.840,220.361 224.830,220.197 225.600 C 220.033 226.370,219.367 227.675,218.716 228.500 L 217.533 230.000 211.228 230.000 C 205.725 230.000,204.846 229.911,204.310 229.300 C 203.329 228.180,202.530 226.354,202.069 224.174 C 201.643 222.159,199.810 216.263,199.407 215.612 C 198.856 214.721,196.771 216.208,196.349 217.792 C 196.113 218.676,195.653 220.210,195.325 221.200 C 194.998 222.190,194.491 224.043,194.199 225.318 C 193.173 229.796,192.778 230.000,185.124 230.000 L 178.801 230.000 177.608 228.100 C 176.952 227.055,176.297 225.570,176.154 224.800 C 176.010 224.030,175.625 222.872,175.298 222.227 C 174.971 221.582,174.157 219.422,173.489 217.427 L 172.274 213.800 172.106 197.058 C 171.928 179.325,172.023 178.213,173.739 177.877 C 176.809 177.277,187.147 177.629,188.056 178.364 M267.378 178.516 C 273.913 181.449,276.427 191.533,272.183 197.787 L 271.215 199.213 273.702 201.043 C 278.085 204.270,278.178 204.508,278.334 212.929 C 278.543 224.243,277.851 226.152,272.641 228.649 L 269.823 230.000 252.360 230.000 C 236.605 230.000,234.844 229.935,234.349 229.339 C 233.513 228.332,233.536 179.241,234.373 178.233 C 235.247 177.180,264.969 177.435,267.378 178.516 M250.880 190.480 C 250.382 190.978,250.205 195.825,250.643 196.967 C 250.991 197.876,256.863 197.879,257.771 196.972 C 259.103 195.639,259.049 191.582,257.685 190.546 C 256.801 189.874,251.537 189.823,250.880 190.480 M252.000 209.470 C 250.586 209.768,250.412 210.219,250.412 213.600 C 250.412 217.817,250.237 217.693,255.978 217.535 C 261.781 217.375,262.000 217.224,262.000 213.400 C 262.000 209.745,261.702 209.506,256.963 209.372 C 254.783 209.311,252.550 209.355,252.000 209.470 " stroke="none" fill="#040404" fill-rule="evenodd"></path></g></svg>
</span>
</a>
</li>
<li class="nav-item">
<a href="#0">
<span>About</span>
<span>
<svg class"nav-item-background" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0, 0, 400,400"><g id="svgg"><path class="nav-item-background" id="path0" d="M147.519 178.219 L 146.438 178.806 146.319 196.789 C 146.181 217.583,146.506 216.053,142.170 216.330 C 137.245 216.643,136.400 215.403,136.400 207.862 C 136.400 201.519,136.770 201.840,129.244 201.660 C 120.081 201.441,120.075 201.449,120.517 213.783 C 120.847 222.981,122.318 226.144,127.469 228.726 C 134.482 232.241,150.057 232.147,156.608 228.550 C 163.323 224.863,163.600 223.682,163.600 198.702 L 163.600 179.564 162.618 178.582 C 161.399 177.363,149.618 177.080,147.519 178.219 M173.739 177.877 C 172.023 178.213,171.928 179.325,172.106 197.058 L 172.274 213.800 173.489 217.427 C 174.157 219.422,174.971 221.582,175.298 222.227 C 175.625 222.872,176.010 224.030,176.154 224.800 C 176.297 225.570,176.952 227.055,177.608 228.100 L 178.801 230.000 185.124 230.000 C 192.778 230.000,193.173 229.796,194.199 225.318 C 194.491 224.043,194.998 222.190,195.325 221.200 C 195.653 220.210,196.113 218.676,196.349 217.792 C 196.771 216.208,198.856 214.721,199.407 215.612 C 199.810 216.263,201.643 222.159,202.069 224.174 C 202.530 226.354,203.329 228.180,204.310 229.300 C 204.846 229.911,205.725 230.000,211.228 230.000 L 217.533 230.000 218.716 228.500 C 219.367 227.675,220.033 226.370,220.197 225.600 C 220.361 224.830,220.695 223.840,220.939 223.400 C 221.737 221.963,223.634 216.247,223.992 214.200 C 224.778 209.701,224.477 178.994,223.639 178.235 C 222.639 177.330,209.768 177.428,208.660 178.349 C 208.074 178.836,207.998 180.234,207.986 190.749 C 207.975 199.895,207.849 202.821,207.435 203.569 L 206.898 204.538 206.611 203.569 C 204.769 197.349,202.542 195.383,197.691 195.694 C 194.219 195.917,193.307 196.580,191.983 199.842 C 191.044 202.157,190.904 202.268,189.897 201.500 C 189.322 201.062,189.226 199.640,189.120 190.064 L 189.000 179.128 188.056 178.364 C 187.147 177.629,176.809 177.277,173.739 177.877 M234.373 178.233 C 233.536 179.241,233.513 228.332,234.349 229.339 C 234.844 229.935,236.605 230.000,252.360 230.000 L 269.823 230.000 272.641 228.649 C 277.851 226.152,278.543 224.243,278.334 212.929 C 278.178 204.508,278.085 204.270,273.702 201.043 L 271.215 199.213 272.183 197.787 C 276.427 191.533,273.913 181.449,267.378 178.516 C 264.969 177.435,235.247 177.180,234.373 178.233 M257.685 190.546 C 259.049 191.582,259.103 195.639,257.771 196.972 C 256.863 197.879,250.991 197.876,250.643 196.967 C 250.205 195.825,250.382 190.978,250.880 190.480 C 251.537 189.823,256.801 189.874,257.685 190.546 M261.463 210.219 C 262.188 211.210,262.167 215.618,261.433 216.624 C 260.703 217.623,251.345 218.071,250.751 217.135 C 250.336 216.479,250.299 210.777,250.706 210.140 C 251.474 208.940,260.576 209.006,261.463 210.219 " stroke="none" fill="#f4f4f4" fill-rule="evenodd"></path><path id="path1" d="M19.200 200.000 L 19.200 298.800 200.000 298.800 L 380.800 298.800 380.800 200.000 L 380.800 101.200 200.000 101.200 L 19.200 101.200 19.200 200.000 M162.618 178.582 L 163.600 179.564 163.600 198.702 C 163.600 223.682,163.323 224.863,156.608 228.550 C 150.057 232.147,134.482 232.241,127.469 228.726 C 122.318 226.144,120.847 222.981,120.517 213.783 C 120.075 201.449,120.081 201.441,129.244 201.660 C 136.770 201.840,136.400 201.519,136.400 207.862 C 136.400 215.403,137.245 216.643,142.170 216.330 C 146.506 216.053,146.181 217.583,146.319 196.789 L 146.438 178.806 147.519 178.219 C 149.618 177.080,161.399 177.363,162.618 178.582 M188.056 178.364 L 189.000 179.128 189.120 190.064 C 189.226 199.640,189.322 201.062,189.897 201.500 C 190.904 202.268,191.044 202.157,191.983 199.842 C 193.307 196.580,194.219 195.917,197.691 195.694 C 202.542 195.383,204.769 197.349,206.611 203.569 L 206.898 204.538 207.435 203.569 C 207.849 202.821,207.975 199.895,207.986 190.749 C 207.998 180.234,208.074 178.836,208.660 178.349 C 209.768 177.428,222.639 177.330,223.639 178.235 C 224.477 178.994,224.778 209.701,223.992 214.200 C 223.634 216.247,221.737 221.963,220.939 223.400 C 220.695 223.840,220.361 224.830,220.197 225.600 C 220.033 226.370,219.367 227.675,218.716 228.500 L 217.533 230.000 211.228 230.000 C 205.725 230.000,204.846 229.911,204.310 229.300 C 203.329 228.180,202.530 226.354,202.069 224.174 C 201.643 222.159,199.810 216.263,199.407 215.612 C 198.856 214.721,196.771 216.208,196.349 217.792 C 196.113 218.676,195.653 220.210,195.325 221.200 C 194.998 222.190,194.491 224.043,194.199 225.318 C 193.173 229.796,192.778 230.000,185.124 230.000 L 178.801 230.000 177.608 228.100 C 176.952 227.055,176.297 225.570,176.154 224.800 C 176.010 224.030,175.625 222.872,175.298 222.227 C 174.971 221.582,174.157 219.422,173.489 217.427 L 172.274 213.800 172.106 197.058 C 171.928 179.325,172.023 178.213,173.739 177.877 C 176.809 177.277,187.147 177.629,188.056 178.364 M267.378 178.516 C 273.913 181.449,276.427 191.533,272.183 197.787 L 271.215 199.213 273.702 201.043 C 278.085 204.270,278.178 204.508,278.334 212.929 C 278.543 224.243,277.851 226.152,272.641 228.649 L 269.823 230.000 252.360 230.000 C 236.605 230.000,234.844 229.935,234.349 229.339 C 233.513 228.332,233.536 179.241,234.373 178.233 C 235.247 177.180,264.969 177.435,267.378 178.516 M250.880 190.480 C 250.382 190.978,250.205 195.825,250.643 196.967 C 250.991 197.876,256.863 197.879,257.771 196.972 C 259.103 195.639,259.049 191.582,257.685 190.546 C 256.801 189.874,251.537 189.823,250.880 190.480 M252.000 209.470 C 250.586 209.768,250.412 210.219,250.412 213.600 C 250.412 217.817,250.237 217.693,255.978 217.535 C 261.781 217.375,262.000 217.224,262.000 213.400 C 262.000 209.745,261.702 209.506,256.963 209.372 C 254.783 209.311,252.550 209.355,252.000 209.470 " stroke="none" fill="#040404" fill-rule="evenodd"></path></g></svg>
</span>
</a>
</li>
</ul>
答案 1 :(得分：0)
只需稍微调整一下CSS，即可实现此目的，而无需使用javascript / jquery。将您的CSS从nav-item-active更改为 nav-item:active （使用伪类），并且单击后填充颜色应会发生变化（请查看代码段进行尝试！）
新班级代码：
.nav-item:active .nav-item-background {
fill: red;
}
/*$('.nav-container li a').on('click', function(){
var selected = $(this);
selected.parent('li').addClass('nav-item-background').siblings('li').removeClass('nav-item-active');
});*/.nav-item .nav-item-background {
fill: blue;
}
.nav-item:active .nav-item-background {
fill: red;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="nav-container">
<li class="nav-item">
<a href="#0">
<span>Home</span>
<span>
<svg class="nav-item-background" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0, 0, 400,400"><g id="svgg"><path class="nav-item-background" id="path0" d="M147.519 178.219 L 146.438 178.806 146.319 196.789 C 146.181 217.583,146.506 216.053,142.170 216.330 C 137.245 216.643,136.400 215.403,136.400 207.862 C 136.400 201.519,136.770 201.840,129.244 201.660 C 120.081 201.441,120.075 201.449,120.517 213.783 C 120.847 222.981,122.318 226.144,127.469 228.726 C 134.482 232.241,150.057 232.147,156.608 228.550 C 163.323 224.863,163.600 223.682,163.600 198.702 L 163.600 179.564 162.618 178.582 C 161.399 177.363,149.618 177.080,147.519 178.219 M173.739 177.877 C 172.023 178.213,171.928 179.325,172.106 197.058 L 172.274 213.800 173.489 217.427 C 174.157 219.422,174.971 221.582,175.298 222.227 C 175.625 222.872,176.010 224.030,176.154 224.800 C 176.297 225.570,176.952 227.055,177.608 228.100 L 178.801 230.000 185.124 230.000 C 192.778 230.000,193.173 229.796,194.199 225.318 C 194.491 224.043,194.998 222.190,195.325 221.200 C 195.653 220.210,196.113 218.676,196.349 217.792 C 196.771 216.208,198.856 214.721,199.407 215.612 C 199.810 216.263,201.643 222.159,202.069 224.174 C 202.530 226.354,203.329 228.180,204.310 229.300 C 204.846 229.911,205.725 230.000,211.228 230.000 L 217.533 230.000 218.716 228.500 C 219.367 227.675,220.033 226.370,220.197 225.600 C 220.361 224.830,220.695 223.840,220.939 223.400 C 221.737 221.963,223.634 216.247,223.992 214.200 C 224.778 209.701,224.477 178.994,223.639 178.235 C 222.639 177.330,209.768 177.428,208.660 178.349 C 208.074 178.836,207.998 180.234,207.986 190.749 C 207.975 199.895,207.849 202.821,207.435 203.569 L 206.898 204.538 206.611 203.569 C 204.769 197.349,202.542 195.383,197.691 195.694 C 194.219 195.917,193.307 196.580,191.983 199.842 C 191.044 202.157,190.904 202.268,189.897 201.500 C 189.322 201.062,189.226 199.640,189.120 190.064 L 189.000 179.128 188.056 178.364 C 187.147 177.629,176.809 177.277,173.739 177.877 M234.373 178.233 C 233.536 179.241,233.513 228.332,234.349 229.339 C 234.844 229.935,236.605 230.000,252.360 230.000 L 269.823 230.000 272.641 228.649 C 277.851 226.152,278.543 224.243,278.334 212.929 C 278.178 204.508,278.085 204.270,273.702 201.043 L 271.215 199.213 272.183 197.787 C 276.427 191.533,273.913 181.449,267.378 178.516 C 264.969 177.435,235.247 177.180,234.373 178.233 M257.685 190.546 C 259.049 191.582,259.103 195.639,257.771 196.972 C 256.863 197.879,250.991 197.876,250.643 196.967 C 250.205 195.825,250.382 190.978,250.880 190.480 C 251.537 189.823,256.801 189.874,257.685 190.546 M261.463 210.219 C 262.188 211.210,262.167 215.618,261.433 216.624 C 260.703 217.623,251.345 218.071,250.751 217.135 C 250.336 216.479,250.299 210.777,250.706 210.140 C 251.474 208.940,260.576 209.006,261.463 210.219 " stroke="none" fill="#f4f4f4" fill-rule="evenodd"></path><path id="path1" d="M19.200 200.000 L 19.200 298.800 200.000 298.800 L 380.800 298.800 380.800 200.000 L 380.800 101.200 200.000 101.200 L 19.200 101.200 19.200 200.000 M162.618 178.582 L 163.600 179.564 163.600 198.702 C 163.600 223.682,163.323 224.863,156.608 228.550 C 150.057 232.147,134.482 232.241,127.469 228.726 C 122.318 226.144,120.847 222.981,120.517 213.783 C 120.075 201.449,120.081 201.441,129.244 201.660 C 136.770 201.840,136.400 201.519,136.400 207.862 C 136.400 215.403,137.245 216.643,142.170 216.330 C 146.506 216.053,146.181 217.583,146.319 196.789 L 146.438 178.806 147.519 178.219 C 149.618 177.080,161.399 177.363,162.618 178.582 M188.056 178.364 L 189.000 179.128 189.120 190.064 C 189.226 199.640,189.322 201.062,189.897 201.500 C 190.904 202.268,191.044 202.157,191.983 199.842 C 193.307 196.580,194.219 195.917,197.691 195.694 C 202.542 195.383,204.769 197.349,206.611 203.569 L 206.898 204.538 207.435 203.569 C 207.849 202.821,207.975 199.895,207.986 190.749 C 207.998 180.234,208.074 178.836,208.660 178.349 C 209.768 177.428,222.639 177.330,223.639 178.235 C 224.477 178.994,224.778 209.701,223.992 214.200 C 223.634 216.247,221.737 221.963,220.939 223.400 C 220.695 223.840,220.361 224.830,220.197 225.600 C 220.033 226.370,219.367 227.675,218.716 228.500 L 217.533 230.000 211.228 230.000 C 205.725 230.000,204.846 229.911,204.310 229.300 C 203.329 228.180,202.530 226.354,202.069 224.174 C 201.643 222.159,199.810 216.263,199.407 215.612 C 198.856 214.721,196.771 216.208,196.349 217.792 C 196.113 218.676,195.653 220.210,195.325 221.200 C 194.998 222.190,194.491 224.043,194.199 225.318 C 193.173 229.796,192.778 230.000,185.124 230.000 L 178.801 230.000 177.608 228.100 C 176.952 227.055,176.297 225.570,176.154 224.800 C 176.010 224.030,175.625 222.872,175.298 222.227 C 174.971 221.582,174.157 219.422,173.489 217.427 L 172.274 213.800 172.106 197.058 C 171.928 179.325,172.023 178.213,173.739 177.877 C 176.809 177.277,187.147 177.629,188.056 178.364 M267.378 178.516 C 273.913 181.449,276.427 191.533,272.183 197.787 L 271.215 199.213 273.702 201.043 C 278.085 204.270,278.178 204.508,278.334 212.929 C 278.543 224.243,277.851 226.152,272.641 228.649 L 269.823 230.000 252.360 230.000 C 236.605 230.000,234.844 229.935,234.349 229.339 C 233.513 228.332,233.536 179.241,234.373 178.233 C 235.247 177.180,264.969 177.435,267.378 178.516 M250.880 190.480 C 250.382 190.978,250.205 195.825,250.643 196.967 C 250.991 197.876,256.863 197.879,257.771 196.972 C 259.103 195.639,259.049 191.582,257.685 190.546 C 256.801 189.874,251.537 189.823,250.880 190.480 M252.000 209.470 C 250.586 209.768,250.412 210.219,250.412 213.600 C 250.412 217.817,250.237 217.693,255.978 217.535 C 261.781 217.375,262.000 217.224,262.000 213.400 C 262.000 209.745,261.702 209.506,256.963 209.372 C 254.783 209.311,252.550 209.355,252.000 209.470 " stroke="none" fill="#040404" fill-rule="evenodd"></path></g></svg>
</span>
</a>
</li>
</ul>