<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Click and Drag Events in Snap</title>
</head>
<body>
<h1>Click and Drag Events in Snap</h1>
<div style="text-align: center;">
<svg id="Svg" x="0" y="0" viewBox="0 0 1200 600" style="border: 1px solid red;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="ots">
<g id="grp" style="border: 1px solid red;">
<circle id="circle" cx="100" cy="100" r="100" style="fill: #663399;stroke: black;" />
<circle id="circle" cx="110" cy="120" r="5" style="fill: red;stroke: none;" />
<rect id="button" x="60" y="170" rx="5" ry="5" width="80" height="25" style="stroke:black;fill:red;cursor: pointer;" />
<text id="buttonText" x="100" y="187" class="buttonText" style="fill: black;stroke: none;font-family: sans-serif;font-size: 12pt;text-anchor: middle;cursor: pointer;">Reset
</text>
</g>
</g>
<circle id="c" cx="300" cy="300" r="50" style="fill: green;" />
</svg>
</div>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script src="js/d3.v3.min.js"></script>
<script type="text/javascript" src="js/snap.svg-min.js"></script>
<script type="text/javascript" src="js/indexTest.js"></script>
</body>
</html>
[免费]svg滚轮缩放拖拽
5星 · 超过95%的资源 需积分: 48 79 浏览量
2017-09-06
15:23:29
上传
评论 3
收藏 154KB ZIP 举报 
svg缩放拖拽.zip （10个子文件） 
svg缩放拖拽 js 
jquery-3.2.0.min.js 85KB snap.svg-min.js 80KB jquery.mousewheel.js 8KB TweenMax.min.js 100KB indexTest.js 2KB d3.v3.min.js 148KB .idea workspace.xml 33KB 测试.iml 336B modules.xml 264B
indexTest.html 1KB资源评论
dragonjing6222020-07-14资源还可以，就是属于入门级别而已
andian20162018-05-02假设一种情况：现在我有一个很大的svg文件，里面100多个g标签，那么就需要手动为每一个g标签添加id，按这样做的话必须在indexText.js文件中配置好对应的每一个g标签id，过一段时间如果我又要换一个svg文件岂不是又要重新配置，工作量好大哦，有没有更灵活的办法例如只需要往indexText.js文件添加svg文件的路径即可完成配置？我也刚刚接触这方面知识，期待和您交流哦- smileqxj2017-09-27可以很好用
xiaoliuchangzai2017-10-20必须的，为大家分享
