在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
npm install axios
// yarn
yarn add @svgdotjs/svg.js
yarn add axios

1.2 在项目中引入

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

1.3 渲染准备好的SVG图

<template>
  <div class="SVG-BOX">
    <div class="SVG-BOX-directives" v-drag="{ set: set }">
      <div class="SVG-BOX-center"></div>
    </div>
  </div>
</template>

<script>
import { SVG } from "@svgdotjs/svg.js";
import axios from "axios";
export default {
  name: "",

  props: {},

  components: {},

  data() {
    return {};
  },

  directives: {
    // 拖拽指令
    drag: function (el, binding) {
      const dragBox = el; // 获取当前元素

      // 当选中对象为输入框或者文本框不执行拖拽操作
      dragBox.onmousedown = (e) => {
        if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
          return;
        }

        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";
          binding.value.set(left, top);
        };

        document.onmouseup = (e) => {
          e.preventDefault();
          // 鼠标弹起来的时候不再移动
          document.onmousemove = null;
          // 预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null;
        };
      };
    }
  },
  computed: {},

  watch: {},
  created() {},

  mounted() {
    this.initMap()
  },

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

<style scoped lang="less">
.SVG-BOX {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .SVG-BOX-directives {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    .SVG-BOX-center {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

1.4 操作SVG图

  • 其实操作SVG图跟操作原生dom类似，不过一个是xml一个是html，不过操作起来还是有一点区别
// 操作svg
    dealMap () {
      // 给所有高亮的图层加点击
      // 获取SVG图所有点位
      const addSvg = document.querySelector('.SVG-BOX-center').querySelector('g').querySelectorAll('path')
      Array.from(addSvg).forEach((x) => {
        // 给所有点位加上鼠标经过小手样式
        x.style.stroke = 'pink' 
        // x.style.cursor = 'pointer'
        // // 给所有点位加上点击事件
        // x.addEventListener('click', (e) => {
        // })
      })
    },
  • 以上可以看到其实跟原生dom操作是一样的，但下面就有不一样的了
// 改变边框线颜色
x.style.stroke = 'pink'
// 改变颜色
x.style.fill = 'pink'
// 改变 圆形 <circle> 的大小
x.r = 50 // 50是圆的半径   注意不需要加px
效果图

2 拖拽

<template>
  <div class="SVG-BOX">
    <div class="SVG-BOX-directives" v-drag="{ set: set }">
      <div class="SVG-BOX-center"></div>
    </div>
  </div>
</template>

<script>
import { SVG } from "@svgdotjs/svg.js";
import axios from "axios";
export default {
  name: "",

  props: {},

  components: {},

  data() {
    return {};
  },
  directives: {
    // 拖拽指令
    drag: function (el, binding) {
      const dragBox = el; // 获取当前元素

      // 当选中对象为输入框或者文本框不执行拖拽操作
      dragBox.onmousedown = (e) => {
        if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
          return;
        }

        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";
          binding.value.set(left, top);
        };

        document.onmouseup = (e) => {
          e.preventDefault();
          // 鼠标弹起来的时候不再移动
          document.onmousemove = null;
          // 预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null;
        };
      };
    }
  },
  computed: {},

  watch: {},
  created() {},

  mounted() {},

  methods: {
    set() {},
  },
};
</script> 

<style scoped lang="less">
.SVG-BOX {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .SVG-BOX-directives {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    .SVG-BOX-center {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

3 放大/缩小

<template>
  <div class="SVG-BOX">
    <div class="SVG-BOX-directives" v-drag="{ set: set }">
      <div
        class="SVG-BOX-center"
        :style="scaleImg"
        @mousewheel.prevent="scaleFun"
      ></div>
    </div>
  </div>
</template>

<script>
import { SVG } from "@svgdotjs/svg.js";
import axios from "axios";
export default {
  name: "",

  props: {},

  components: {},

  data() {
    return {
      scaleImg: "transform:scale(1)",
      imgScale: 1,
    };
  },
  directives: {
    // 拖拽指令
    drag: function (el, binding) {
      const dragBox = el; // 获取当前元素

      // 当选中对象为输入框或者文本框不执行拖拽操作
      dragBox.onmousedown = (e) => {
        if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
          return;
        }

        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";
          binding.value.set(left, top);
        };

        document.onmouseup = (e) => {
          e.preventDefault();
          // 鼠标弹起来的时候不再移动
          document.onmousemove = null;
          // 预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null;
        };
      };
    }
  },
  computed: {},

watch: {
imgScale: {
      handler: function (val) {
        if (val <= 0.5) return
        this.scaleImg = `transform:scale(${this.imgScale})`;
        this.stationAllAlarmDialogShow()
      },
    },
  },
  created() {},

  mounted() {},

  methods: {
    set() {},
    // 滚动放大
  scaleFun(e) {
      const direction = e.deltaY > 0 ? "down" : "up";
      if (direction === "up") {
        // 滑轮向上滚动
        this.imgScale += 0.1;
      } else {
        if (this.imgScale <= 0.5) return
        // 滑轮向下滚动
        this.imgScale -= 0.1;
      }
    },
  },
};
</script> 

<style scoped lang="less">
.SVG-BOX {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .SVG-BOX-directives {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    .SVG-BOX-center {
      width: 100%;
      height: 100%;
    }
  }
}
</style>

4 完整代码（附点击SVG图在点击位置生成图标）

效果图
<template>
  <div class="SVG-BOX">
    <div class="SVG-BOX-directives" v-drag="{ set: set }">
      <div
        class="SVG-BOX-center"
        id="SVG-BOX-center"
        :style="scaleImg"
        @mousewheel.prevent="scaleFun"
        @click="clickSvgPage($event)"
      ></div>
    </div>
    <div
      class="SVG-dialog"
      id="SVG-dialog"
      ref="SVGDialog"
      v-show="SVGDialog"
    ></div>
  </div>
</template>

<script>
import { SVG } from "@svgdotjs/svg.js";
import axios from "axios";
export default {
  name: "",

  props: {},

  components: {},

  data() {
    return {
      scaleImg: "transform:scale(1)",
      imgScale: 1,
      SVGDialog: false,
    };
  },
directives: {
    // 拖拽指令
    drag: function (el, binding) {
      const dragBox = el; // 获取当前元素

      // 当选中对象为输入框或者文本框不执行拖拽操作
      dragBox.onmousedown = (e) => {
        if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
          return;
        }

        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";
          binding.value.set(left, top);
        };

        document.onmouseup = (e) => {
          e.preventDefault();
          // 鼠标弹起来的时候不再移动
          document.onmousemove = null;
          // 预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
          document.onmouseup = null;
        };
      };
    }
  },  computed: {},

  watch: {
    imgScale: {
      handler: function (val) {
        if (val <= 0.5) return
        this.scaleImg = `transform:scale(${this.imgScale})`;
        this.stationAllAlarmDialogShow()
      },
    },
  },
  created() {},

  mounted() {
    this.initMap();
  },

  methods: {
    set() {},
    // 滚动放大
    scaleFun(e) {
      const direction = e.deltaY > 0 ? "down" : "up";
      if (direction === "up") {
        // 滑轮向上滚动
        this.imgScale += 0.1;
      } else {
        if (this.imgScale <= 0.5) return
        // 滑轮向下滚动
        this.imgScale -= 0.1;
      }
    },

    // 渲染SVG图
    initMap() {
      // 获取准备好的预设区域
      const dom = document.querySelector(".SVG-BOX-center");
      dom.innerHTML = "";
      // 对SVG图进行异步渲染
      return new Promise((resolve, reject) => {
        const draw = SVG()
          .addTo(".SVG-BOX-center") // 要渲染的区域
          .size("100%", "100%") // 大小
          .scale(1, 1); // 比例
        axios.get(require("@/assets/map.svg")).then((res) => {
          draw.svg(res.data);
          resolve("success");
          this.dealMap(); // 操作SVG图
        });
        // 再次点击标记图标 就隐藏掉图标
        const SVGDialogDom = document.querySelector('.SVG-dialog');
        SVGDialogDom.addEventListener('click', (e) => {
          this.SVGDialog = false;
        });
      });
    },
    // 操作svg
    dealMap() {
      // 给所有高亮的图层加点击
      // 获取SVG图所有点位
      const addSvg = document
        .querySelector(".SVG-BOX-center")
        .querySelector("g")
        .querySelectorAll("path");
      Array.from(addSvg).forEach((x) => {
        // 给所有点位加上鼠标经过小手样式
        x.style.stroke = "pink";
        // x.style.cursor = 'pointer'
        // // 给所有点位加上点击事件
        x.addEventListener("click", (e) => {});
      });
    },
    // SVG图标记位置
    clickSvgPage(e) {
      this.SVGDialog = true;
      this.$refs.SVGDialog.style.left = e.pageX + "px";
      this.$refs.SVGDialog.style.top = e.pageY + "px";
      // 点击后图片的左上角会对应点击的位置，可以通过偏移量来达到想要的效果
      this.$refs.SVGDialog.style.transform = "translate(-50%, -70%)";
    },
  },
};
</script> 

<style scoped lang="less">
.SVG-BOX {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .SVG-BOX-directives {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    .SVG-BOX-center {
      width: 100%;
      height: 100%;
    }
  }
  .SVG-dialog {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 26px;
    background: url("../assets/logo.png") no-repeat;
    background-size: 100%;
  }
}
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,163评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,301评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,089评论 0赞 352
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,093评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,110评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,079评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,005评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,840评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,278评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,394评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,980评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2赞 352