Develop Reference

Fixing the alignment of element in HTML/CSS

I have the following code:
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
/* signature animation */
#signature {
stroke-dasharray: 1920;
stroke-dashoffset: 1920;
animation: sign 6s ease;
animation-fill-mode: forwards;
}
#keyframes sign {
to {
stroke-dashoffset: 0;
}
}
/* Text */
#hero h1 {
margin: 0;
display: flex;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: black repeat;
background-clip: text;
-webkit-background-clip: text;
}
/* changing text CSS */
.quotes {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="quotes">
<h1> Text
</h1>
</div>
<div class="quotes"> <svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
</h1>
</section>
When you run the code, you can clearly see that the signature alignment and size is way off than the text Sample or the text Text.
How can I make the signature animation the same size as the word Sample or Text and make the signature animation align properly right after Sample?
It should display right after the Sample and should be the same size as Sample

ur problem is svg too large so u just need to set height for the svg like that
.quotes svg {
width: auto;
height: 1em;
}
example

You can reduce the size of the signature by reducing the svg width and height or use
.quotes svg{
width: 150px;
height: 1em;
}
(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
})();
#signature {
stroke-dasharray: 1920;
stroke-dashoffset: 1920;
animation: sign 6s ease;
animation-fill-mode: forwards;
}
#keyframes sign {
to {
stroke-dashoffset: 0;
}
}
/* Text */
#hero h1 {
margin: 0;
display: flex;
font-size: 64px;
font-weight: 700;
line-height: 56px;
color: transparent;
background: black repeat;
background-clip: text;
-webkit-background-clip: text;
}
/* changing text CSS */
.quotes {
display: none;
}
.quotes svg{
width: 150px;
height: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
<h1 style="margin-bottom: 16px">Sample
<div class="quotes">
<h1> Text
</h1>
</div>
<div class="quotes"> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
</h1>
</section>

svg stroke-dasharray not wroking

I just started working with SVG's and I got stuck at stroke-dasharray part.
I searched a lot but still, I could not find the solution to my problem. I think I am missing something.
Even after using stroke-dasharray, the text is not dashed. I was trying to do an animation effect with the text like from dashed to complete bold finish.
#namelogo{
width: 100%;
height: auto;
}
#namelogo path:nth-child(1){
stroke-dasharray: 300;
}
<div class="logo">
<svg id="namelogo" viewBox="0 0 659 112" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="-0.791992" y="0.335999" width="660" height="111" fill="black">
<rect fill="white" x="-0.791992" y="0.335999" width="660" height="111"/>
<path d="M38.912 107.008C32.288 107.008 26.336 105.856 21.056 103.552C15.872 101.152 11.792 97.888 8.81601 93.76C5.84001 89.536 4.30401 84.688 4.20801 79.216H18.176C18.656 83.92 20.576 87.904 23.936 91.168C27.392 94.336 32.384 95.92 38.912 95.92C45.152 95.92 50.048 94.384 53.6 91.312C57.248 88.144 59.072 84.112 59.072 79.216C59.072 75.376 58.016 72.256 55.904 69.856C53.792 67.456 51.152 65.632 47.984 64.384C44.816 63.136 40.544 61.792 35.168 60.352C28.544 58.624 23.216 56.896 19.184 55.168C15.248 53.44 11.84 50.752 8.96001 47.104C6.17601 43.36 4.78401 38.368 4.78401 32.128C4.78401 26.656 6.17601 21.808 8.96001 17.584C11.744 13.36 15.632 10.096 20.624 7.792C25.712 5.488 31.52 4.336 38.048 4.336C47.456 4.336 55.136 6.688 61.088 11.392C67.136 16.096 70.544 22.336 71.312 30.112H56.912C56.432 26.272 54.416 22.912 50.864 20.032C47.312 17.056 42.608 15.568 36.752 15.568C31.28 15.568 26.816 17.008 23.36 19.888C19.904 22.672 18.176 26.608 18.176 31.696C18.176 35.344 19.184 38.32 21.2 40.624C23.312 42.928 25.856 44.704 28.832 45.952C31.904 47.104 36.176 48.448 41.648 49.984C48.272 51.808 53.6 53.632 57.632 55.456C61.664 57.184 65.12 59.92 68 63.664C70.88 67.312 72.32 72.304 72.32 78.64C72.32 83.536 71.024 88.144 68.432 92.464C65.84 96.784 62 100.288 56.912 102.976C51.824 105.664 45.824 107.008 38.912 107.008Z"/>
<path d="M104.42 5.632V69.136C104.42 78.064 106.58 84.688 110.9 89.008C115.316 93.328 121.412 95.488 129.188 95.488C136.868 95.488 142.868 93.328 147.188 89.008C151.604 84.688 153.812 78.064 153.812 69.136V5.632H166.916V68.992C166.916 77.344 165.236 84.4 161.876 90.16C158.516 95.824 153.956 100.048 148.196 102.832C142.532 105.616 136.148 107.008 129.044 107.008C121.94 107.008 115.508 105.616 109.748 102.832C104.084 100.048 99.5716 95.824 96.2116 90.16C92.9476 84.4 91.3156 77.344 91.3156 68.992V5.632H104.42Z"/>
<path d="M290.583 6.352V106H277.479V31.696L244.359 106H235.144L201.88 31.552V106H188.776V6.352H202.888L239.752 88.72L276.616 6.352H290.583Z"/>
<path d="M325.911 5.632V106H312.807V5.632H325.911Z"/>
<path d="M410.02 5.632V16.288H382.66V106H369.556V16.288H342.052V5.632H410.02Z"/>
<path d="M493.255 35.008C493.255 43.36 490.375 50.32 484.615 55.888C478.951 61.36 470.263 64.096 458.551 64.096H439.255V106H426.151V5.632H458.551C469.879 5.632 478.471 8.368 484.327 13.84C490.279 19.312 493.255 26.368 493.255 35.008ZM458.551 53.296C465.847 53.296 471.222 51.712 474.678 48.544C478.134 45.376 479.862 40.864 479.862 35.008C479.862 22.624 472.759 16.432 458.551 16.432H439.255V53.296H458.551Z"/>
<path d="M568.869 83.68H525.093L517.029 106H503.205L539.493 6.208H554.613L590.757 106H576.933L568.869 83.68ZM565.125 73.024L546.981 22.336L528.837 73.024H565.125Z"/>
<path d="M619.676 95.344H654.812V106H606.572V5.632H619.676V95.344Z"/>
</mask>
<path d="M38.912 107.008C32.288 107.008 26.336 105.856 21.056 103.552C15.872 101.152 11.792 97.888 8.81601 93.76C5.84001 89.536 4.30401 84.688 4.20801 79.216H18.176C18.656 83.92 20.576 87.904 23.936 91.168C27.392 94.336 32.384 95.92 38.912 95.92C45.152 95.92 50.048 94.384 53.6 91.312C57.248 88.144 59.072 84.112 59.072 79.216C59.072 75.376 58.016 72.256 55.904 69.856C53.792 67.456 51.152 65.632 47.984 64.384C44.816 63.136 40.544 61.792 35.168 60.352C28.544 58.624 23.216 56.896 19.184 55.168C15.248 53.44 11.84 50.752 8.96001 47.104C6.17601 43.36 4.78401 38.368 4.78401 32.128C4.78401 26.656 6.17601 21.808 8.96001 17.584C11.744 13.36 15.632 10.096 20.624 7.792C25.712 5.488 31.52 4.336 38.048 4.336C47.456 4.336 55.136 6.688 61.088 11.392C67.136 16.096 70.544 22.336 71.312 30.112H56.912C56.432 26.272 54.416 22.912 50.864 20.032C47.312 17.056 42.608 15.568 36.752 15.568C31.28 15.568 26.816 17.008 23.36 19.888C19.904 22.672 18.176 26.608 18.176 31.696C18.176 35.344 19.184 38.32 21.2 40.624C23.312 42.928 25.856 44.704 28.832 45.952C31.904 47.104 36.176 48.448 41.648 49.984C48.272 51.808 53.6 53.632 57.632 55.456C61.664 57.184 65.12 59.92 68 63.664C70.88 67.312 72.32 72.304 72.32 78.64C72.32 83.536 71.024 88.144 68.432 92.464C65.84 96.784 62 100.288 56.912 102.976C51.824 105.664 45.824 107.008 38.912 107.008Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M104.42 5.632V69.136C104.42 78.064 106.58 84.688 110.9 89.008C115.316 93.328 121.412 95.488 129.188 95.488C136.868 95.488 142.868 93.328 147.188 89.008C151.604 84.688 153.812 78.064 153.812 69.136V5.632H166.916V68.992C166.916 77.344 165.236 84.4 161.876 90.16C158.516 95.824 153.956 100.048 148.196 102.832C142.532 105.616 136.148 107.008 129.044 107.008C121.94 107.008 115.508 105.616 109.748 102.832C104.084 100.048 99.5716 95.824 96.2116 90.16C92.9476 84.4 91.3156 77.344 91.3156 68.992V5.632H104.42Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M290.583 6.352V106H277.479V31.696L244.359 106H235.144L201.88 31.552V106H188.776V6.352H202.888L239.752 88.72L276.616 6.352H290.583Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M325.911 5.632V106H312.807V5.632H325.911Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M410.02 5.632V16.288H382.66V106H369.556V16.288H342.052V5.632H410.02Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M493.255 35.008C493.255 43.36 490.375 50.32 484.615 55.888C478.951 61.36 470.263 64.096 458.551 64.096H439.255V106H426.151V5.632H458.551C469.879 5.632 478.471 8.368 484.327 13.84C490.279 19.312 493.255 26.368 493.255 35.008ZM458.551 53.296C465.847 53.296 471.222 51.712 474.678 48.544C478.134 45.376 479.862 40.864 479.862 35.008C479.862 22.624 472.759 16.432 458.551 16.432H439.255V53.296H458.551Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M568.869 83.68H525.093L517.029 106H503.205L539.493 6.208H554.613L590.757 106H576.933L568.869 83.68ZM565.125 73.024L546.981 22.336L528.837 73.024H565.125Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M619.676 95.344H654.812V106H606.572V5.632H619.676V95.344Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
</svg>
</div>

