在Vue项目中渲染SVG图，并做简单的操作等(附拖拽指令)

• 本次将说明如何在项目中使用SVG图，并做一些简单的操作等，毕竟SVG图相对于图片具有可操作性，对图像进行放大不会失真。
• SVG什么意思：SVG是一种可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。简单的理解，它是图形的另一种格式例如它和常见的图片格式.png、.jpg、.gif等是一类。

SVG 有如下特点：
SVG 绘制的是矢量图，因此对图像进行放大不会失真。
基于 XML，可以为每个元素添加 JavaScript 事件处理器。
每个图形均视为对象，更改对象的属性，图形也会改变。**

SVG 画布的预定义元素里，有六种基本图形跟一种比较特殊，也是功能最强的元素：
六种基本图形：
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线段 <line>
折线 <polyline>
多边形 <polygon>
特殊元素：
路径 <path>

1. 在项目中使用SVG图

1.1 安装

// npm
npm install @svgdotjs/svg.js
// yarn
yarn add @svgdotjs/svg.js

1.2 在项目中引入

import { SVG } from '@svgdotjs/svg.js'

1.3 渲染准备好的SVG图

<div class="map"></div>

// 渲染SVG图
    initMap () {
      // 获取准备好的预设区域
      const dom = document.querySelector('.map')
      dom.innerHTML = ''
      // 对SVG图进行异步渲染
      return new Promise((resolve, reject) => {
        const draw = SVG()
          .addTo('.map') // 要渲染的区域
          .size('100%', '100%') // 大小
          .scale(1, 1) // 比例
        axios.get(
            require('SVG图片路径')
          )
          .then((res) => {
            draw.svg(res.data)
            resolve('success')
            this.dealMap() // 操作SVG图
          })
      })
    },

1.4 操作SVG图

• 其实操作SVG图跟操作原生dom类似，不过一个是xml一个是html，不过操作起来还是有一点区别

    // 操作svg
    dealMap () {
      // 给所有高亮的图层加点击
      // 获取SVG图所有点位
      const addSvg = document.querySelector('.map').querySelectorAll('g')
      Array.from(addSvg).forEach((x) => {
        // 给所有点位加上鼠标经过小手样式
        x.style.cursor = 'pointer'
        // 给所有点位加上点击事件
        x.addEventListener('click', (e) => {
        })
      })
    },

• 以上可以看到其实跟原生dom操作是一样的，但下面就有不一样的了

// 改变颜色
x.fill = 'pink'
// 改变 圆形 <circle> 的大小
x.r = 50 // 50是圆的半径   注意不需要加px

2 拖拽指令

<div class="map" v-drag  ></div>

  // 拖拽
  directives: {
    drag: function (el, binding) {
      const dragBox = el // 获取当前元素
      dragBox.onmousedown = (e) => {
        e.preventDefault()
        // 算出鼠标相对元素的位置
        const disX = e.clientX - dragBox.offsetLeft
        const disY = e.clientY - dragBox.offsetTop
        document.onmousemove = (e) => {
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          e.preventDefault()
          const left = e.clientX - disX
          const top = e.clientY - disY
          // 移动当前元素
          dragBox.style.left = left + 'px'
          dragBox.style.top = top + 'px'        }
        document.onmouseup = (e) => {
          e.preventDefault()
          // 鼠标弹起来的时候不再移动
          document.onmousemove = null
          // 预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null
        }
      }
    }
  }