<!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">
<script src="js/jquery.js"></script>
<script src="js/jquery.panzoom.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<title>svg平移和缩放终极版</title>
</head>
<body style="background: #050507;">
<section id="focal">
<div class="parent">
<div class="panzoom">
<!-- svg代码 -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="1700"
height="900"
viewBox="0 0 449.79169 185.20833"
version="1.1"
id="svg10440"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="tedian.svg">
<defs
id="defs10434">
<inkscape:path-effect
effect="spiro"
id="path-effect45877"
is_visible="true" />
<marker
inkscape:isstock="true"
style="overflow:visible"
id="marker44541"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;stroke:#605124;stroke-width:1pt;stroke-opacity:1;fill:#605124;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path44539" />
</marker>
<marker
inkscape:isstock="true"
style="overflow:visible"
id="marker44365"
refX="0.0"
refY="0.0"
orient="auto"
inkscape:stockid="Arrow1Lstart">
<path
transform="scale(0.8) translate(12.5,0)"
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
id="path44363" />
</marker>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0.0"
refX="0.0"
id="marker44189"
style="overflow:visible"
inkscape:isstock="true">
<path
id="path44187"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
transform="scale(0.8) translate(12.5,0)" />
</marker>
<marker
inkscape:stockid="Arrow2Lend"
orient="auto"
refY="0.0"
refX="0.0"
id="Arrow2Lend"
style="overflow:visible;"
inkscape:isstock="true">
<path
id="path1599"
style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#000000;stroke-opacity:1;fill:#000000;fill-opacity:1"
d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
transform="scale(1.1) rotate(180) translate(1,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Lend"
orient="auto"
refY="0.0"
refX="0.0"
id="Arrow1Lend"
style="overflow:visible;"
inkscape:isstock="true">
<path
id="path1581"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#000000;fill-opacity:1"
transform="scale(0.8) rotate(180) translate(12.5,0)" />
</marker>
<inkscape:path-effect
end_linecap_type="zerowidth"
miter_limit="4"
linejoin_type="extrp_arc"
start_linecap_type="zerowidth"
interpolator_beta="0.2"
interpolator_type="CubicBezierJohan"
sort_points="true"
offset_points="1,0.13229167"
is_visible="true"
id="path-effect44048"
effect="powerstroke" />
<inkscape:path-effect
effect="powerstroke"
id="path-effect44044"
is_visible="true"
offset_points="1,0.13229167"
sort_points="true"
interpolator_type="CubicBezierJohan"
interpolator_beta="0.2"
start_linecap_type="zerowidth"
linejoin_type="extrp_arc"
miter_limit="4"
end_linecap_type="zerowidth" />
<inkscape:path-effect
end_linecap_type="zerowidth"
miter_limit="4"
linejoin_type="extrp_arc"
start_linecap_type="zerowidth"
interpolator_beta="0.2"
interpolator_type="CubicBezierJohan"
sort_points="true"
offset_points="1,0.13229167"
is_visible="true"
id="path-effect44040"
effect="powerstroke" />
<inkscape:path-effect
effect="powerstroke"
id="path-effect44036"
i
svg拖拽缩放.zip
4星 · 超过85%的资源 需积分: 28 56 浏览量
2020-06-15
10:56:32
上传
评论 2
收藏 105KB ZIP 举报 
svg拖拽缩放.zip （7个子文件） 
test-svg 
scale.html 4KB scale2.html 81KB index.html 18KB js 
jquery.js 258KB jquery.mousewheel.js 8KB jquery.panzoom.js 35KB svg 
tedian.svg 14KB资源评论
weixin_401125882022-06-23这份资源的解决方案非常好，已基本解决了我的需求；但目前还有点小问题，麻烦咨询下，就是在移动端不能触发svg图中订阅节点的“click”事件（但移动端是可以正常触发），麻烦能指点下问题的解决，谢谢！