The path:nth-child(1) rule is matching any <path> element that is the first child of a parent element in the SVG. The first child of the SVG is the <mask> element. And the first child of the only other parent, the <mask>, is a <rect> element. So that CSS rule is not matching anything. To get the first path (second child) you would need to use nth-child(2),
The mask seems to be for implementing an outside stroke, so you probably don't want the rule to to apply all paths in the mask also. So you should probably use #namelogo > path:nth-child(2). That will limit the rule to only the direct children of the #namelogo.
The paths are white, so they are not showing up on a white background. In the example below I've set the svg background to red, so my changes show up.
#namelogo{
width: 100%;
height: auto;
background-color: red;
}
#namelogo > path:nth-child(2){
stroke-dasharray: 300;
}
<div class="logo">
<svg id="namelogo" viewBox="0 0 659 112" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="-0.791992" y="0.335999" width="660" height="111" fill="black">
<rect fill="white" x="-0.791992" y="0.335999" width="660" height="111"/>
<path d="M38.912 107.008C32.288 107.008 26.336 105.856 21.056 103.552C15.872 101.152 11.792 97.888 8.81601 93.76C5.84001 89.536 4.30401 84.688 4.20801 79.216H18.176C18.656 83.92 20.576 87.904 23.936 91.168C27.392 94.336 32.384 95.92 38.912 95.92C45.152 95.92 50.048 94.384 53.6 91.312C57.248 88.144 59.072 84.112 59.072 79.216C59.072 75.376 58.016 72.256 55.904 69.856C53.792 67.456 51.152 65.632 47.984 64.384C44.816 63.136 40.544 61.792 35.168 60.352C28.544 58.624 23.216 56.896 19.184 55.168C15.248 53.44 11.84 50.752 8.96001 47.104C6.17601 43.36 4.78401 38.368 4.78401 32.128C4.78401 26.656 6.17601 21.808 8.96001 17.584C11.744 13.36 15.632 10.096 20.624 7.792C25.712 5.488 31.52 4.336 38.048 4.336C47.456 4.336 55.136 6.688 61.088 11.392C67.136 16.096 70.544 22.336 71.312 30.112H56.912C56.432 26.272 54.416 22.912 50.864 20.032C47.312 17.056 42.608 15.568 36.752 15.568C31.28 15.568 26.816 17.008 23.36 19.888C19.904 22.672 18.176 26.608 18.176 31.696C18.176 35.344 19.184 38.32 21.2 40.624C23.312 42.928 25.856 44.704 28.832 45.952C31.904 47.104 36.176 48.448 41.648 49.984C48.272 51.808 53.6 53.632 57.632 55.456C61.664 57.184 65.12 59.92 68 63.664C70.88 67.312 72.32 72.304 72.32 78.64C72.32 83.536 71.024 88.144 68.432 92.464C65.84 96.784 62 100.288 56.912 102.976C51.824 105.664 45.824 107.008 38.912 107.008Z"/>
<path d="M104.42 5.632V69.136C104.42 78.064 106.58 84.688 110.9 89.008C115.316 93.328 121.412 95.488 129.188 95.488C136.868 95.488 142.868 93.328 147.188 89.008C151.604 84.688 153.812 78.064 153.812 69.136V5.632H166.916V68.992C166.916 77.344 165.236 84.4 161.876 90.16C158.516 95.824 153.956 100.048 148.196 102.832C142.532 105.616 136.148 107.008 129.044 107.008C121.94 107.008 115.508 105.616 109.748 102.832C104.084 100.048 99.5716 95.824 96.2116 90.16C92.9476 84.4 91.3156 77.344 91.3156 68.992V5.632H104.42Z"/>
<path d="M290.583 6.352V106H277.479V31.696L244.359 106H235.144L201.88 31.552V106H188.776V6.352H202.888L239.752 88.72L276.616 6.352H290.583Z"/>
<path d="M325.911 5.632V106H312.807V5.632H325.911Z"/>
<path d="M410.02 5.632V16.288H382.66V106H369.556V16.288H342.052V5.632H410.02Z"/>
<path d="M493.255 35.008C493.255 43.36 490.375 50.32 484.615 55.888C478.951 61.36 470.263 64.096 458.551 64.096H439.255V106H426.151V5.632H458.551C469.879 5.632 478.471 8.368 484.327 13.84C490.279 19.312 493.255 26.368 493.255 35.008ZM458.551 53.296C465.847 53.296 471.222 51.712 474.678 48.544C478.134 45.376 479.862 40.864 479.862 35.008C479.862 22.624 472.759 16.432 458.551 16.432H439.255V53.296H458.551Z"/>
<path d="M568.869 83.68H525.093L517.029 106H503.205L539.493 6.208H554.613L590.757 106H576.933L568.869 83.68ZM565.125 73.024L546.981 22.336L528.837 73.024H565.125Z"/>
<path d="M619.676 95.344H654.812V106H606.572V5.632H619.676V95.344Z"/>
</mask>
<path d="M38.912 107.008C32.288 107.008 26.336 105.856 21.056 103.552C15.872 101.152 11.792 97.888 8.81601 93.76C5.84001 89.536 4.30401 84.688 4.20801 79.216H18.176C18.656 83.92 20.576 87.904 23.936 91.168C27.392 94.336 32.384 95.92 38.912 95.92C45.152 95.92 50.048 94.384 53.6 91.312C57.248 88.144 59.072 84.112 59.072 79.216C59.072 75.376 58.016 72.256 55.904 69.856C53.792 67.456 51.152 65.632 47.984 64.384C44.816 63.136 40.544 61.792 35.168 60.352C28.544 58.624 23.216 56.896 19.184 55.168C15.248 53.44 11.84 50.752 8.96001 47.104C6.17601 43.36 4.78401 38.368 4.78401 32.128C4.78401 26.656 6.17601 21.808 8.96001 17.584C11.744 13.36 15.632 10.096 20.624 7.792C25.712 5.488 31.52 4.336 38.048 4.336C47.456 4.336 55.136 6.688 61.088 11.392C67.136 16.096 70.544 22.336 71.312 30.112H56.912C56.432 26.272 54.416 22.912 50.864 20.032C47.312 17.056 42.608 15.568 36.752 15.568C31.28 15.568 26.816 17.008 23.36 19.888C19.904 22.672 18.176 26.608 18.176 31.696C18.176 35.344 19.184 38.32 21.2 40.624C23.312 42.928 25.856 44.704 28.832 45.952C31.904 47.104 36.176 48.448 41.648 49.984C48.272 51.808 53.6 53.632 57.632 55.456C61.664 57.184 65.12 59.92 68 63.664C70.88 67.312 72.32 72.304 72.32 78.64C72.32 83.536 71.024 88.144 68.432 92.464C65.84 96.784 62 100.288 56.912 102.976C51.824 105.664 45.824 107.008 38.912 107.008Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M104.42 5.632V69.136C104.42 78.064 106.58 84.688 110.9 89.008C115.316 93.328 121.412 95.488 129.188 95.488C136.868 95.488 142.868 93.328 147.188 89.008C151.604 84.688 153.812 78.064 153.812 69.136V5.632H166.916V68.992C166.916 77.344 165.236 84.4 161.876 90.16C158.516 95.824 153.956 100.048 148.196 102.832C142.532 105.616 136.148 107.008 129.044 107.008C121.94 107.008 115.508 105.616 109.748 102.832C104.084 100.048 99.5716 95.824 96.2116 90.16C92.9476 84.4 91.3156 77.344 91.3156 68.992V5.632H104.42Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M290.583 6.352V106H277.479V31.696L244.359 106H235.144L201.88 31.552V106H188.776V6.352H202.888L239.752 88.72L276.616 6.352H290.583Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M325.911 5.632V106H312.807V5.632H325.911Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M410.02 5.632V16.288H382.66V106H369.556V16.288H342.052V5.632H410.02Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M493.255 35.008C493.255 43.36 490.375 50.32 484.615 55.888C478.951 61.36 470.263 64.096 458.551 64.096H439.255V106H426.151V5.632H458.551C469.879 5.632 478.471 8.368 484.327 13.84C490.279 19.312 493.255 26.368 493.255 35.008ZM458.551 53.296C465.847 53.296 471.222 51.712 474.678 48.544C478.134 45.376 479.862 40.864 479.862 35.008C479.862 22.624 472.759 16.432 458.551 16.432H439.255V53.296H458.551Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M568.869 83.68H525.093L517.029 106H503.205L539.493 6.208H554.613L590.757 106H576.933L568.869 83.68ZM565.125 73.024L546.981 22.336L528.837 73.024H565.125Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
<path d="M619.676 95.344H654.812V106H606.572V5.632H619.676V95.344Z" stroke="white" stroke-width="8" mask="url(#path-1-outside-1)"/>
</svg>
</div>

