如何通过鼠标移动SVG元素? [英] How can i move SVG element by mouse?
本文介绍了如何通过鼠标移动SVG元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想用鼠标移动该多边形.我怎样才能做到这一点? 我想我应该使用类似onMouseDown和onMouseMove的方法来获取新位置并进行transform ="translate(x，y)，但是我如何通过JS做到这一点?
I want to move this polygon by mouse. How can i do this? I think i should use some like onMouseDown and onMouseMove get new position and transform="translate(x,y) but how can i do this by JS?
推荐答案
您可以在jquery中使用可拖动用户界面.这是您编辑的代码:
You can use draggable from jquery UI. Here is your edited code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#Layer_1" ).draggable();
} );
</script>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<polygon class="st0" points=" 0,5 10,0 20,5 10,10" transform="translate(90,95) rotate(0 0 0)" stroke="none" fill="red"/>
</svg>
</body>
</html>
这篇关于如何通过鼠标移动SVG元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
