#map {
margin: 0 auto; width: 500px;
}
#map svg {
width: 100%; height: 250px;
stroke: yellow; fill: green;
background: aliceblue; border: 1px solid lightgray;
}
#one:hover {fill: red;}
#two:hover {fill: deepskyblue;}
.win__one {width: 120px; height: 40px; background: red;}
.win__two {width: 120px; height: 40px; background: deepskyblue;}
path {cursor: pointer; transition: all 0.5s;}
path:hover {transform: scale(1.05);}
foreignobject {
display: none; opacity: 0;
transition: all 0.5s;
}
path:hover ~ foreignObject {
display: block; opacity: 1;
transition: all 0.5s;
}
<div id="map">
<svg>
<g>
<g>
<path id="one" title="EnSO" d="M313.23,58.66L306.56,87.28L299.68,118.48L300.3,122.21L299.24,126.14L267.26,118.43L261.12,119.3L257.44,117.29L253.95,118.28L247.56,119.17L240.68,116.96L236.67,117.76L233.22,117.63L231.12,115.79L225.89,113.27L222.2,112.96L215.57,113.53L211.77,112.47L208.47,110.57L208.26,107.16L208.97,103.37L207.41,98.33L203.38,95.72L200.31,92.59L195.72,91.03L192.49,90.34L194.19,70.89L198.52,49.07L217.79,59.52L219.14,78.74L224.58,74.04L227.61,55.27L226.19,34.98L269.51,47.56z"/>
<foreignObject class="win__one">
<span>Окно EnSO</span>
</foreignObject>
</g>
<g>
<path id="two" title="RuSO" d="M299.24,126.14L301.91,131.28L304.11,133.69L304.17,137.26L301.92,139.8L298.48,145.04L294.56,151.7L290.12,155.29L286.7,159.8L285.82,163.34L288.45,165.54L289.06,168.74L286.18,174.71L276.58,214.43L276.56,214.49L227.74,202.25L159.29,181.87L158.03,168.07L170.35,146.42L179.28,122.31L192.49,90.34L195.72,91.03L200.31,92.59L203.38,95.72L207.41,98.33L208.97,103.37L208.26,107.16L208.47,110.57L211.77,112.47L215.57,113.53L222.2,112.96L225.89,113.27L231.12,115.79L233.22,117.63L236.67,117.76L240.68,116.96L247.56,119.17L253.95,118.28L257.44,117.29L261.12,119.3L267.26,118.43z"/>
<foreignObject class="win__two">
<span>Окно RuSO</span>
</foreignObject>
</g>
</g>
</svg>
</div>