欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

html5 svg世界地圖地區(qū)提示框代碼

老白2年前8瀏覽0評(píng)論

HTML5 SVG世界地圖地區(qū)提示框代碼能夠幫助開(kāi)發(fā)者在地圖上添加彈出提示效果,使得用戶能夠快速獲得更多的地理信息。

<svg width="100%" height="600" viewBox="0 0 1000 600" xmlns="http://www.w3.org/2000/svg">
<g id="regions">
<path id="Asia" d="M404.6,190.6l101.9,11.8l78.6,28.6l23.6,24.6l-12.9,45.7l-6.5,5.5l-11.2,1.8l-5.5,-5.5l-36.7,-9.3l-18.3,-3.7l-11.8,-3.7l-3.7,1.2l-8.4,12.9l-10.5,20.5l-7,2.4l-11,-10.5l-8.7,-9.9l-12.5,-6.5l-47.6,...
<title>Asia</title>
</path>
<path id="Australia" d="M515.3,402.3l-0.3,3.9l-1.5,2.2l-2.8,-0.3l-3.6,-3.3l-3.9,-3.6l-1.5,-0.5l-0.8,0.7l-1.5,-1.5l-2,-0.7l-1.8,-1.2l-2.2,-0.1l-21.7,-9.9l-24.7,-12.3l-3.3,-1.2l-4.2,4.8l-4.5,2.5l-4.2,-1.8l-2.5,-0.5l-1.8,1.8l-3.3,-0.3l...
<title>Australia</title>
</path>
</g>
<script type="text/javascript">
var regions = document.getElementById('regions');
var paths = regions.getElementsByTagName('path');
var tooltip = document.createElementNS("http://www.w3.org/2000/svg", "text");
tooltip.setAttribute("x", "0");
tooltip.setAttribute("y", "0");
tooltip.setAttribute("fill", "#000000");
tooltip.setAttribute("font-size", "14");
regions.appendChild(tooltip);
for (var i = 0; i < paths.length; i++) {
paths[i].addEventListener('mouseover', function(e) {
tooltip.setAttribute("x", e.offsetX);
tooltip.setAttribute("y", e.offsetY);
tooltip.textContent = e.target.getAttribute("title");
});
paths[i].addEventListener('mouseout', function(e) {
tooltip.textContent = "";
});
}
</script>
</svg>

上述代碼能夠讓用戶在鼠標(biāo)移動(dòng)到地圖上的某個(gè)特定區(qū)域時(shí)彈出提示框,方便用戶獲取相關(guān)信息。