SVG cannot be displayed as an image

I've got svg string file on database. I want to show it on my Asp.Net Core projects view. I'm calling my data as Model from controller. When I'm trying to do it, it displays as text on my page. Here is my svg:
And here is my code on Index.cshtml file:
#foreach (var item in Model)
{
<div>
<div>
<div id="svg-#item.ID"></div>
<script>
debugger;
var newSvg = '#item.SVG';
var svg = document.getElementById('svg-' + '#item.ID');
svg.append(newSvg);
</script>
</div>
</div>
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="100%" width="100%" viewBox="0 0 2250 1950">
<g>
<g fill="#aaffff" stroke="black" stroke-width="4">
<path id="glass" d="M892.5 293 L343 293 L343 1457 L892.5 1457z"/>
<path id="glass" d="M983.5 1407 L1707 1407 L1707 343 L983.5 343z"/>
</g>
<g stroke="black">
<g name="ProfileGroup0-profileundefined" stroke-width="3" fill="#ffffff">
<path d="M300 250 L300 1500 L343 1457 L343 293z"/>
<path d="M300 1500 L1800 1500 L1757 1457 L343 1457z"/>
<path d="M1800 1500 L1800 250 L1757 293 L1757 1457z"/>
<path d="M1800 250 L300 250 L343 293 L1757 293z"/>
<path d="M892.5 293 L892.5 1457 L933.5 1457 L933.5 293z" name="ProfileGroup0-profileundefinedVerticalCentervertical-center-profile0"/>
</g>
<g name="ProfileGroup0-profileundefinedSash0-sash-profile0" stroke-width="3" fill="#ffffff">
<path d="M925.5 1465 L1765 1465 L1707 1407 L983.5 1407z"/>
<path d="M1765 1465 L1765 285 L1707 343 L1707 1407z"/>
<path d="M1765 285 L925.5 285 L983.5 343 L1707 343z"/>
<path d="M925.5 285 L925.5 1465 L983.5 1407 L983.5 343z"/>
</g>
<path d="M166.53439331054688 250 L166.53439331054688 803.1251507979999 M166.53439331054688 946.874849202 L166.53439331054688 1500 M150.97193854994686 1463.6876055586 L166.53439331054688 1500 L182.0968480711469 1463.6876055586 M150.97193854994686 286.31239444140004 L166.53439331054688 250 L182.0968480711469 286.31239444140004z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="57.08134549943752" y="906.874849202" font-size="103.74969840400006" zoom="0.19277164471476577">1250</text>
<path d="M300 1663.7496984040001 L914.6095275878906 1663.7496984040001 M1185.3904724121094 1663.7496984040001 L1800 1663.7496984040001 M1763.6876055586 1679.3121531646002 L1800 1663.7496984040001 L1763.6876055586 1648.1872436434 M336.31239444140004 1679.3121531646002 L300 1663.7496984040001 L336.31239444140004 1648.1872436434z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="940.5469521888906" y="1695.6245476060003" font-size="103.74969840400006" zoom="0.19277164471476577">1500</text>
<path d="M1933.4656066894531 250 L1933.4656066894531 803.1251507979999 M1933.4656066894531 946.874849202 L1933.4656066894531 1500 M1917.9031519288533 1463.6876055586 L1933.4656066894531 1500 L1949.028061450053 1463.6876055586 M1917.9031519288533 286.31239444140004 L1933.4656066894531 250 L1949.028061450053 286.31239444140004z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="1824.0125588783437" y="906.874849202" font-size="103.74969840400006" zoom="0.19277164471476577">1250</text>
<path d="M300 86.25030159599993 L914.6095275878906 86.25030159599993 M1185.3904724121094 86.25030159599993 L1800 86.25030159599993 M1763.6876055586 101.81275635659995 L1800 86.25030159599993 L1763.6876055586 70.68784683539991 M336.31239444140004 101.81275635659995 L300 86.25030159599993 L336.31239444140004 70.68784683539991z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="940.5469521888906" y="118.12515079799995" font-size="103.74969840400006" zoom="0.19277164471476577">1500</text>
<path d="M300 158.12515079799994 L499.95714569091797 158.12515079799994 M713.042854309082 158.12515079799994 L913 158.12515079799994 M876.6876055585999 173.68760555859996 L913 158.12515079799994 L876.6876055585999 142.56269603739992 M336.31239444140004 173.68760555859996 L300 158.12515079799994 L336.31239444140004 142.56269603739992z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="525.894570291918" y="189.99999999999994" font-size="103.74969840400006" zoom="0.19277164471476577">613</text>
<path d="M913 158.12515079799994 L1249.957145690918 158.12515079799994 M1463.042854309082 158.12515079799994 L1800 158.12515079799994 M1763.6876055586 173.68760555859996 L1800 158.12515079799994 L1763.6876055586 142.56269603739992 M949.3123944414001 173.68760555859996 L913 158.12515079799994 L949.3123944414001 142.56269603739992z" stroke-width="3.890613690150002" fill="#ffffff"/>
<text x="1275.894570291918" y="189.99999999999994" font-size="103.74969840400006" zoom="0.19277164471476577">887</text>
</g>
<g>
<line x1="1707" y1="343" x2="983.5" y2="875" stroke="black"/>
<line x1="983.5" y1="875" x2="1707" y2="1407" stroke="black"/>
<image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902220355008321.png" width="28" height="140" x="-967.5" y="845" transform="scale(-1,1) rotate(0,-954.5,875)"/>
<g>
<image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902190440564245.png" width="15" height="75" x="1757" y="-1387" transform="scale(1,-1) rotate(-180,1757,-1357)"/>
<image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902190440564245.png" width="15" height="75" x="1757" y="-899.5" transform="scale(1,-1) rotate(-180,1757,-869.5)"/>
<image xlink:href="https://herofis.com/documents/company/1000006/stockpictures/orginal/201902190440564245.png" width="15" height="75" x="1757" y="-412" transform="scale(1,-1) rotate(-180,1757,-382)"/>
</g>
</g>
</g>
</svg>
How can fix this?
UPDATE:

You have a namespace issue. Try xml linq like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Xml;
using System.Xml.Linq;
using System.IO;
namespace ConsoleApplication1
{
class Program
{
const string FILENAME = #"c:\temp\test.xml";
static void Main(string[] args)
{
string xml = File.ReadAllText(FILENAME);
XDocument doc = XDocument.Parse(xml);
//use following from a filename
//XDocument doc = XDocument.Load(FILENAME);
List<XElement> svgs = doc.Descendants().Where(x => x.Name.LocalName == "svg").ToList();
foreach (XElement svg in svgs)
{
//you may need to encode
//string encodedXml = System.Net.WebUtility.HtmlEncode(svg.ToString());
//Console.WriteLine(encodedXml);
Console.WriteLine(svg.ToString());
}
Console.ReadLine();
}
}
}

I've solved problem. I used #Html.Raw(Model.SVG) on view, SVG files are now displayed.

HTML, SVG, and Javascript with XML - DOMParser not reading every other element

I'm working on a program that saves and loads SVG data to and from an xml file and it does work, but for some reason whenever the DOMParser runs, every other element is not being read.
The XML file I am trying to read is formatted like this:
<?xml version="1.0" encoding="utf-8"?>
<marks>
<path xmlns="http://www.w3.org/2000/svg" class="mark" d="M736 264 L736 264 L736 264 L736 265 L736 268 L736 269 L736 272 L736 277 L736 280 L736 288 L736 304 L736 312 L737 318 L740 356 L740 364 L740 376 L741 398 L742 430 L742 474 L744 488" fill="none" stroke="#000000" stroke-width="2" id="A"></path>
<path xmlns="http://www.w3.org/2000/svg" class="mark" d="M1230 426 L1230 428 L1230 428 L1229 428 L1228 429 L1228 430 L1228 430 L1226 432 L1224 432 L1218 434 L1216 436 L1209 436 L1194 440 L1186 440 L1180 440 L1158 444 L1092 445 L1018 446 L928 446 L902 446" fill="none" stroke="#000000" stroke-width="2" id="AA"></path>
</marks>
In this example, the first element is not read but the second one is. Here's the javascript code:
var e = '<?xml version="1.0" encoding="utf-8"?><marks><path xmlns="http://www.w3.org/2000/svg" class="mark" d="M736 264 L736 264 L736 264 L736 265 L736 268 L736 269 L736 272 L736 277 L736 280 L736 288 L736 304 L736 312 L737 318 L740 356 L740 364 L740 376 L741 398 L742 430 L742 474 L744 488" fill="none" stroke="#000000" stroke-width="2" id="A"></path><path xmlns="http://www.w3.org/2000/svg" class="mark" d="M1230 426 L1230 428 L1230 428 L1229 428 L1228 429 L1228 430 L1228 430 L1226 432 L1224 432 L1218 434 L1216 436 L1209 436 L1194 440 L1186 440 L1180 440 L1158 444 L1092 445 L1018 446 L928 446 L902 446" fill="none" stroke="#000000" stroke-width="2" id="AA"></path></marks>';
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(e, "text/xml");
console.log(xmlDoc);
Even at this point the XML is not being parsed correctly. Please let me know if you have a solution.

Try to use "application/xml" instead of "text/xml".

Adding class active to a polygon on SVG map once an option is selected

I'm currently working on an SVG map, with a drop down menu where you can select a country and it highlights the country on the map. how do I get the active class applied on a specific polygon once a country is selected from the options?
Code
<select id="countries" data-placeholder="Select a country">
<option></option>
<optgroup label="Alaskan/Hawaiian Time Zone" placeholder="select a country">
<option class="country1" value="AK">Alaska</option>
<option class="country2" value="HI">Hawaii</option>
</optgroup>
</select>
svg map
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2049 1393">
<g fill="none" fill-rule="evenodd" transform="translate(-22)">
<polygon id="country1" fill="#1976D2" points="515.072 558.93 491.073 558.05 475.859 567.598 475.645 574.682 485.502 584.229 516.144 589.553 515.072 558.93" opacity=".1" />
<polygon id="country2" fill="#1976D2" points="306.283 920.783 232.108 934.846 215.945 947.234 225.818 998.682 196.332 999.872 178.596 1028.66 136.354 1038.888 136.485 1059.829 277.65 1166.505 299.337 1169.205 378.448 1106.824 370.541 1096.772 355.689 1094.745 346.777 1079.667 346.777 1017.286 340.836 1011.246 341.841 995.155 326.028 979.064 324.062 961.959 330.964 956.933 327.993 938.814 324.105 926.822"
opacity=".3" />
<polygon id="country3" fill="#1976D2" points="161.528 945.985 151.654 967.862 128.889 978.8 110.101 1029.526 73.485 1051.403 22.058 1135.902 72.524 1134.9 74.49 1110.06 87.336 1110.06 87.336 1076.243 131.86 1076.243 132.865 1032.489 175.423 1022.553 193.25 993.704 219 993 210 949"
opacity=".3" />
<polygon id="country4" fill="#1976D2" points="31.586 1152.501 29.619 1206.437 43.475 1196.455 53.353 1194.441 67.208 1199.432 83.031 1221.41 97.892 1211.428 170.142 1210.421 153 1089 165 1089 135.831 1065 135.831 1081 93 1081 93 1117 81 1117 79 1142.205 23 1142.205"
opacity=".1" />
<polygon id="country5" fill="#FFFFFF" points="44.64 1200.12 27.262 1212.446 23.292 1219.342 22.058 1226.238 28.453 1230.721 49.8 1230.419 63.517 1226.799 65.061 1233.393 63.826 1242.099 76.926 1248.392 79.66 1251.409 97.038 1252.013 97.655 1244.513 81.777 1225.894 64.091 1202.49 53.108 1198.008 44.64 1200.12"
opacity=".6" />
<polygon id="country6" fill="#FFFFFF" points="32.52 1235.268 31.957 1239.411 61.94 1239.038 63.456 1235.193 62.806 1231.311 54.184 1234.334 32.52 1235.268" opacity=".8" />
<polygon id="country7" fill="#FFFFFF" points="31.957 1244.812 37.569 1258.313 40.692 1249.97 78.756 1253.917 62.281 1245.53 31.957 1244.812" opacity=".8" />
<polygon id="country8" fill="#FFFFFF" points="38.257 1264.969 44.357 1277.215 61.482 1262.272 61.656 1257.675 41.482 1254.713 38.257 1264.969" opacity=".8" />
<polygon id="country9" fill="#FFFFFF" points="46.357 1277.928 59.648 1298.428 76.961 1283.36 94.711 1282.571 109.488 1302.239 122.036 1310.518 126.757 1301.319 130.954 1298.954 130.648 1278.717 122.298 1254.713 96.678 1257.56 64.981 1255.019 64.807 1263.167 46.357 1277.928"
opacity=".8" />
<polygon id="country10" fill="#FFFFFF" points="61.656 1300.67 86.345 1324.019 103.955 1303.107 92.944 1286.216 77.781 1287.712 61.656 1300.67" opacity=".8" />
<polygon id="country11" fill="#FFFFFF" points="89.556 1326.099 137.254 1358.222 136.125 1333.889 121.702 1316.778 107.627 1304.217 89.556 1326.099" opacity=".8" />
<polygon id="country12" fill="#FFFFFF" points="140.203 1360.022 159.097 1346.659 182.582 1342.557 206.552 1347.718 194.324 1329.238 190.749 1317.948 194.324 1284.562 172.914 1285.576 163.203 1276.315 142.808 1276.844 133.096 1278.388 134.112 1300.968 128.991 1303.041 122.855 1314.332 138.658 1332.811 140.203 1360.022"
opacity=".8" />
<polygon id="country13" fill="#1976D2" points="101.199 1213.459 175.92 1213.028 158.637 1094.159 174 1094.159 273 1171 286 1173 281.805 1207.503 221.792 1212.898 175.484 1247.082 167.06 1270.476 134.893 1271.814 126.688 1248.464 102.028 1250.19 102.988 1242.55 87.756 1222.566"
opacity=".1" />
<polygon id="country14" fill="#FFFFFF" points="222.95 1218.194 238.896 1216.909 265.051 1254.287 240.78 1272.798 223.213 1268.237 199.599 1268.547 195.788 1282.541 175.986 1283.515 170.553 1276.031 177.563 1253.268 222.95 1218.194" opacity=".6" />
<polygon id="country19" fill="#1976D2" points="277.87 1251.751 287.923 1236.709 304.795 1233.7 322.76 1244.644 361.095 1245.734 390.731 1233.7 401.877 1224.152 402.707 1211.595 423.382 1190.797 428.846 1144.886 415.252 1116.458 383 1110 301 1174 290 1174 285 1214 242.551 1217.088 266.723 1252.013"
opacity=".1" />
<polygon id="country20" fill="#FFFFFF" points="193.953 1317.072 198.953 1328.471 211.988 1348.321 219.22 1348.061 238.951 1337.183 237.568 1275.248 222.3 1270.914 200.917 1271.478 193.953 1317.072" opacity=".8" />
<polygon id="country21" fill="#FFFFFF" points="241.861 1336.62 254.251 1329.813 253.974 1284.941 245.929 1272.714 240.751 1276.79 241.861 1336.62" opacity=".8" />
<polygon id="country22" fill="#FFFFFF" points="258.365 1328.519 267.451 1328.519 267.965 1302.301 279.45 1285.359 278.936 1255.874 268.522 1255.613 250.651 1269.811 258.108 1284.27 258.365 1328.519" opacity=".8" />
<polygon id="country23" fill="#FFFFFF" points="270.451 1325.964 287.761 1326.774 308.648 1349.236 318.804 1351.922 326.752 1348.171 338.852 1346.551 342.959 1330.269 359.43 1319.826 377.27 1319.016 409.947 1261.006 409.417 1247.921 394.315 1236.711 364.11 1249.541 323.706 1248.987 304.453 1237.223 290.719 1240.164 283.566 1252.183 283.036 1286.111 271.51 1301.882 270.451 1325.964"
opacity=".8" />
<polygon id="country24" fill="#1976D2" points="328.931 925.858 353.323 916.282 361.351 921.349 361.659 927.532 357.91 932.298 358.484 940.757 362.233 942.732 362.233 957.932 357.91 964.974 358.484 969.483 374.848 975.108 361.659 995.074 356.499 994.773 355.617 1010.832 349.883 1011.691 344.987 1007.483 346.133 991.167 330.078 975.966 328.049 962.741 335.812 956.816 328.931 925.858"
opacity=".3" />
<polygon id="country25" fill="#1976D2" points="358.538 1013.307 360.564 997.62 363.999 997.62 378.047 974.788 412.705 984.766 422.174 999.32 456.259 1014.745 474.006 1007.337 472.289 999.93 464.538 992.522 465.419 987.38 478.014 976.836 502.939 976.836 512.408 989.385 532.445 992.261 535.043 1153.004 520.158 1152.437 430.233 1106.162 420.5 1111.609 383.552 1102.458 373.511 1089.343 358.891 1087.338 351.448 1074.223 351.669 1014.44"
opacity=".3" />
<polygon id="country26" fill="#1976D2" points="535.943 994.413 547.557 994.722 570.175 1001.076 580.919 1001.385 594.229 990.089 600.449 990.089 611.758 996.443 626.068 996.443 628.635 996.266 637.682 1022.653 640.248 1031.169 642.641 1043.921 638.378 1047.098 631.027 1043.347 622.545 1015.284 614.89 1014.71 614.324 1024.241 619.413 1040.744 660.17 1091.928 661.04 1113.902 649.165 1127.801 537.64 1126.522 535.943 994.413"
opacity=".3" />
<polygon id="country27" fill="#1976D2" points="407.47 1224.42 408.041 1211.644 428.857 1191.678 434.435 1142.652 420.557 1116.494 430.263 1111.6 524.244 1159.889 523.673 1207.269 507.116 1221.171 507.116 1245.598 517.964 1266.299 498.816 1266.299 467.108 1297.222 466.274 1306.577 442.867 1306.274 442.559 1310.518 429.209 1308.785 420.074 1291.765 413.223 1288.43 414.101 1283.233 422.709 1276.737 422.709 1246.334 410.808 1244.515 396.447 1233.991 407.47 1224.42 407.47 1224.42"
opacity=".1" />
<polygon id="country28" fill="#FFFFFF" points="654.551 1287.848 641.664 1266.581 640.313 1251.112 637.217 1251.692 636.379 1256.456 619.49 1280.698 606.013 1274.379 592.571 1285.445 564.762 1283.874 552.456 1274.211 534.798 1283.092 534.131 1289.008 528.743 1292.192 582.685 1346.741 612.068 1348.38 616.352 1354.791 658.39 1355.522 658.732 1346.271 662.324 1339.86 676.339 1338.095 658.869 1313.19 645.999 1313.19 642.716 1295.503 653.045 1291.033"
opacity=".8" />
<polygon id="country29" fill="#1976D2" points="666.61 1115.2 650.423 1131.497 537.223 1130.488 538.448 1159.266 527.659 1158.958 526.871 1210.775 510.504 1224.839 509.844 1246.475 521.652 1269.735 534.592 1277.358 534.395 1279.171 552.031 1270.154 565.484 1280.882 590.224 1282.302 604.517 1270.351 617.183 1276.374 631.442 1255.577 632.642 1248.673 643.508 1246.611 645.196 1266.194 656.061 1284.415 682.403 1227.859 682.403 1193.477 701.539 1170.961"
opacity=".1" />
<polygon id="country30" fill="#FFFFFF" points="687.341 1220.751 686.239 1194.89 703.688 1174.606 708.402 1178.206 716.995 1206.833 758.237 1237.436 750.746 1246.612 720.564 1220.751 687.341 1220.751" opacity=".6" />
<polygon id="country31" fill="#FFFFFF" points="750.117 1251.137 747.437 1265.514 766.055 1265.257 766.337 1244.12 759.52 1240.311 750.117 1251.137" opacity=".8" />
<polygon id="country32" fill="#FFFFFF" points="655.39 1294.438 686.892 1223.21 718.178 1223.386 745.915 1247.876 743.968 1268.057 765.474 1268.057 767.681 1280.192 802.472 1301.341 823.935 1302.44 783.13 1346.979 727.092 1364.523 713.202 1364.523 688.45 1343.066 678.67 1338.889 659.717 1310.53 647.211 1310.706 645.74 1297.692 655.39 1294.438"
opacity=".6" />
<polygon id="country33" fill="#FFFFFF" points="770.837 1265.103 788.786 1276.768 794.11 1276.516 838.675 1261.913 843.735 1277.481 840.171 1290.615 830.536 1297.917 806.472 1296.448 772.025 1276.264 770.837 1265.103" opacity=".8" />
<polygon id="country34" fill="#FFFFFF" points="419.947 1348.886 440.341 1370.823 448.393 1360.464 461.215 1360.986 463.972 1350.888 476.576 1343.053 502.746 1360.986 517.844 1346.1 576.442 1348.668 522.089 1292.867 529.397 1288.34 530.404 1278.503 518.063 1272.714 499.945 1272.714 470.756 1301.485 469.749 1313.325 446.599 1312.585 445.855 1317.634 430.757 1316.11 417.147 1341.835 419.947 1348.886"
opacity=".8" />
<polygon id="country35" fill="#E7E9EF" points="1122.727 1334.82 1124.035 1345.764 1131.318 1348.321 1132.627 1338.677 1122.727 1334.82" />
<polygon id="country36" fill="#E7E9EF" points="1131.475 1358.222 1130.827 1372.6 1136.101 1375.324 1140.726 1365.724 1131.475 1358.222" />
<polygon id="country37" fill="#E7E9EF" points="1133.244 1384.324 1129.027 1388.375 1133.835 1392.425 1139.826 1388.375 1133.244 1384.324" />
<polygon id="country38" fill="#1976D2" points="1838.529 277.158 1853.934 281.581 1869.34 257.189 1860.543 240.548 1863.825 226.141 1886.934 226.141 1881.419 237.22 1883.608 277.158 1850.608 359.224 1853.89 376.959 1852.796 406.913 1914.375 496.73 1926.454 500.058 1927.549 426.882 1939.628 415.803 1926.411 386.988 1937.396 374.77 1913.193 342.627 1899.976 343.721 1895.599 290.514 1929.693 281.625 1931.881 266.079 1949.475 261.656 1959.366 270.545 1971.446 221.761 1992.322 186.29 2008.822 177.4 2023.133 178.495 2023.133 161.854 2000.025 157.431 1968.12 130.806 1983.525 113.07 1970.308 83.117 1981.293 72.037 1994.51 89.773 2027.51 101.991 2063.792 105.319 2068.212 89.817 2049.524 70.986 2070.401 42.171 2023.09 25.531 2011.01 49.923 1995.605 29.954 1908.729 0 1826.23 14.407 1814.151 21.064 1814.151 27.72 1831.745 36.61 1829.557 57.674 1797.651 44.361 1727.276 72.081 1715.196 46.594 1666.791 46.594 1644.777 69.892 1566.698 52.156 1495.229 66.563 1486.432 88.722 1497.417 92.05 1496.323 108.691 1427.041 116.442 1431.462 138.601 1367.651 127.522 1383.056 98.707 1318.152 95.378 1323.666 125.332 1302.79 135.316 1285.196 118.676 1213.726 130.894 1186.241 156.38 1185.147 171.883 1167.553 172.977 1165.365 155.242 1221.473 106.458 1221.473 73.176 1185.191 63.191 1137.88 78.694 1118.097 58.725 1109.301 58.725 1098.315 80.883 1107.112 90.868 1044.396 125.244 990.52 166.277 957.52 211.733 957.52 230.564 992.708 244.971 975.114 258.284 937.738 244.971 922.332 258.284 899.224 231.658 894.804 241.643 920.1 321.475 926.709 323.709 944.303 314.819 953.1 321.475 953.1 335.883 936.6 329.226 926.709 336.977 933.318 351.385 927.803 389.09 893.709 392.418 891.521 380.2 911.303 367.982 915.724 334.7 893.709 305.885 886.007 256.007 850.819 250.445 847.536 268.181 854.145 277.07 839.834 289.288 845.348 322.57 866.224 331.46 870.645 355.852 849.725 342.539 795.849 332.555 789.24 350.29 746.35 365.792 739.741 354.713 683.633 385.761 682.539 406.825 660.525 410.153 667.133 394.651 667.133 379.149 645.119 371.398 630.807 376.959 642.887 400.257 651.684 415.759 651.684 427.977 635.184 424.649 631.902 421.32 615.402 439.056 624.199 454.558 586.823 453.464 598.902 469.01 595.62 475.666 575.837 475.666 561.526 465.681 558.244 437.961 535.135 429.072 535.135 417.992 583.54 427.977 609.931 430.21 620.916 413.569 611.025 395.834 540.65 368.113 516.36 374.157 508.044 381.295 510.626 397.717 520.955 399.512 518.548 425.349 550.409 500.233 527.389 536.755 525.813 544.988 537.498 553.221 526.951 560.184 519.948 560.315 521.261 592.502 530.934 606.209 531.065 619.522 543.451 620.66 562.401 627.886 582.446 655.475 582.665 662.744 575.837 671.897 591 671.897 605.686 677.283 625.381 705.178 673.873 709.601 671.772 742.796 655.054 757.115 658.511 762.721 642.012 780.456 637.635 797.097 647.526 811.505 679.431 822.584 694 813 777 845 780.618 838.086 763.024 821.446 763.024 800.382 752.039 797.054 754.227 779.318 771.821 758.254 740.266 734.607 742.454 701.719 776.198 679.517 815.806 681.75 822.415 693.968 863.117 696.201 892.834 679.56 877.429 662.919 880.711 631.871 957.695 594.166 1016.911 620.879 1036.693 603.144 1094.989 658.584 1138.974 654.161 1154.379 669.663 1196.176 674.086 1223.661 636.382 1258.849 651.928 1277.537 655.256 1296.225 638.615 1279.725 627.536 1294.037 605.377 1334.739 618.69 1343.536 636.425 1361.13 637.52 1372.115 629.769 1401.832 628.674 1405.115 636.425 1439.208 638.659 1462.317 614.267 1509.628 619.828 1523.939 614.267 1528.316 587.641 1514.004 555.498 1528.316 543.28 1573.395 543.28 1616.285 594.298 1671.255 625.346 1687.755 625.346 1689.943 612.033 1709.725 599.816 1711.914 671.897 1694.32 672.992 1694.32 690.727 1704.211 702.945 1702.373 718.798 1709.682 721.819 1714.102 710.74 1720.711 712.973 1725.087 717.396 1744.87 712.973 1764.652 655.3 1766.84 583.218 1741.543 525.545 1709.638 486.745 1694.232 488.979 1694.232 501.197 1656.856 486.789 1671.168 455.741 1683.247 373.675 1733.841 358.173 1758.043 342.67 1784.434 342.67 1777.825 351.56 1784.434 362.639 1807.542 338.247 1820.76 339.342 1818.571 324.935 1797.651 320.512 1811.963 268.4 1830.826 250.533"
opacity=".1" data-toggle="tooltip" data-placement="top" title="Germany" />
<polygon id="country39" fill="#1976D2" points="1168.988 714.807 1148.102 713.713 1126.078 761.873 1144.775 785.669 1106.243 838.816 1086.452 835.491 1073.228 852.113 1076.512 862.086 1091.925 863.18 1099.631 880.896 1115.044 884.22 1162.376 945.153 1162.376 976.166 1185.495 990.557 1210.804 986.139 1242.724 1004.948 1281.255 1016.015 1299.952 1013.784 1320.882 1011.553 1364.886 982.771 1379.204 985.002 1384.678 997.993 1396.806 1001.624 1413.314 1025.988 1402.323 1050.353 1408.935 1066.975 1427.632 1073.623 1430.916 1093.57 1452.94 1095.801 1456.224 1085.827 1488.144 1069.205 1507.935 1070.299 1531.054 1095.757 1546.467 1089.108 1556.362 1090.202 1560.785 1102.406 1568.491 1103.499 1579.481 1088.014 1623.486 1071.392 1663.112 1023.757 1676.336 978.353 1675.241 948.433 1658.734 945.109 1668.629 934.042 1666.44 916.327 1624.625 874.247 1624.625 853.207 1636.709 837.722 1648.794 832.167 1649.889 819.963 1619.064 819.963 1613.547 836.585 1599.229 833.26 1581.627 814.451 1592.617 785.669 1608.03 769.047 1622.348 770.141 1620.158 795.598 1627.865 802.247 1646.561 783.438 1653.173 782.345 1650.984 767.953 1668.586 746.913 1681.809 748.007 1689.515 723.643 1698.535 718.875 1699.455 703.696 1690.697 694.51 1689.953 670.54 1706.811 669.446 1705.716 607.639 1693.894 614.725 1689.471 630.559 1669.724 630.516 1612.496 598.365 1571.162 548.587 1529.215 548.149 1518.531 557.423 1532.105 588.48 1527.376 617.612 1510.475 624.61 1500.973 623.867 1500.272 652.693 1510.168 654.924 1527.77 647.181 1550.889 658.248 1550.889 669.315 1534.382 670.408 1521.158 699.191 1509.073 700.284 1466.163 756.755 1421.064 776.702 1390.238 778.933 1369.353 764.542 1339.622 780.07 1307.702 770.097 1299.996 749.057 1246.095 745.732 1217.503 699.235 1205.418 699.235 1195.698 677.67 1184.138 676.751"
opacity=".1" />
<polygon id="country40" fill="#1976D2" points="1199.225 674.498 1224.701 640.822 1255.299 654.912 1276.092 660.452 1301.568 637.158 1284.278 624.464 1295.659 608.455 1329.628 620.407 1341.403 639.644 1362.677 640.211 1373.795 631.967 1396.689 631.051 1401.679 639.513 1439.719 641.433 1463.795 616.961 1497.107 620.451 1495.181 653.777 1509.757 657.093 1527.661 648.979 1546.615 658.314 1546.177 663.025 1532.432 663.418 1518.118 693.342 1507 694.433 1463.751 750.748 1419.583 770.16 1391.962 772.297 1369.024 757.553 1339.696 773.169 1310.805 764.227 1302.619 743.332 1247.901 739.494 1219.886 692.164 1206.272 691.292 1199.225 674.498"
opacity=".1" />
<polygon id="country41" fill="#1976D2" points="791.224 749.943 811.311 749.241 812.714 779.975 800.961 779.975 791.97 794.64 803.724 814.178 821.047 823.969 822.626 835.165 828.985 833.058 834.862 826.077 844.555 828.184 849 836 861.878 836 861.878 825.418 854.247 803.07 850.782 784.936 872.93 775.145 904 779 923 799 963.627 794.684 987.178 828.184 1014.852 829.589 1022.483 817.032 1032.176 814.924 1033.579 800.962 1048.096 800.26 1055.727 809.348 1063.358 791.215 1129.1 800.304 1140.152 785.639 1121.469 762.588 1146.38 708.144 1166.466 709.549 1180.325 676.049 1152.651 673.239 1136.731 657.871 1092.874 662.964 1036 610 1017 627 958 601 886 635 883 661 902 681 865 703 817 700 811.311 687 777 686 749 705 746 733 777 756"
opacity=".1" />
<polygon id="country42" fill="#1976D2" points="848.387 839.993 845.677 851.553 827.535 851.553 827.535 867.2 847.032 880.122 840.999 897.835 840.999 906.011 849.087 907.373 859.841 893.089 884.059 887.638 935.817 907.373 936.473 921.658 965.369 924.383 997.63 890.32 993.609 879.419 972.101 874.672 911.599 835.159 908.889 820.874 886.026 820.874 875.928 839.949 865.83 839.949 848.387 839.993"
opacity=".1" />
<polygon id="country43" fill="#1976D2" points="1017.592 891.08 1017.592 868.134 1004.763 860.732 1026.378 833.737 1035.165 833.737 1043.951 843.882 1066.928 835.13 1035.165 824.332 1033.935 817.8 1026.378 819.629 1018.953 832.43 986.926 831.385 963.422 798.425 922.125 802.474 902.443 783.142 875.204 778.57 855.434 786.538 866.901 824.332 867.033 837.046 874 837.046 885 817 913 817 916.897 833.083 975.284 871.487 997.866 876.624 1004.06 890.383"
opacity=".1" />
<polygon id="country44" fill="#1976D2" points="1027 836 1033 836 1034.649 840.23 1026.338 846.227 1026.338 851.182 1031.806 855.094 1058.093 856.658 1066.666 853.008 1070.559 853.79 1074 864 1089 865 1096.628 880.128 1094.266 885.082 1091.16 885.343 1088.055 879.085 1081.275 878.563 1069.553 880.128 1068.766 891.08 1057.043 890.298 1057.568 876.477 1048.995 868.132 1035.961 878.824 1036.223 885.865 1024.764 889.776 1020 889.776 1020 866 1009 859"
opacity=".1" />
<polygon id="country45" fill="#1976D2" points="1037.47 803.261 1036.136 814.414 1037.212 821.291 1074.648 834.163 1041.773 847.741 1038.029 844.567 1030.929 849.239 1031.274 851.796 1035.06 853.56 1058.124 854.177 1069.829 850.562 1084.846 831.166 1103.65 834.516 1126.327 802.335 1065.655 793.871 1057.264 814.723 1046.678 803.085 1037.47 803.261"
opacity=".1" />
<polygon id="country46" fill="#1976D2" points="938.232 924.104 945.137 978.796 962.333 982.614 963.94 992.447 951.607 1002.849 974.579 1021.592 1019.221 1005.351 1022.782 986.126 1050.878 968.393 1061.647 927.309 1069.681 918.574 1061.343 903.913 1088.528 886.927 1085.054 882.011 1072.504 882.801 1071.375 894.476 1054.526 894.301 1054.222 878.719 1048.793 872.178 1039.674 880.562 1039.935 888.243 1026.169 893.511 1000.765 891.887 967.761 926.826 938.232 924.104"
opacity=".1" />
<polygon id="country47" fill="#1976D2" points="989.818 1039.093 988.721 1047.776 973.529 1053.754 972.431 1067.891 989.818 1067.891 995.79 1063.004 1028.895 1063.004 1058.752 1089.098 1062.572 1076.575 1084.833 1076.575 1085.36 1060.823 1062.572 1039.093 1067.446 1027.137 1090.804 1025.522 1122.286 960.289 1104.898 946.718 1098.4 923.897 1140.726 920.101 1115 887.724 1100 884 1096.995 887.724 1092.912 888.03 1067.929 903.782 1076.095 917.396 1066.875 927.17 1055.459 969.016 1027.227 986.949 1023.407 1006.541 978.402 1022.25"
opacity=".1" />
<polygon id="country48" fill="#1976D2" points="1188.241 1300.617 1208.346 1290.804 1220.287 1247.695 1219.76 1194.774 1288.153 1121.087 1288.153 1103.607 1302.245 1098.131 1301.718 1077.935 1286.529 1048.451 1295.221 1032.636 1314.229 1050.116 1338.636 1051.211 1338.636 1061.024 1331.042 1069.216 1332.666 1073.597 1345.704 1074.123 1348.426 1088.843 1352.245 1088.843 1362.034 1071.363 1366.907 1025.539 1383.193 1014.061 1383.72 998.245 1377.223 985.672 1366.907 985.147 1326.52 1011.783 1329.066 1028.912 1300.708 1028.824 1290.699 1016.602 1285.256 1017.303 1287.1 1034.3 1225.774 1029.92 1187.758 1013.009 1185.739 992.2 1160.409 976.516 1160.102 944.229 1142.718 924.383 1102.771 928.194 1107.117 945.543 1126.696 961.358 1092.85 1030.489 1070.199 1032.198 1066.467 1040.521 1088.768 1061.112 1087.67 1081.921 1064.887 1081.571 1062.429 1091.91 1081.349 1091.077 1081.876 1099.27 1068.311 1106.367 1077.003 1122.751 1093.816 1128.228 1104.132 1120.605 1109.005 1106.98 1114.975 1104.264 1122.042 1111.361 1119.891 1128.841 1115.019 1137.033 1116.116 1151.227 1188.241 1300.617"
opacity=".1" />
<polygon id="country49" fill="#1976D2" points="1185.725 992.798 1187.748 1012.248 1223.278 1028.92 1280.223 1033.293 1278.068 1019.036 1240.031 1008.194 1207.756 988.289 1185.725 992.798" opacity=".1" />
<polygon id="country50" fill="#1976D2" points="1293.722 1016.036 1300.707 1025.906 1324.321 1026.092 1321.933 1012.591 1293.722 1016.036" opacity=".1" />
<polygon id="country51" fill="#1976D2" points="1294.89 1036.893 1289.222 1047.323 1303.931 1075.753 1304.364 1097.933 1307.046 1103.874 1324.308 1104.182 1334.085 1094.632 1341.18 1098.989 1342.607 1112.5 1348.275 1108.891 1348.621 1091.64 1343.862 1091.068 1340.877 1076.413 1328.85 1075.973 1325.865 1067.831 1333.219 1057.841 1333.349 1052.912 1311.978 1052.912 1294.89 1036.893"
opacity=".1" />
<polygon id="country52" fill="#1976D2" points="1443.113 1260.113 1431.026 1240.624 1439.796 1228.245 1431.506 1212.926 1423.695 1211.433 1422.211 1185.711 1410.517 1162.929 1407.114 1168.372 1399.303 1181.716 1389.529 1183.209 1384.641 1176.756 1382.198 1159.418 1374.867 1145.547 1345.021 1117.234 1352.351 1112.362 1353.704 1091.863 1364.613 1073.427 1369.326 1027.556 1385.121 1016.714 1385.645 999.99 1395.114 1003.15 1410.037 1024.879 1398.954 1048.758 1406.415 1067.501 1424.873 1074.787 1428.233 1095.199 1453.018 1099.062 1446.167 1110.957 1414.924 1123.336 1411.521 1143.615 1434.473 1173.288 1435.433 1189.135 1430.066 1194.578 1430.546 1199.538 1447.651 1224.778 1448.131 1250.983 1443.113 1260.113"
opacity=".1" />
<polygon id="country53" fill="#1976D2" points="1445.734 1113.4 1459.919 1131.652 1459.919 1153.843 1464.822 1156.294 1487.369 1145.439 1491.791 1146.928 1518.716 1178.004 1517.753 1199.232 1508.953 1197.744 1501.116 1192.798 1495.25 1193.279 1484.961 1210.525 1486.931 1219.891 1495.25 1224.312 1494.768 1234.685 1488.901 1237.662 1468.806 1223.831 1468.806 1211.488 1460.488 1211.006 1457.073 1216.434 1455.322 1271.671 1468.325 1295.394 1491.353 1317.585 1490.39 1324.019 1478.131 1323.538 1466.88 1306.774 1455.103 1306.774 1440.393 1294.912 1435.971 1282.569 1442.319 1272.196 1444.508 1262.829 1451.425 1250.574 1451.119 1222.386 1434.22 1197.963 1433.519 1194.986 1438.992 1189.472 1437.722 1170.082 1415.219 1141.588 1417.846 1125.174 1445.734 1113.4"
opacity=".1" />
<polygon id="country54" fill="#FFFFFF" points="1469.589 1080.997 1459.062 1086.344 1450.318 1111.817 1464.934 1130.422 1462.498 1150.984 1464.934 1151.983 1489.251 1140.203 1521.877 1176.631 1521.094 1199.583 1528.184 1203.408 1545.715 1189.194 1544.28 1177.935 1493.688 1129.901 1494.167 1122.554 1500.474 1118.164 1496.081 1105.905 1475.157 1102.471 1469.589 1080.997"
opacity=".8" />
<polygon id="country55" fill="#1976D2" points="683.539 822.868 697.82 841.481 715.637 849.676 726.599 849.633 745.421 844.533 750.137 837.166 694.457 816.373 683.539 822.868" opacity=".1" />
<polygon id="country56" fill="#1976D2" points="742.644 848.776 762.737 875.132 756.835 882.079 742.603 879.595 724.938 863.681 725.901 853.239 742.644 848.776" opacity=".2" />
<polygon id="country57" fill="#1976D2" points="746.537 848.264 766 873.193 775.787 871 787 884 792.002 863.795 805.036 865.869 804.502 859.604 783.06 840.984 778.967 851.927 751.03 840.676" opacity=".2" />
<polygon id="country58" fill="#1976D2" points="738.438 888.106 738.963 896.871 745.618 906.159 769.216 931.886 765.626 942.176 761.51 942.176 759.452 952.467 772.806 969.473 785.108 970.519 809.757 1004.487 823.591 1005.534 834.361 1013.252 834.887 1028.688 877.486 1053.412 893.378 1053.412 903.141 1045.17 915.444 1044.647 922.624 1061.13 968.637 1067.496 969.995 1050.665 985.23 1045.17 985.931 1039.153 973.803 1022.67 946.791 1001.042 960.976 988.179 959.969 982.511 942.194 979.763 934.663 920.025 934 909.211 884 891 863 895 852 910 840 907.685 838.608 909.211 815.01 907.685 785.239 886.057 774.163 873.979 769.084 875.199 759.934 885.621 743.779 882.569"
opacity=".1" />
<polygon id="country59" fill="#1976D2" points="687.197 856.194 651.137 855.134 629.501 842.106 608.392 841.576 584.162 858.799 561.47 859.859 559.404 872.887 533.634 872.887 523.344 882.294 523.344 887.505 529.544 892.716 529.544 898.457 526.95 905.258 529.544 911 537.812 906.848 546.079 915.725 544.012 921.996 540.934 926.192 545.551 931.403 568.243 936.084 584.206 929.283 584.206 919.391 591.946 920.936 610.503 931.889 630.6 928.753 639.351 920.406 645.024 922.482 645.024 931.889 652.764 931.889 659.448 918.861 718.2 912.59 743.837 909.454 737.065 900.533 736 887.505 742 882 722 866 723.345 854.162 714.066 854.162 697.003 845.771"
opacity=".3" />
<polygon id="country60" fill="#FFFFFF" points="752.837 1196.95 759.161 1215.938 759.161 1234.482 774.356 1248.412 881.424 1204.359 882.434 1192.248 865.262 1161.104 822.181 1174.99 797.456 1199.568 768.779 1182.443 752.837 1196.95" opacity=".6" />
<polygon id="country61" fill="#FFFFFF" points="901.748 1141.426 907.565 1113.82 901.748 1110 905 1081 910 1078 916.313 1086.965 956.232 1107.724 956.232 1119.253 907.876 1190.056 885.63 1190.807 868.934 1160.242" opacity=".6" />
<polygon id="country62" fill="#FFFFFF" points="850.035 1089.668 853.882 1105.053 897.481 1108.9 900.532 1077.333 908.933 1072.735 911.233 1061.195 897.481 1065.042 882.181 1088.164 850.035 1089.668" opacity=".6" />
<g transform="translate(177 859)">
<circle cx="18" cy="18" r="18" fill="#FF6A28" />
<polygon id="country 117" fill="#303032" points="26 11.611 19.611 18 26 24.389 24.389 26 18 19.611 11.611 26 10 24.389 16.389 18 10 11.611 11.611 10 18 16.389 24.389 10" />
</g>
<polygon id="country86" fill="#1976D2" points="269.861 881.179 262.351 883.4 264.004 889.28 274.868 889.28 279.45 884.88 269.861 881.179" opacity=".2" />
</g>
</svg>

You can get the selected option class and use it to add the active class to the polygon. Try this:
$('#countries').on('change', function() {
var selected = $(this).find(":selected").attr('class').replace('country', '');
$('.active').attr('class', '');
$('#country' + selected).attr('class', 'active');
});
Working JSFIDDLE.

You could do something like this.
* Added data-id to options. *
const select = document.querySelector('select');
const svg = document.querySelector('svg');
function setClass(){
const country = this.options[this.selectedIndex].getAttribute('data-id');
svg.getElementById(country).classList.toggle('selected');
}
select.addEventListener('change', setClass);
Fiddle