前端web设定热点区域--通过 SVG

在一张图片上加热点区域可以通过<map>标签来实现，也可以直接使用导出的 SVG 文件直接完成热点区域的绘制。

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转码，也可以是引入本地文件。

前端web设定热点区域--通过 SVG

猜你喜欢