在一张图片上加热点区域可以通过<map>标签来实现，也可以直接使用导出的 SVG 文件直接完成热点区域的绘制。
通过<map>标签的方法：https:////www.cnblogs.com/liangpi/p/11944052.html
1、需要先将所需大图标注出可点击区域后，导出为svg文件，嵌入当前html文件中。
<body oncopy="return false" oncut="return false" onselectstart="return false" oncontextmenu="return false" ondragstart="return false"> <div class="content"> <svg id="svgRootDom" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin meet" width="5522" height="1376" viewBox="0,0,5522,1376"> <defs> <style> .cls-1, .cls-2 { fill: #ff0101; opacity: 0; } .cls-2 { fill-rule: evenodd; } </style> </defs> <image id="背景" width="5522" height="1376" xlink:href="./img/bg.jpg"/> <path onclick="clickItem('0000','001')" id="_0-1" data-name="0-1" class="cls-1" d="M0,0H149.732V1376H0V0Z"/> <rect onclick="clickItem('s065','000')" id="_1-1" data-name="1-1" class="cls-2" x="306" y="149" width="228" height="228"/> 。。。更多区域省略 <path onclick="clickItem('m053','000')" id="_8-6" data-name="8-6" class="cls-1" d="M5153.13,1128.25h188.14v213.72H5153.13V1128.25Z"/> </svg> </div> </body>
2、添加相应的js控制绘制区域的缩放
<script type="text/ecmascript"> window.onload=function(){ var svgRootDom = $("#svgRootDom")[0]; adjustToFreezeHeight(svgRootDom); }; function adjustToFreezeWidth(rootSvg) { var windowWidth = $(window).width(); var viewBoxVal = rootSvg.getAttribute("viewBox"); var viewBoxWidth = viewBoxVal.split(",")[2]; var viewBoxHeight = viewBoxVal.split(",")[3]; rootSvg.removeAttribute("width"); rootSvg.removeAttribute("height"); var setWidth = windowWidth; var setHeight = (setWidth * viewBoxHeight) / viewBoxWidth; rootSvg.setAttribute("width", setWidth); rootSvg.setAttribute("height", setHeight); } function adjustToNone(rootSvg) { var viewBoxVal = rootSvg.getAttribute("viewBox"); var viewBoxWidth = viewBoxVal.split(",")[2]; var viewBoxHeight = viewBoxVal.split(",")[3]; rootSvg.removeAttribute("width"); rootSvg.removeAttribute("height"); rootSvg.setAttribute("width", viewBoxWidth); rootSvg.setAttribute("height", viewBoxHeight); } function adjustToFreezeHeight(rootSvg) { var windowHeight = $(window).height(); var viewBoxVal = rootSvg.getAttribute("viewBox"); var viewBoxWidth = viewBoxVal.split(",")[2]; var viewBoxHeight = viewBoxVal.split(",")[3]; rootSvg.removeAttribute("width"); rootSvg.removeAttribute("height"); var setHeight = windowHeight; var setWidth = (setHeight * viewBoxWidth)/viewBoxHeight; rootSvg.setAttribute("width", setWidth); rootSvg.setAttribute("height", setHeight); } function adjustToFreezeAll() { var windowHeight = $(window).height(); var windowWidth = $(window).width(); rootSvg.removeAttribute("width"); rootSvg.removeAttribute("height"); rootSvg.setAttribute("width", windowWidth); rootSvg.setAttribute("height", windowHeight); } </script>
3、在HTML中，用image引入原图片信息作为背景
<image id="背景" width="5522" height="1376" xlink:href="./img/bg.jpg"/>
其中：xlink:href 表示图片路径，可以是svg导出时的base64转码，也可以是引入本地文件。