关于SVG格式图片实现室内地图

- Hola -

已于 2024-04-02 21:38:09 修改

阅读量755

点赞数 4

文章标签： javascript

于 2024-03-30 13:52:50 首次发布

本文链接：https://blog.csdn.net/weixin_53922163/article/details/137163979

版权

SVG格式图片

可缩放矢量图形（Scalable Vector Graphics，SVG）基于 XML 标记语言，用于描述二维的矢量图形。

作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和 CSS、DOM、JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML相对于文本。

SVG 图像及其相关行为被定义于 XML 文本文件之中，这意味着可以对它们进行搜索、索引、编写脚本以及压缩。此外，这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑它们。

绘制SVG

这里以某商场为例，绘制一小块地图：

打开 Illustrator -> 新建文档 -> 矩形+文字进行地图元素的绘制。

选中这个快，Ctrl+G 对其进行编组，并修改该块最外层的图层id为 _1 。注意，必须以下划线开头，因为图片导出为SVG格式会生成 XML , 而 XML ID 必须以下划线开头。（最好用业务id进行命名，例如店铺编号）

修改后的图层信息如下：

现在多绘制几个：

将其导出为SVG格式图片，使用idea等工具打开，可以看到其源代码。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 595.28 841.89" style="enable-background:new 0 0 595.28 841.89;" xml:space="preserve">
  <style type="text/css">
    .st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
    .st1{font-family:'AdobeSongStd-Light-GBpc-EUC-H';}
    .st2{font-size:18px;}
  </style>
  <g id="_3">
    <rect x="200.5" y="62.2" class="st0" width="121" height="86"/>
    <text transform="matrix(1 0 0 1 232.6123 105.1978)" class="st1 st2">00003</text>
    <text transform="matrix(1 0 0 1 233.314 130.8887)" class="st1 st2">Nike</text>
  </g>
  <g id="_2">
    <rect x="51" y="183.5" class="st0" width="121" height="86"/>
    <text transform="matrix(1 0 0 1 83.1123 226.5)" class="st1 st2">00002</text>
    <text transform="matrix(1 0 0 1 83.814 252.1909)" class="st1 st2">Adidas</text>
  </g>
  <g id="_1">
    <rect x="51" y="62" class="st0" width="121" height="86"/>
    <text transform="matrix(1 0 0 1 83.1123 105)" class="st1 st2">00001</text>
    <text transform="matrix(1 0 0 1 83.814 130.6909)" class="st1 st2">优衣库</text>
  </g>
</svg>

前端实现点击事件

其实到这里，应该可以明白原理了，导出后的SVG图片源码其实就是一个一个的Dom节点，并且每个<g>标签就是刚刚编的组，id也就是图层名称。

为了简单，我这里新建一个html，并将刚刚的SVG代码粘贴进去，或者自行使用<img>、<object>标签进行引用。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>SVG Click Event</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function () {

        // 给SVG中的所有矩形添加点击事件  
        $('rect').click(function () {

          // 获取当前矩形的id  
          var rectId = $(this).parent().attr('id');

          // 获取当前矩形内部的文本元素  
          var text = $(this).nextAll('text').first().next().text();

          // 打印id和文本  
          alert("点击了" + rectId + ",文本为：" + text);
        });
      }); 
    </script>
  </head>

  <body>
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
      y="0px" viewBox="0 0 595.28 841.89" style="enable-background:new 0 0 595.28 841.89;" xml:space="preserve">
      <style type="text/css">
        .st0 {
          fill: #FFFFFF;
          stroke: #000000;
          stroke-miterlimit: 10;
        }

        .st1 {
          font-family: 'AdobeSongStd-Light-GBpc-EUC-H';
        }

        .st2 {
          font-size: 18px;
        }
      </style>
      <g id="_3">
        <rect x="200.5" y="62.2" class="st0" width="121" height="86" />
        <text transform="matrix(1 0 0 1 232.6123 105.1978)" class="st1 st2">00003</text>
        <text transform="matrix(1 0 0 1 233.314 130.8887)" class="st1 st2">Nike</text>
      </g>
      <g id="_2">
        <rect x="51" y="183.5" class="st0" width="121" height="86" />
        <text transform="matrix(1 0 0 1 83.1123 226.5)" class="st1 st2">00002</text>
        <text transform="matrix(1 0 0 1 83.814 252.1909)" class="st1 st2">Adidas</text>
      </g>
      <g id="_1">
        <rect x="51" y="62" class="st0" width="121" height="86" />
        <text transform="matrix(1 0 0 1 83.1123 105)" class="st1 st2">00001</text>
        <text transform="matrix(1 0 0 1 83.814 130.6909)" class="st1 st2">优衣库</text>
      </g>
    </svg>

  </body>

</html>

点击效果如下：