1.简介
今天宏哥分享的在实际测试工作中很少遇到，比较生僻，如果突然遇到我们可能会脑大、懵逼，一时之间不知道怎么办？所以宏哥这里提供一种思路供大家学习和参考。
2.SVG简介
svg也是html5新增的一个标签，它跟canvas很相似。都可以实现绘图、动画。但是svg绘制出来的都是矢量图，不像canvas是以像素为单位的，放大会模糊。svg绘制出来的图是不会的。SVG英文全称为Scalable vector Graphics，意思为可缩放的矢量图，这种元素比较特殊，需要通过 name() 函数来进行定位。
3.SVG元素拖拽
3.1svg拖拽demo
1.svg下的circle元素是可以拖动的，宏哥网上找了半天没有找到，然后自己动手写一个demo用于演示（可以看到circle的cx和cy在拖拽的过程中不断的发生变化），如下图所示：
2.demo的参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>北京-宏哥</title>
<style>
svg {
margin-left: 100px;
margin-top: 100px;
border: 1px solid black
}
</style>
</head>
<body>
<svg width="500" height="300" id="svg-container">
<circle cx="100" cy="100" r="20" fill="blue" id="draggable-circle"></circle>
</svg>
</body>
<script>
// 获取SVG容器和可拖拽元素
const svgContainer = document.getElementById('svg-container');
const draggableElement = document.getElementById('draggable-circle');
let isDragging = false;
let startX, startY;
// 鼠标按下事件处理程序
function dragStart(event) {
isDragging = true;
startX = event.clientX - parseInt(draggableElement.getAttribute('cx')),
startY = event.clientY - parseInt(draggableElement.getAttribute('cy'));
// 阻止默认的拖拽行为
event.preventDefault();
}
// 鼠标移动事件处理程序
function drag(event) {
if (isDragging) {
const dx = event.clientX - startX;
const dy = event.clientY - startY;
draggableElement.setAttribute('cx', dx);
draggableElement.setAttribute('cy', dy);
}
}
// 鼠标抬起事件处理程序
function dragEnd(event) {
isDragging = false;
}
// 添加事件监听器
draggableElement.addEventListener('mousedown', dragStart);
svgContainer.addEventListener('mousemove', drag);
svgContainer.addEventListener('mouseup', dragEnd);
</script>
</html>
3.接下来我们用上边的svg的demo来演示拖拽，其实在我们上一篇中掌握如何定位svg元素后，拖拽就非常简单了，无非就是一些鼠标的操作事件罢了。
3.2代码设计
3.3参考代码
# coding=utf-8 标签：Canvas,Playwright,const,Python,svg,canvasInfo,ctx,canvas,拖拽 From： https://www.cnblogs.com/du-hong/p/18177694