我试图设置一个交互式地图,您可以点击圈子(对于城市)来显示一些文字。当您单击另一个圆圈时,会出现另一个文本。这是我到目前为止所做的:
<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>
它有效但文本块重叠。我该怎么做才能一次只显示一个文字?
我们将非常感谢您的帮助! 谢谢你的帮助!
答案 0 :(得分:0)
您可以获取所有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>