Javascript 显示和隐藏SVG中的元素

我正在尝试建立一个交互式地图，你可以点击圆圈（对于城市）来显示一些文字。当您单击另一个圆圈时，会显示另一个文本。以下是我迄今为止所做的：

<svg width="320px" height="210px"
     xmlns="http://www.w3.org/2000/svg">
  <title>Javascript und SVG</title>
  <defs>
    <script type="text/javascript">
    <![CDATA[
      var id = 'name';

      function place(id){
        var adress_style = document.getElementById(id).style;
        adress_style.setProperty('display','block');
      }
    ]]>
    </script>

  </defs>

<!-- Text: show and hide -->
<g id="city_1" style="display:none; background-color:white;"><text transform="matrix(1 0 0 1 50 30)"><tspan x="0" y="0" fill="#382787" font-family="'Roboto'" font-size="14">Organisation No. 1</tspan><tspan x="0" y="18" font-family="'Roboto'" font-size="14">Responsible Person</tspan><tspan x="0" y="36" font-family="'Roboto'" font-size="14">Zip City</tspan><tspan x="0" y="54" font-family="'Roboto'" font-size="14">Phone No.</tspan><tspan x="0" y="72" font-family="'Roboto'" font-size="14">mail adress</tspan></text>
</g>
<g id="city_2" style="display:none; background-color:white;"><text transform="matrix(1 0 0 1 50 30)"><tspan x="0" y="0" fill="#382787" font-family="'Roboto'" font-size="14">Another Organisation</tspan><tspan x="0" y="18" font-family="'Roboto'" font-size="14">Another Person</tspan><tspan x="0" y="36" font-family="'Roboto'" font-size="14">Another City</tspan><tspan x="0" y="54" font-family="'Roboto'" font-size="14">Phone No.</tspan><tspan x="0" y="72" font-family="'Roboto'" font-size="14">another mail adress</tspan></text>
</g>
<!-- 2 circles as buttons -->
  <circle cx="240" cy="30" r="10"
    style="fill:white; stroke:black;"
    onclick="place('city_1')" />
  <circle cx="240" cy="70" r="10"
    style="fill:green; stroke:black;"
    onclick="place('city_2')" />

</svg>

Javascript和SVG
机构编号1负责人邮编城市电话号码邮箱地址
另一个组织另一个人另一个城市电话号码另一个邮件地址

它可以工作，但文本块重叠。我该怎么做才能一次只显示一个文本

谢谢你的帮助！

---

谢谢你的帮助

您可以获取所有g元素并隐藏它们，然后显示所需的元素

Javascript和SVG
机构编号1负责人邮编城市电话号码邮箱地址
另一个组织另一个人另一个城市电话号码另一个邮件地址

单击一个按钮时需要隐藏其他按钮谢谢，这太棒了！