SVG图像缩放及拖动

最新推荐文章于 2024-08-01 17:51:09 发布
最新推荐文章于 2024-08-01 17:51:09 发布
阅读量7.3k 收藏 11
点赞数 3
分类专栏： 其他
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Beam007/article/details/84856265
版权

SVG图像缩放及拖动

svg引入

方法一：通过embed标签引入

<embed id="svgPic" name="svgPic" text-rendering="geometricPrecision" pluginspage="http://www.adobe.com/svg/viewer/install/" align="top" src="/static/svg/svgPic.svg" type="image/svg+xml" wmode="transparent">

方法二：直接引入

<svg version="1.1" id="svgPic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">
	<rect x="-1" y="0.128" fill="transparent" width="1920" height="1080"/>
	<line fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="27.865" y1="138.277" x2="1039.588" y2="138.277"/>
	……
</svg>

svg图像缩放，从调用Init开始

let oDiv = null // svg对应的dom对象
let vbCX = 0
let vbCY = 0
let vbCW = 0
let vbCH = 0
let zoomVal = 0 // 放大缩小累计值
let zoomStepSize = 20 // 放大缩小每次改变的步长20
let removeFlag = false // 控制点击拖动，区分未点击时的鼠标移动
let startX = 0 // 起始值x坐标
let startY = 0 // 起始值y坐标
let moveX = 0 // 水平移动量，往左为正
let moveY = 0 // 垂直移动量，往上为正
let endX = 0 // 最终到达的x坐标
let endY = 0 // 最终到达的y坐标
let zoomW = 41 // 初始值 > zoomStepSize * 2 初次滚动后即可得到准确的当前值
let zoomH = 41 // 初始值 > zoomStepSize * 2 初次滚动后即可得到准确的当前值
let zoomX = 0
let zoomY = 0

// 加载SVG图像
export function Init (svgId) {
  oDiv = document.getElementById(svgId)
  getCurrentVB() // svg图层参数初始化
  // 挂载监听鼠标事件，考虑兼容性，兼容火狐DOMMouseScroll事件
  addEvent(oDiv, 'mousewheel', onMouseWheel)
  addEvent(oDiv, 'DOMMouseScroll', onMouseWheel)
  oDiv.addEventListener('mousedown', moveDownMouse, false)
  oDiv.addEventListener('mouseup', moveUpMouse, false)
  oDiv.addEventListener('mousemove', moveMouse, false)
}

// 鼠标滚轮事件
function onMouseWheel (e) {
  let ev = e || window.event
  let down = true
  // ev.wheelDelta已定义，ev.wheelDelta < 0为true表示往下滚动，为false表示往上滚动
  // ev.wheelDelta未定义，ev.detail > 0为true表示往下滚动，为false表示往上滚动
  // wheelDelta和detail正好相反，火狐中wheelDelta未定义只能使用detail
  down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0
  if (down) {
    zoomOut() // 缩小
  } else {
    zoomIn() // 放大
  }
  if (ev.preventDefault) {
    ev.preventDefault()
  }
  return false
}
function zoomIn () {
  if (zoomW > zoomStepSize * 2 && zoomH > zoomStepSize * 2) {
    zoomVal += zoomStepSize
    zoomTo('in')
  }
}
function zoomOut () {
  zoomVal -= zoomStepSize
  if (zoomVal >= -zoomStepSize * 11) {
    zoomTo('out')
  } else {
    zoomVal = -zoomStepSize * 11 // 最小缩至-220不能再缩了
  }
}
function zoomTo (flag) {
  // 变化之前获取当前viewBox的位置
  getCurrentVB()
  // *********** 放大缩小后的各值的计算 开始 ***********
  if (flag === 'in') {
    zoomX = vbCX + zoomStepSize
    zoomY = vbCY + zoomStepSize
    zoomW = vbCW - zoomStepSize * 2
    zoomH = vbCH - zoomStepSize * 2
  } else {
    zoomX = vbCX - zoomStepSize
    zoomY = vbCY - zoomStepSize
    zoomW = vbCW + zoomStepSize * 2
    zoomH = vbCH + zoomStepSize * 2
  }
  // *********** 放大缩小后的各值的计算 结束 ***********
  // 将计算的结果赋予viewBox刷新当前展示的视图位置
  oDiv.setAttributeNS(null, 'viewBox', zoomX + ' ' + zoomY + ' ' + zoomW + ' ' + zoomH)
  // 变化之后获取当前viewBox的位置 保证了 vbCX vbCY vbCW vbCH始终为当前viewBox的值
  endZoom()
}
function endZoom () {
  getCurrentVB()
  // 视图发生系列缩放改变后最终的(x, y)坐标记录下来，用于放大后拖动
  endX = vbCX
  endY = vbCY
}

