How to make responsive text appear inside a SVG (map & country name)

Question

I've been trying to search for solutions out there, but it seems impossible for a newbie like me! For further info: I have a SVG world map, which is responsive when it comes to its width. I've been able to implement a toggle that works, but now I want it to toggle on and off the screen the different country names on the map.

The problem then is that I do not know how to approach this, as the text should be responsive too and visually appear on the screen while the toggle is on.

I would show you my code but all I have is the toggle and the svg image. You can check it out on the github repo: https://github.com/Swilkery/Risk/pull/8

Could you tell me what to use? I've seen some people using but I do not know where to place it inside each path: (This is an example path that is the US)

<path class="st1" d="M187.4,67.6l-2.1,0.7l-1.6,0.9l-1.6,0.9l-0.2,0.3l2-0.5l0.7,0.7l1.6-0.5l1.7-0.7l1.9-0.7l-1.1,1.1l0.9,0.3
       l0.9,0.8l1.8-0.5l1.8-0.2l0.1,0.6l0.5,0.1L195,71l0.5,0.9l-1.6,0.2l0,0l-1.3-0.2l-1.6,0.4l-1.3,0.2l-1.6,1.4l-1,0.8l0.1,0.2l1.9-1.4
       h0.2l-1.6,1.7l-1,1.5l-0.9,1.3l-0.2,1.1l-0.3,0.5l-0.2,0.6v1.1l0.1,0.2h0.6l0.6-0.2L187,81l1.1-1.1l0.6-1.5V77l0.5-0.9l0.9-1.1
       l0.7-0.8l0.9-0.5l-0.1,0.7l0.8-1.1l0.5-0.2l0.6-0.8l1.3,0.5l1,0.8l-0.3,1l-0.6,1l-1.3,0.9l-0.1,0.6h0.3l1.5-0.9l0.6,0.2l-0.2,1.3
       l-0.2,0.9l-1.3,1.2l-0.7,0.8l-0.9,0.8l0.9,0.5l0.9,0.1l1.4-0.3l1.3-0.6l1-0.3l1.6-0.6l2-1.3v-0.2l0.1-0.7l0.9-0.3l1.4,0.1l1.4,0.2
       l1.6-0.7l0.2-0.9l-0.1-0.3l2.4-1.5l0.9-0.4h2.7h3.2l0.4-0.5l0.6-0.1l0.9-0.3l1-1l1.1-1.7l1.9-1.6l0.4,0.6l1.3-0.3l0.6,0.6l-1,3
       l0.8,1.3l0.1,0.7l-2.2,1l-2.1,0.8l-2.1,0.7l-1.4,1.3l-0.5,0.5l-0.4,1.2l0.2,1.1l0.7,0.1l0.1-0.8l0.4,0.5l-0.3,0.6l-1.3,0.3h-0.9
       l-1.5,0.4l-0.8,0.1l-1.1,0.1l-1.7,0.7l2.8-0.4l0.4,0.4l-2.7,0.7H209l0.1-0.3l-0.7,0.6l0.5,0.1l-0.9,1.6l-1.8,1.7v-0.6l-0.4-0.1
       l-0.4-0.6v1.2l0.3,0.4l-0.2,0.8l-0.8,0.9l-1.6,1.8l-0.1-0.1l1-1.5l-0.7-0.8l0.3-1.9l-0.7,1v1.4l-1.1-0.3l1,0.7l-0.5,2.1l0.5,0.2v0.8
       l-0.3,2.2l-1.6,1.6l-2.1,0.7l-1.5,1.3l-1,0.1l-1.2,0.8l-0.5,0.7l-2.4,1.5l-1.3,1.1l-1.2,1.3l-0.7,1.6v1.6l0.2,1.9l0.5,1.6l-0.2,1
       l0.5,2.6l-0.3,1.5l-0.2,0.9l-0.7,1.4l-0.6,0.3l-0.9-0.3l-0.1-1l-0.6-0.5l-0.7-1.9l-0.6-1.7l-0.1-0.9l0.7-1.5l-0.3-1.2l-1.1-1.9
       l-0.7-0.3l-2.1,1l-0.3-0.1l-0.7-1l-1-0.6l-2.2,0.3l-1.6-0.3l-1.5,0.2l-0.9,0.3l0.2,0.6l-0.2,0.9l0.3,0.5l-0.4,0.3l-0.6-0.3L172,110
       l-1.4-0.1l-1.1-1.2l-1.7,0.3l-1.3-0.5l-1.2,0.2l-1.7,0.5l-2.1,1.6l-2.1,1l-1.3,1l-0.7,1l-0.3,1.6l-0.1,1l0.2,0.8l-0.8,0.1l-1.3-0.5
       l-1.4-0.7l-0.3-1l-0.1-1.6l-0.8-1.3l-0.3-1.3l-0.6-1.5l-1.1-0.9l-1.6,0.1l-1.7,1.7l-1.4-0.7l-0.8-0.7l-0.1-1.3l-0.3-1.1l-0.8-1
       l-0.7-0.7l-0.5-0.8h-3.3l-0.3,0.9h-1.5h-3.8l-3.8-1.6l-2.4-1.1l0.3-0.5l-2.5,0.2l-2.2,0.2l0.1-1.1l-0.7-1.3l-0.8-0.3v-0.6l-1-0.1
       l-0.4-0.6l-1.7-0.2l-0.3-0.4l0.3-1.2l-0.9-2.2l-0.2-3.1l0.3-0.5l-0.5-0.7l-0.5-1.9l0.6-1.8l-0.3-1.2l1.4-1.8l1-1.9l0.4-1.7l1.9-2.1
       l1.4-2l1.4-2l1.5-3l0.6-1.8l0.1-1l0.5-0.5l2,0.8l-0.3,2l0.8-0.6l0.9-1.8l0.6-1.8h4.9h5.1h1.7h5.2h5.1h5.1h5.2h5.8h5.9h3.5l0.5-0.8
       h0.6l-0.3,1.2l0.3,0.3l1.1,0.1l1.6,0.3l1.4,0.7l1.5-0.3L187.4,67.6z M95.5,48.1l-2.4,0.8l-0.3-0.6l0.8-1l2.2-0.7l1.2-0.3l0.9,0.1
       v0.7L95.5,48.1z M82,42.4l-1.4,0.3L80,42.3l-0.3-0.6l2-0.3l1,0.2L82,42.4z M82.4,34.6l0.4,0.3l1.2-0.2l0.6,0.5l1.1,0.2l-0.4,0.2
       L83.6,36L83,35.7l-0.1-0.3l-1.5,0.1l-0.1-0.2L82.4,34.6z M142.4,23.1l-8.5,7.1l-12.4,11.4l1.5,0.1l1,0.6l0.2,0.9l0.1,1.3l2.6-1.1
       l2.3-0.7l-0.2,1.1l0.3,0.8l0.6,0.9l-0.4,1.5l-0.5,2.4l1.6,1.3l-1.1,1.3l-1.8,1l-0.2-0.8l-0.9-0.7l1.1-1.8l-0.6-1.7l0.9-1.9l-1.4-0.1
       h-2.5l-1.3-0.6l-1.1-2.1l-1.1-0.4l-2-0.7l-2.4,0.2l-2.1-0.9l-0.9-0.9L111,41l-1.2,1.4l-1,0.1l-2.3,0.4l-2.2,0.7l-2.2,0.5l1.1-1.2
       l2.9-2l2.4-0.6l0.1-0.5l-3.3,1.1l-2.6,1.4l-3.9,1.5l0.1,1L95.8,46l-2.7,0.9l-2.3,0.7l-1.4,0.9l-3.7,1.1l-1.6,1l-2.8,0.9l-0.9-0.1
       L78.2,52l-2.4,0.7l-2.1,0.7L70.2,54l0.1-0.4l2.8-1l2.3-0.7l3-1.1l2.3-0.2l1.7-0.9l3.6-1.3l0.8-0.4l2-0.7l2-1.6l2.2-1.2l-2.5,0.6
       l-0.1-0.4l-1.7,0.8l0.1-1l-1.3,0.7l0.6-1L85.6,45h-1l1.3-1.2L87,43l0-0.8l-2.5,0.4l-0.2-1l-0.5-0.5l1.4-1.1l-0.1-0.9l2-1.1l2.7-1.1
       l1.8-1l1.4-0.1l0.6,0.3l2.5-1l0.9,0.2l1.9-0.6l0.9-0.9l-0.4-0.3l2.1-0.8h-1L98.4,33l-1,0.5L96.8,33l-2.4,0.2l-1.6-0.5l0.4-0.8
       l-0.3-1.1l3.2-0.8l4.6-0.9h1.2l-1.5,1l3.2-0.1l0.4-1.2l-0.8-0.7l0.3-1l-0.2-0.8l-1.1-0.6l2.3-1l2.6-0.1l3.1-0.8l1.7-0.9l2.7-0.9
       l1.7-0.2l3.9-0.8l1.1,0.1l3.6-1l1.5,0.4l-0.2,0.8l1.1-0.3l2.2,0.1l-0.7,0.4l1.7,0.3l1.7-0.2l2.2,0.6l2.5,0.2l0.8,0.2l2.3-0.3
       l1.4,0.6L142.4,23.1z"/> 
