顯示和隱藏SVG中的元素

Question

我正在嘗試建立一個交互式地圖，您可以在其中單擊圓圈（對於城市）以顯示一些文本。 當您單擊另一個圓圈時，將顯示另一個文本。 這是我到目前為止所做的：

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

它有效，但文本塊重疊。 我該怎么做才能一次只顯示一個文本？

您的幫助將不勝感激！ 謝謝你的幫助！

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>