// 鼠标点击事件
function moveDownMouse (evt) {
  removeFlag = true
  startX = parseInt(evt.clientX) // 当前点击的点的横坐标
  startY = parseInt(evt.clientY) // 当前点击的点的纵坐标
}
// 鼠标移动事件
function moveMouse (evt) {
  if (removeFlag) {
    oDiv.setAttributeNS(null, 'style', 'cursor: move')
    moveX = parseInt(evt.clientX) - startX // 当前点-原始点=移动量
    moveY = parseInt(evt.clientY) - startY // 当前点-原始点=移动量
    vbCX = endX - moveX
    vbCY = endY - moveY
    // 刷新当前viewBox展示的视图位置
    oDiv.setAttributeNS(null, 'viewBox', vbCX + ' ' + vbCY + ' ' + vbCW + ' ' + vbCH)
  }
}
// 鼠标点击后松开事件
function moveUpMouse (evt) {
  oDiv.setAttributeNS(null, 'style', 'cursor: default')
  // 视图发生系列移动后最终的(x, y)坐标记录下来，用于放大后拖动
  endX = vbCX
  endY = vbCY
  removeFlag = false
}

// 获取当前视图VB的位置信息
function getCurrentVB () {
  vbCX = parseFloat(oDiv.viewBox.animVal.x)
  vbCY = parseFloat(oDiv.viewBox.animVal.y)
  vbCW = parseFloat(oDiv.viewBox.animVal.width)
  vbCH = parseFloat(oDiv.viewBox.animVal.height)
}
// 绑定事件到dom节点，考虑到兼容性
function addEvent (obj, xEvent, fn) {
  if (obj.attachEvent) {
    obj.attachEvent('on' + xEvent, fn)
  } else {
    obj.addEventListener(xEvent, fn, false)
  }
}

svg缩放与移动【最新2020.12.02】

在之前的代码上进行的优化

let oDiv = null
let vbCX = 0
let vbCY = 0
let vbCW = 0
let vbCH = 0
let zoomVal = 0 // 放大缩小累计值
let zoomStepSize = 20 // 放大缩小每次改变的步长20
let removeFlag = false
let startX = 0 // 起始值x坐标
let startY = 0 // 起始值y坐标
let moveX = 0 // 水平移动量，往左为正
let moveY = 0 // 垂直移动量，往上为正
let endX = 0 // 最终到达的x坐标
let endY = 0 // 最终到达的y坐标
let zoomW = 41 // 初始值 > zoomStepSize * 2 初次滚动后即可得到准确的当前值
let zoomH = 41 // 初始值 > zoomStepSize * 2 初次滚动后即可得到准确的当前值
let zoomX = 0
let zoomY = 0

