javascript - 显示和隐藏 SVG 中的元素

Question

我正在尝试设置一个交互式 map ，您可以在其中单击圆圈(对于城市)来显示一些文本。当您单击另一个圆圈时，会出现另一个文本。这是我到目前为止所做的:

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

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

我们将不胜感激您的帮助! 感谢您的帮助!

Answer 1

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

<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 gs = document.getElementsByTagName("g");
        for (var i = 0; i < gs.length; i++) {
          gs[i].style.setProperty('display','none');
        }
        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>