显示和隐藏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>