// 加载SVG地图
export function Init (svgId, svgDoc) {
  if (svgId === null) {
    oDiv = svgDoc // 外部引入直接传入svg对象
  } else {
    oDiv = document.getElementById(svgId) // 代码嵌入，通过svg标签的ID获取svg对象
  }
  // 参数初始化
  initBasicParam()
  addEvent(oDiv, 'mousewheel', onMouseWheel)
  addEvent(oDiv, 'DOMMouseScroll', onMouseWheel) // 兼容火狐使用DOMMouseScroll事件
  oDiv.addEventListener('mousedown', moveDownMouse, false)
  oDiv.addEventListener('mouseup', moveUpMouse, false)
  oDiv.addEventListener('mousemove', moveMouse, false)
}
// svg图层参数初始化
function initBasicParam () {
  getCurrentVB()
}
// 以下是鼠标事件 放大缩小地图 移动地图
function onMouseWheel (e) {
  let ev = e || window.event
  let down = true
  // ev.wheelDelta已定义，ev.wheelDelta < 0为true表示往下滚动，为false表示往上滚动
  // ev.wheelDelta未定义，ev.detail > 0为true表示往下滚动，为false表示往上滚动
  // wheelDelta和detail正好相反，火狐中wheelDelta未定义只能使用detail
  down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0
  if (down) {
    zoomOut()
  } else {
    zoomIn()
  }
  if (ev.preventDefault) {
    ev.preventDefault()
  }
  return false
}
// zoom in 放大
function zoomIn () {
  if (zoomW > zoomStepSize * 2 && zoomH > zoomStepSize * 2) {
    zoomVal += zoomStepSize
    zoomTo('in')
  }
}
// zoom out 缩小
function zoomOut () {
  zoomVal -= zoomStepSize
  if (zoomVal >= -zoomStepSize * 11) {
    zoomTo('out')
  } else {
    zoomVal = -zoomStepSize * 11 // 最小缩至-220不能再缩了
  }
}
function zoomTo (flag) {
  // 变化之前获取当前viewBox的位置
  getCurrentVB()
  // *********** 放大缩小后的各值的计算 开始 ***********
  if (flag === 'in') {
    zoomX = vbCX + zoomStepSize
    zoomY = vbCY + zoomStepSize
    zoomW = vbCW - zoomStepSize * 2
    zoomH = vbCH - zoomStepSize * 2
  } else {
    zoomX = vbCX - zoomStepSize
    zoomY = vbCY - zoomStepSize
    zoomW = vbCW + zoomStepSize * 2
    zoomH = vbCH + zoomStepSize * 2
  }
  // *********** 放大缩小后的各值的计算 结束 ***********
  // 将计算的结果赋予viewBox刷新当前展示的视图位置
  oDiv.setAttributeNS(null, 'viewBox', zoomX + ' ' + zoomY + ' ' + zoomW + ' ' + zoomH)
  // 变化之后获取当前viewBox的位置 保证了 vbCX vbCY vbCW vbCH始终为当前viewBox的值
  endZoom()
}
function endZoom () {
  getCurrentVB()
  // 视图发生系列缩放改变后最终的(x, y)坐标记录下来，用于放大后拖动
  endX = vbCX
  endY = vbCY
}
function moveDownMouse (evt) {
  // 移动点击时，初次先确认最终的坐标点，因为viewBox前两个参数可能不是0 0
  endZoom()
  removeFlag = true
  startX = parseInt(evt.clientX) // 当前点击的点的横坐标
  startY = parseInt(evt.clientY) // 当前点击的点的纵坐标
}
function moveMouse (evt) {
  if (removeFlag) {
    oDiv.setAttributeNS(null, 'style', 'cursor: move')
    moveX = parseInt(evt.clientX) - startX // 当前点-原始点=移动量
    moveY = parseInt(evt.clientY) - startY // 当前点-原始点=移动量
    vbCX = endX - moveX
    vbCY = endY - moveY
    // 刷新当前viewBox展示的视图位置
    oDiv.setAttributeNS(null, 'viewBox', vbCX + ' ' + vbCY + ' ' + vbCW + ' ' + vbCH)
  }
}
function moveUpMouse (evt) {
  oDiv.setAttributeNS(null, 'style', 'cursor: default')
  // 视图发生系列移动后最终的(x, y)坐标记录下来，用于放大后拖动
  endX = vbCX
  endY = vbCY
  removeFlag = false
}
function getCurrentVB () {
  vbCX = parseFloat(oDiv.viewBox.animVal.x)
  vbCY = parseFloat(oDiv.viewBox.animVal.y)
  vbCW = parseFloat(oDiv.viewBox.animVal.width)
  vbCH = parseFloat(oDiv.viewBox.animVal.height)
}
function addEvent (obj, xEvent, fn) {
  if (obj.attachEvent) {
    obj.attachEvent('on' + xEvent, fn)
  } else {
    // 解决e.preventDefault()报错 第三个参数由false改为 {passive: false}
    obj.addEventListener(xEvent, fn, { passive: false })
  }
}

