如何使响应式文本出现在 SVG 中（地图和国家/地区名称）

Question

我一直在努力寻找解决方案，但对于像我这样的新手来说似乎不可能！ 欲了解更多信息：我有一个 SVG 世界地图，它在宽度方面具有响应性。 我已经能够实现一个有效的切换，但现在我希望它在屏幕上打开和关闭地图上不同的国家名称。

那么问题是我不知道如何解决这个问题，因为文本也应该是响应式的，并且在切换打开时在屏幕上直观地出现。

我会向您展示我的代码，但我所拥有的只是切换和 svg 图像。 你可以在 github repo 上查看： https : //github.com/Swilkery/Risk/pull/8

你能告诉我用什么吗？ 我见过一些人在使用，但我不知道将它放在每个路径中的哪个位置：（这是美国的示例路径）

<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

正如我所评论的：

1. 为了使 svg 元素具有响应性，您需要使用 viewBox 属性并且没有宽度或高度。 在这种情况下， svg 元素将采用所有可用的宽度。

2. 如果您需要添加一些文本，您需要将文本放在<text>元素中。

3. <defs>元素用于存储稍后将使用的图形对象。 在元素内创建的对象不会被渲染

这是我添加了 2 个文本元素的示例。 x 和 y 属性设置文本的位置。

 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>

请阅读 SVG 中的 文本元素。

另请阅读viewBox属性

Answer 2

你可以做这样的事情

<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>" />

使用 jquery 捕获 onclick 国家并显示该特定国家的数据信息。

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