<!DOCTYPE html>
<html lang="en" xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body style="width:1000px;margin:10px auto;">
<svg id="example" width="1000" height="800" xmlns="https://www.w3.org/2000/svg">
<!-- 画个框框当边界 -->
<rect x="0" y="0" width="100%" height="100%" fill="none" stroke='rgb(99,99,99)' stroke-width='2' />
<circle id="circle1" class="dragable" cx="100" cy="100" r="30" fill="red" fill-opacity="0.7" />
<circle id="circle2" class="dragable" cx="200" cy="100" r="30" fill="yellow" fill-opacity="0.7" />
<circle id="circle3" class="dragable" cx="300" cy="100" r="30" fill="blue" fill-opacity="0.7" />
</svg>
</body>
<script>
var svg=document.getElementById('example'), target = null, startPoint = svg.createSVGPoint(), curPoint = svg.createSVGPoint();
function refreshPoint(event) { curPoint.x = event.clientX; curPoint.y = event.clientY; }
var dragables = document.getElementsByClassName('dragable');
for (var i=0; i<dragables.length; i++) {
var dragable = dragables[i];
dragable.addEventListener('mousedown', function(event) {
target = event.target;
refreshPoint(event);
var matrix = target.getCTM();
startPoint.x = curPoint.x - matrix.e;
startPoint.y = curPoint.y - matrix.f;
});
}
svg.addEventListener('mousemove', function(event) {
if (!target) return;
refreshPoint(event);
var newX = curPoint.x - startPoint.x;
var newY = curPoint.y - startPoint.y;
target.setAttributeNS(null, "transform", "translate(" + newX + "," + newY + ")");
});
svg.addEventListener('mouseup', function(event){ if (!target) return; target = null; });
</script>
</html>
TOC
学习 SVG：简单拖动
发布于码厩技术博客的所有文章，除注明转载外，均为作者原创，欢迎转载，但必须注明出处。
尊重他人劳动，共创开源社区！转载请注明以下信息：
转载来源： 码厩技术博客 [https://www.markjour.com]
原文标题：学习 SVG：简单拖动
原文地址：/article/20171125-svg-2.html
尊重他人劳动，共创开源社区！转载请注明以下信息：
转载来源： 码厩技术博客 [https://www.markjour.com]
原文标题：学习 SVG：简单拖动
原文地址：/article/20171125-svg-2.html