遗留问题：

1、360等浏览器 SVG 放大倍数有问题
2、Microsoft edge SVG缩放闪屏
解决后更新

Beam007
关注
专栏目录
html svg 移动缩放,SVG缩放，移动，倾斜和旋转变换
weixin_42463165的博客
06-27 4469
SVG元素可以通过缩放，移动，倾斜和旋转来变换-类似HTML元素使用CSS transform来变换。然而，当涉及到坐标系时这些变换所产生的影响必然有一定差别。在这篇文章中我们讨论SVG的transform属性和CSS属性，包括如何使用，以及你必须知道的关于SVG坐标系变换的知识。#FormatImgID_0#SVG系列教程transform属性值tranform属性用来对一个元素声明一个或多个变...
用uniapp写的H5网页中svg的缩放和拖动
qq_69692573的博客
03-30 869
先给svg加一个id=“svg” 加两个事件@touchmove="move" @touchend="end"然后获取两个触点的坐标，并计算出两个坐标x，y的差值，最后利用差值求出手指滑动的长度scale。这里this.width和this.height就是svg的宽度和高度，直接修改就能缩放。这时将第一次的scale和第二次的进行对比，如果第一次的比第二次的长 那就是缩小。这里使用的到的原理就是通过两个手指张开或缩小的距离等比缩放svg的宽高。width和height的初始值 通过onLoad获取。
实现SVG图片放大缩小及拖动功能
03-10
实现SVG图片的Pan and Zoom 功能
svg图放大、缩小、拖拽
huanhuan03的博客
12-26 6151
svg平移缩放
vue集成svg大图拖拽无限放大缩小
最新发布
08-01 145
https://www.cnblogs.com/chenyangjava/p/18336511
svg 缩放_深入探讨：可缩放矢量图形（SVG）动画
cune1359的博客
07-02 1175
今天，我们将继续有关可缩放矢量图形（SVG）的讨论，而这次我们将与SVG Animation一起使用 。 不过不要害怕，SVG Animation相对容易，实际上，在这篇文章中，我们将从基础知识开始。 推荐读物： 可扩展矢量图形概览 基本实施 SVG中的动画可以通过<animate>元素完成； <svg> <rect width="200" hei...
svg图片动态缩放功能(jquery.svg.pan.zoom)
qq_15058285的博客
10-28 3319
svg图片动态缩放功能 jquery-svg-pan-zoom配置项详情
svg 支持缩放和拖动DEMO
04-26
在本DEMO中，我们探讨的是如何在SVG环境中实现图形的缩放和拖动功能，这对于创建交互式地图、图表或者任何需要用户操作的矢量图形应用来说是至关重要的。 首先，SVG图形的缩放通常通过变换（transform）属性来实现...
html js控制svg图片的缩放拖动可运行精品实例
06-18
在本实例中，"html js控制svg图片的缩放拖动可运行精品实例"展示了如何利用JavaScript来实现SVG元素的动态操作。 首先，我们需要创建一个SVG容器，并设置其初始大小。这可以通过CSS或内联样式完成。例如： ```html...
svg移动端拖动和缩放
飞鸟慕鱼的博客
08-10 2961
注意:本文的拖动和缩放指的是svg本身的位置不变，但是对里面的元素进行拖拽和缩放 svg的拖动和缩放主要运用的就是svg的transform属性，操作里面的translate和scale就可以了，就是计算方面要用到一些数学变换的知识。 1.缩放比拖动要麻烦很多，先实现拖动，直接看下面的例子。注意测试的时候要换成手机模式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
图片 svg 放大缩小 鼠标拖动功能
04-01
支持 图片 svg div 等的拖动，放大 ，缩小，代码都写好了，直接可以跑
使用 svg 实现拖拽效果
12-11
在svg中实现组件拖动效果，完整的DEMO，可使用浏览器直接打开浏览
[免费]svg滚轮缩放拖拽
09-06
自己写的关于js操控SVG的整体缩放，实现了鼠标滚轮的整体缩放，可以实现svg的单个图形或者任意多个图形的拖拽，缩放！辛苦了两天终于弄完了，希望对你有帮助！
svg移动+缩放+拖动添加+事件
04-17
svg鼠标滚轮缩放，鼠标拖动svg。拖动div添加svg元素，并添加元素的左右键单击事件
svg 缩放_使用可缩放矢量图形（SVG）中的文本
cune1359的博客
07-02 785
在之前的文章中，我们使用SVG来创建shapes 。 如标题所述，在本文​​中，我们将研究使用SVG创建Text 。 除了普通HTML文本所能提供的功能之外，我们还可以对文本做很多事情。 因此，让我们检查一下。 推荐读物： 可扩展矢量图形概览 基本实施 但是，在继续之前，让我们看一下SVG中的Text是如何在其最基本的层次上形成的： <svg> <text...
svg可缩放矢量图绘制线、面
baipenggui_bo
04-10 1283
SVG是一种基于XML语法的图形形式，全程是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。svg的绘制图形有：直线、 折线、圆、椭圆、多边形、文字等，还有图像的动画设置。
svg中的image的拖动
qq_37344867的博客
04-06 523
需求完成过程的主要出现的问题有以下2个： 问题1：无法获取image信息 解决方法：因为图片是放在svg之中，所以image信息的获取不能仅仅使用image标签获取，需要通过image.node才能获取 问题2：拖动图片的时候，第二次拖动的时候位置会回到初始化状态 解决方法：一开始是在鼠标移动时进行鼠标位置的记忆叠加，然后发现没有效果甚至会出现抖动，后经过研究发现应该在鼠标按下的事件中进行鼠标位置的更新 //移动图片 function move(){ var $slide = $(".scan_res
使用svg标签 解决实现图片的放大，缩小，和拖拽效果的问题。
jdhrucn的博客
08-11 3658
viewBox的前两个属性是截图框的位置，而后面的两个属性是”截图框“的大小。只要后面监听鼠标的滚动事件，向上就是把viewBox的后两个属性变小就会实现放大效果，线下就是把viewBox的后两个属性变大。拖拽的实现只需要改变我们的viewBox前两个属性就可以了，viewBox的第一个属性是svg框的距离图片左上角的x，第二个是y。A点到放大后的图片的最左边的距离就是我们viewBox中的第一个属性x ，距离最上边那就是第二个属性y。1.首先我们要实现放大，缩小，和拖拽的前提是把图片利用svg显示。
如何缩放SVG
热门推荐
CSS 初学者指南
06-26 1万+
以下是Amelia Bellamy-Royds的来宾帖子。 作为SVG Essentials的合著者和即将出版的《 将SVG与CSS3和HTML5结合使用》的作者，Amelia在SVG方面拥有丰富的经验。 我和Amelia都将在即将到来的RWD峰会上就SVG发表演讲！ 在这里，她分享了扩展SVG的史诗指南，涵盖了您可能要执行的所有方法。 它几乎不像缩放栅格图形那样简单，但是那样很好，因为它带来...
svg拖拽缩放.zip
07-02
通过使用相关的 JavaScript 代码，可以实现通过鼠标拖动图形并放置到指定位置的功能，同时也可以通过滚动鼠标滚轮来实现图形的缩放操作。 在解压缩并查看该压缩文件后，你将找到一些包含 SVG 图形和 JavaScript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值