- 本次将说明如何在项目中使用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
}
}
}
}
网友评论