<desc>US</desc> ```

Answer 1

As I've commented:

1. in order to make an svg element responsive you need to use an viewBox attribute and no width or height. in this case the svg element will take all the width available.

2. if you need to add some text you need to put the text inside a <text> element.

3. The <defs> element is used to store graphical objects that will be used at a later time. Objects created inside a element are not rendered

This is an example where I've added 2 text elements. The x and y attributes are setting the position of the text.

 svg{fill:gold;} text{dominant-baseline:central; text-anchor:middle; fill:black; }

 <svg viewBox="70 20 155 100"> <path id="us" d="M187.4,67.6l-2.1,0.7l-1.6,0.9l-1.6,0.9l-0.2,0.3l2-0.5l0.7,0.7l1.6-0.5l1.7-0.7l1.9-0.7l-1.1,1.1l0.9,0.3 l0.9,0.8l1.8-0.5l1.8-0.2l0.1,0.6l0.5,0.1L195,71l0.5,0.9l-1.6,0.2l0,0l-1.3-0.2l-1.6,0.4l-1.3,0.2l-1.6,1.4l-1,0.8l0.1,0.2l1.9-1.4 h0.2l-1.6,1.7l-1,1.5l-0.9,1.3l-0.2,1.1l-0.3,0.5l-0.2,0.6v1.1l0.1,0.2h0.6l0.6-0.2L187,81l1.1-1.1l0.6-1.5V77l0.5-0.9l0.9-1.1 l0.7-0.8l0.9-0.5l-0.1,0.7l0.8-1.1l0.5-0.2l0.6-0.8l1.3,0.5l1,0.8l-0.3,1l-0.6,1l-1.3,0.9l-0.1,0.6h0.3l1.5-0.9l0.6,0.2l-0.2,1.3 l-0.2,0.9l-1.3,1.2l-0.7,0.8l-0.9,0.8l0.9,0.5l0.9,0.1l1.4-0.3l1.3-0.6l1-0.3l1.6-0.6l2-1.3v-0.2l0.1-0.7l0.9-0.3l1.4,0.1l1.4,0.2 l1.6-0.7l0.2-0.9l-0.1-0.3l2.4-1.5l0.9-0.4h2.7h3.2l0.4-0.5l0.6-0.1l0.9-0.3l1-1l1.1-1.7l1.9-1.6l0.4,0.6l1.3-0.3l0.6,0.6l-1,3 l0.8,1.3l0.1,0.7l-2.2,1l-2.1,0.8l-2.1,0.7l-1.4,1.3l-0.5,0.5l-0.4,1.2l0.2,1.1l0.7,0.1l0.1-0.8l0.4,0.5l-0.3,0.6l-1.3,0.3h-0.9 l-1.5,0.4l-0.8,0.1l-1.1,0.1l-1.7,0.7l2.8-0.4l0.4,0.4l-2.7,0.7H209l0.1-0.3l-0.7,0.6l0.5,0.1l-0.9,1.6l-1.8,1.7v-0.6l-0.4-0.1 l-0.4-0.6v1.2l0.3,0.4l-0.2,0.8l-0.8,0.9l-1.6,1.8l-0.1-0.1l1-1.5l-0.7-0.8l0.3-1.9l-0.7,1v1.4l-1.1-0.3l1,0.7l-0.5,2.1l0.5,0.2v0.8 l-0.3,2.2l-1.6,1.6l-2.1,0.7l-1.5,1.3l-1,0.1l-1.2,0.8l-0.5,0.7l-2.4,1.5l-1.3,1.1l-1.2,1.3l-0.7,1.6v1.6l0.2,1.9l0.5,1.6l-0.2,1 l0.5,2.6l-0.3,1.5l-0.2,0.9l-0.7,1.4l-0.6,0.3l-0.9-0.3l-0.1-1l-0.6-0.5l-0.7-1.9l-0.6-1.7l-0.1-0.9l0.7-1.5l-0.3-1.2l-1.1-1.9 l-0.7-0.3l-2.1,1l-0.3-0.1l-0.7-1l-1-0.6l-2.2,0.3l-1.6-0.3l-1.5,0.2l-0.9,0.3l0.2,0.6l-0.2,0.9l0.3,0.5l-0.4,0.3l-0.6-0.3L172,110 l-1.4-0.1l-1.1-1.2l-1.7,0.3l-1.3-0.5l-1.2,0.2l-1.7,0.5l-2.1,1.6l-2.1,1l-1.3,1l-0.7,1l-0.3,1.6l-0.1,1l0.2,0.8l-0.8,0.1l-1.3-0.5 l-1.4-0.7l-0.3-1l-0.1-1.6l-0.8-1.3l-0.3-1.3l-0.6-1.5l-1.1-0.9l-1.6,0.1l-1.7,1.7l-1.4-0.7l-0.8-0.7l-0.1-1.3l-0.3-1.1l-0.8-1 l-0.7-0.7l-0.5-0.8h-3.3l-0.3,0.9h-1.5h-3.8l-3.8-1.6l-2.4-1.1l0.3-0.5l-2.5,0.2l-2.2,0.2l0.1-1.1l-0.7-1.3l-0.8-0.3v-0.6l-1-0.1 l-0.4-0.6l-1.7-0.2l-0.3-0.4l0.3-1.2l-0.9-2.2l-0.2-3.1l0.3-0.5l-0.5-0.7l-0.5-1.9l0.6-1.8l-0.3-1.2l1.4-1.8l1-1.9l0.4-1.7l1.9-2.1 l1.4-2l1.4-2l1.5-3l0.6-1.8l0.1-1l0.5-0.5l2,0.8l-0.3,2l0.8-0.6l0.9-1.8l0.6-1.8h4.9h5.1h1.7h5.2h5.1h5.1h5.2h5.8h5.9h3.5l0.5-0.8 h0.6l-0.3,1.2l0.3,0.3l1.1,0.1l1.6,0.3l1.4,0.7l1.5-0.3L187.4,67.6z M95.5,48.1l-2.4,0.8l-0.3-0.6l0.8-1l2.2-0.7l1.2-0.3l0.9,0.1 v0.7L95.5,48.1z M82,42.4l-1.4,0.3L80,42.3l-0.3-0.6l2-0.3l1,0.2L82,42.4z M82.4,34.6l0.4,0.3l1.2-0.2l0.6,0.5l1.1,0.2l-0.4,0.2 L83.6,36L83,35.7l-0.1-0.3l-1.5,0.1l-0.1-0.2L82.4,34.6z M142.4,23.1l-8.5,7.1l-12.4,11.4l1.5,0.1l1,0.6l0.2,0.9l0.1,1.3l2.6-1.1 l2.3-0.7l-0.2,1.1l0.3,0.8l0.6,0.9l-0.4,1.5l-0.5,2.4l1.6,1.3l-1.1,1.3l-1.8,1l-0.2-0.8l-0.9-0.7l1.1-1.8l-0.6-1.7l0.9-1.9l-1.4-0.1 h-2.5l-1.3-0.6l-1.1-2.1l-1.1-0.4l-2-0.7l-2.4,0.2l-2.1-0.9l-0.9-0.9L111,41l-1.2,1.4l-1,0.1l-2.3,0.4l-2.2,0.7l-2.2,0.5l1.1-1.2 l2.9-2l2.4-0.6l0.1-0.5l-3.3,1.1l-2.6,1.4l-3.9,1.5l0.1,1L95.8,46l-2.7,0.9l-2.3,0.7l-1.4,0.9l-3.7,1.1l-1.6,1l-2.8,0.9l-0.9-0.1 L78.2,52l-2.4,0.7l-2.1,0.7L70.2,54l0.1-0.4l2.8-1l2.3-0.7l3-1.1l2.3-0.2l1.7-0.9l3.6-1.3l0.8-0.4l2-0.7l2-1.6l2.2-1.2l-2.5,0.6 l-0.1-0.4l-1.7,0.8l0.1-1l-1.3,0.7l0.6-1L85.6,45h-1l1.3-1.2L87,43l0-0.8l-2.5,0.4l-0.2-1l-0.5-0.5l1.4-1.1l-0.1-0.9l2-1.1l2.7-1.1 l1.8-1l1.4-0.1l0.6,0.3l2.5-1l0.9,0.2l1.9-0.6l0.9-0.9l-0.4-0.3l2.1-0.8h-1L98.4,33l-1,0.5L96.8,33l-2.4,0.2l-1.6-0.5l0.4-0.8 l-0.3-1.1l3.2-0.8l4.6-0.9h1.2l-1.5,1l3.2-0.1l0.4-1.2l-0.8-0.7l0.3-1l-0.2-0.8l-1.1-0.6l2.3-1l2.6-0.1l3.1-0.8l1.7-0.9l2.7-0.9 l1.7-0.2l3.9-0.8l1.1,0.1l3.6-1l1.5,0.4l-0.2,0.8l1.1-0.3l2.2,0.1l-0.7,0.4l1.7,0.3l1.7-0.2l2.2,0.6l2.5,0.2l0.8,0.2l2.3-0.3 l1.4,0.6L142.4,23.1z"/> <text id="text_al" x="115" y="32">AL</text> <text id="text_us" x="160" y="90">US</text> </svg>

Please read about the text element in SVG.

Also please read about the viewBox attribute

Answer 2

You could do something like this

<path inkscape:connector-curvature="0" id="AW" data-name="Aruba" data-id="AW"
                                d="m 586.6,492.9 -0.1,-0.1 -0.3,-0.6 -0.3,-0.3 -0.1,0.1 -0.1,0.3 0.3,0.3 0.3,0.4 0.3,0.1 0,-0.2 z"
                                data-info="<desc>US</desc>" />

using jquery to catch the onclick country and display the data-info of that particular country.

$(document).click(function(event){
if(event.target.id=="Aruba"){
  alert($('#AW').data('info'));
}
});