如何通过鼠标移动 SVG 多边形元素?

2024-02-02

我想用鼠标移动这个多边形。我怎样才能做到这一点? 我想我应该使用 onMouseDown 和 onMouseMove 之类的方法来获取新位置并转换为“translate(x,y)”,但是我如何通过 JS 来做到这一点?


您可以使用可拖动的 https://jqueryui.com/draggable/来自 jquery 用户界面。这是您编辑的代码:

<!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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何通过鼠标移动 SVG 多边形元素? 的相关文章

随机推荐