代码案列
<template >
<div style="width: 100%;height: 100%">
<div id="dragDiv" style="background-color: #001529;margin-top: 10px;width: 100%;height: 90%">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="280 0 1024 1400"
height="100%"
width="100%"
id="outbox">
<g>
<g id="28d34b3" name="line">
<path class="line" fill="blue" stroke="#3a9cff" paint-order="fill stroke markers"
d=" M 209.1799023140286 468.9155304128295 L 312.1799023140286 468.9155304128295" stroke-miterlimit="10"
stroke-width="6" stroke-dasharray="10,10"/>
</g>
</g>
<!--固定type值,且针对svg的功能方法<script>要写在svg标签内部 -->
<script type="application/ecmascript">
let zoomVal = 0
let zoomStepSize = 20
let removeFlag = false
let zoomW = 41
let zoomH = 41
let zoomX = 0
let zoomY = 0
var oDiv = document.getElementById("outbox")
getCurrentVB()
oDiv.addEventListener('mousedown', moveDownMouse)
oDiv.addEventListener('mouseup', moveUpMouse)
oDiv.addEventListener('mousemove', moveMouse)
oDiv.addEventListener('mousewheel',MouseWheel)
function MouseWheel (e) {
let ev = e || window.event
let down = true
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
}
}
function zoomTo (flag) {
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
}
oDiv.setAttributeNS(null, 'viewBox', zoomX + ' ' + zoomY + ' ' + zoomW + ' ' + zoomH)
endZoom()
}
function endZoom () {
getCurrentVB()
endX = vbCX
endY = vbCY
}
function moveDownMouse (evt) {
getCurrentVB()
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
vbCW = parseFloat(oDiv.viewBox.animVal.width)
vbCH = parseFloat(oDiv.viewBox.animVal.height)
oDiv.setAttributeNS(null, 'viewBox', vbCX + ' ' + vbCY + ' ' + vbCW + ' ' + vbCH)
}
}
function moveUpMouse (evt) {
oDiv.setAttributeNS(null, 'style', 'cursor: default')
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 {
obj.addEventListener(xEvent, fn, false)
}
}
</script>
</svg>
</div>
</div>
</template>
<script>
</script>
<style>
</style>