Я не совсем уверен, что вы спрашиваете, так как я не знаком с географией вашей страны.
В вашем SVG есть несколько ошибок: вы используете один и тот же id несколько раз, поэтому я изменил его на класс.Также ваш SVG очень многословен, поэтому я переместил некоторые стили в css.
Предполагая, что вы хотите выделить 4 полигона, я использовал фильтр SVG, чтобы нарисовать красную линию: <g id="Hakkari" filter="url(#outline-red)" . . . .
Надеюсь, это то, что вы просите.
svg {
border: 1px solid;
}
.Shape {
stroke: #ffffff;
fill: #9fb4b7;
}
text {
font-size: 16px;
font-family: Helvetica-Bold, Helvetica;
fill: #000000;
font-weight: bold;
}
#Hakkari{filter:url(#outline-red); }
/*#Hakkari:hover{filter:url(#outline-red); }*/
<svg viewBox = "4570 1300 500 350">
<defs>
<filter id="outline-red">
<feMorphology in="SourceAlpha" result="expanded" operator="dilate" radius="3"/>
<feFlood flood-color="red" result="red" />
<feComposite in ="red" in2="expanded" operator="in" />
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Hakkari" transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87">
<g id="Merkez" transform="translate(10.000000, 2.000000)">
<polygon class="Shape" points="31 59 119 38 181 0 193 43 155 64 163 167 49 175 0 142"></polygon>
<g id="MER" transform="translate(85.000000, 98.000000)" >
<text>
<tspan x="0" y="6">MER</tspan>
</text>
</g>
</g>
<g id="Yüksekova" transform="translate(165.000000, 0.000000)">
<polygon class="Shape" points="38 44 122 0 163 7 185 27 185 107 118 133 79 177 38 176 25 190 7 168 0 66"></polygon>
<g id="YÜK" transform="translate(78.000000, 86.000000)" >
<text>
<tspan x="0" y="6">YÜK</tspan>
</text>
</g>
</g>
<g id="Şemdinli" transform="translate(244.000000, 107.000000)">
<polygon class="Shape" points="106 0 168 47 172 104 121 94 40 169 14 127 31 87 0 70 39 26"></polygon>
<g id="ŞEM" transform="translate(81.000000, 62.000000)" >
<text>
<tspan x="0" y="6">ŞEM</tspan>
</text>
</g>
</g>
<g id="Çukurca" transform="translate(0.000000, 143.000000)">
<polygon class="Shape" points="190 47 163 76 70 72 20 51 0 24 10 0 58 33 173 26"></polygon>
<g id="ÇUK" transform="translate(104.000000, 50.000000)" >
<text>
<tspan x="0" y="6">ÇUK</tspan>
</text>
</g>
</g>
</g>
</svg>
ОБНОВЛЕНИЕ:
Это другой способ добавления границы для группы элементов: я использую группу в качестве фона с рамкой.тогда я использую ту же группу, что и намерение.
svg {
border: 1px solid;
}
#A {
fill: red;
stroke: red;
stroke-width: 10px;
}
#B {
stroke: #ffffff;
fill: #9fb4b7;
}
text {
font-size: 16px;
font-family: Helvetica-Bold, Helvetica;
fill: #000000;
font-weight: bold;
stroke: none;
}
<svg viewBox="4570 1300 500 350" width="500" height="350">
<defs>
<g id="Hakkari">
<g id="Merkez" transform="translate(10.000000, 2.000000)">
<polygon class="Shape" points="31 59 119 38 181 0 193 43 155 64 163 167 49 175 0 142"></polygon>
</g>
<g id="Yüksekova" transform="translate(165.000000, 0.000000)">
<polygon class="Shape" points="38 44 122 0 163 7 185 27 185 107 118 133 79 177 38 176 25 190 7 168 0 66"></polygon>
</g>
<g id="Şemdinli" transform="translate(244.000000, 107.000000)">
<polygon class="Shape" points="106 0 168 47 172 104 121 94 40 169 14 127 31 87 0 70 39 26"></polygon>
</g>
<g id="Çukurca" transform="translate(0.000000, 143.000000)">
<polygon class="Shape" points="190 47 163 76 70 72 20 51 0 24 10 0 58 33 173 26"></polygon>
</g>
</g>
</defs>
<g transform="translate(4607.000000, 1335.000000)" data-transform-left="-521.5" data-transform-top="-87">
<use id="A" xlink:href="#Hakkari" />
<use id="B" xlink:href="#Hakkari" />
<g id="Hakkari_text">
<g id="MER" transform="translate(85.000000, 98.000000)" >
<text>
<tspan x="0" y="6">MER</tspan>
</text>
</g>
<g id="YÜK" transform="translate(243.000000, 86.000000)" >
<text>
<tspan x="0" y="6">YÜK</tspan>
</text>
</g>
<g id="ŞEM" transform="translate(325.000000, 169.000000)" >
<text>
<tspan x="0" y="6">ŞEM</tspan>
</text>
</g>
<g id="ÇUK" transform="translate(104.000000, 193.000000)">
<text>
<tspan x="0" y="6">ÇUK</tspan>
</text>
</g>
</g>
</g>
</svg>