前端web設定熱點區域--通過 SVG

本文轉載自查看原文 2020-01-17 13:43 269 js

在一張圖片上加熱點區域可以通過<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轉碼，也可以是引入本地文件。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 定義熱點區域 html熱點區域精確定位熱點區域 python 繪圖線性和繪圖區域的設定 JavaScript + SVG實現Web前端WorkFlow工作流DAG有向無環圖前端js區域上下拖拽 WEB顏色值得設定 Web前端Table中的tr和td按百分比設定寬度和高度，當內容超出時Table變型解決前端實現 SVG 轉 PNG 前端如何繪制svg格式圖片